Bootstrap基础教程

Bootstrap是一个基于HTML5和CSS3的前端开发框架，它现成可用的HTML标记、CSS样式、JavaScript插件，极大地提高了Web前端界面的开发效率。目前，它已成为了前端设计领域流行的辅助技术。 本书共分8章，围绕Bootstrap 4框架的使用，讲述了Bootstrap 4框架中各类排版元素，表单、表格、列表、图片、导航等各类CSS组件和轮播、对话框、下拉菜单、滚动监听等JavaScript插件。前7章都有丰富的实例，第8章是一个综合案例。此外，个账实训案例均配有微课视频。

赵丙秀，副教授，现任职于武汉软件工程职业学院信息学院软件技术专业，先后获得 “武汉优秀青年教师”，武汉软件工程职业学院“双师素质”教师、“优秀中青年骨干教师”。出版过10多本计算机相关专业课程书籍，发表学术论文10多篇。

1 Bootstrap 是什么 1.1　Bootstrap 简述 1.2　如何使用 Bootstrap 1.3　包含内容 1.4　简单模板 1.5　案例：简单实例 2　网格系统 2.1　实现原理 2.2　工作原理 2.3　基本用法 2.4　列偏移 2.5　列排序 2.6　列嵌套 2.7　案例：招商银行首页 实训项目---页面布局 3　CSS布局 3.1　标题 3.1.1标题 3.1.2　小标题 3.1.3　display类 3.2　文本 3.2.1　lead类 3.2.2　mark 标签 3.2.3　del 和 s 标签 3.2.4　ins 和 u 标签 3.2.5　strong 和 b 标签 3.2.6　em 和 i 标签 3.2.7　文本对齐方式 3.2.8　字母大小写 3.2.9　缩略语 3.2.10　地址 3.1.11　引用 3.2　列表 3.2.1　有序列表和无序列表 3.2.2无样式列表 3.2.3　内联列表 3.2.4描述列表 . 3.　3 代码 3.4　图片 　3.4.1 图片形状 　3.4.2响应式图片 　3.4.3 对齐图片 　3.4.4 图文组合 3.　5 表格 3.　4.1 基础表格 3.　4.2 条纹表格 3.　4.3带边框的表格 3.　4.4 高亮行 3.　4.5 紧凑型表格 3.　4.6 响应式表格 3.4.7　表格颜色 3.6　按钮 3.5.1　基本按钮 3.5.2　多标签 3.5.3　按钮风格 3.5.4　按钮大小 3.5.5　块状按钮 3.5.6　激活和禁用 3.8　案例—个人主页 实训项目--页未模块 4　工具类 　4.1 颜色 　4.2 边框 　4.3 flex布局 　4.4 浮动类 　4.4.1 浮动 　4.4.2 清除浮动 　4.5 关闭图标 　4.6 文本类 　4.6.1 文本对齐 　4.6.2 折行和溢出 　4.6.3 单词中断 　4.6.4 文本转换 　4.6.5 等宽字体 　4.6.6 粗细斜体 　4.6.7 颜色重置 　4.6.8 去掉超链接下划线 　4.7 display属性 　4.7.1 基本使用 　4.7.2 隐藏元素 　4.7.3 print值 　4.8 溢出 　4.9 定位 　4.10 尺寸 　4.11 间隔 　4.12 垂直对齐 　4.13 可见性 　4.14 案例---各类工具的使用 　实训项目--图文模块 5　表单 5.1　基础表单 5.1.1　基本实例 5.1.2　内联表单 5.1.3　水平表单 5.2　表单控件 5.2.1　输入框 5.2.2　下拉框 5.2.3　文本域 5.2.4　多选框和单选框 5.3　表单焦点 5.4　表单禁用 5.5　验证样式 4.5.1　颜色提示 4.5.2　图标提示 4.5.3　文字提示 5.6　元素大小 4.6.1　高度 4.6.2　宽度 5.7　输入框组 5.8　自定义表单 5.9　案例：一个表单页面 实训项目--表单部分 6　Css组件 6.1　下拉菜单 6.1.1　基本用法 6.1.2　基本原理 6.1.3　分割线 6.1.4　菜单标题 6.1.5　对齐方式 6.1.6　菜单状态 6.3导航 6.3.1导航基础样式 6.3.2选项卡导航 6.3.3　Pills导航 6.3.4垂直导航 6.3.5导航状态 6.3.6自适应导航 6.3.7导航二级菜单 6.3.8面包屑导航 6.4导航条 6.4.1　导航条的基本用法 6.4.2　品牌图标 6.4.3导航条上的表单 6.4.4导航条上的按钮 6.4.5导航条上的文本 6.4.6导航条上的链接 6.4.7导航条中的二级菜单 6.4.8固定导航条 6.4.9反色导航条 6.5分页导航 6.6标签和徽章 6.7　卡片 5.7.1　基本卡片 5.7.1面板的标题和脚注 5.7.1卡片里的元素 5.7.1图片卡片 6.9提示框 6.10进度条 6.10.1基础进度条 6.10.2显示进度条 5.10.3彩色进度条 5.10.4堆叠效果 6.11列表组 6.11.1基础列表组 6.11.2带徽章的列表组 6.11.3链接列表组 6.11.4其他元素的支持 6.11.5状态设置 6.11.6列表组主题 6.12媒体对象 6.12.1基本构成 6.12.2对齐方式 6.12.3嵌套对象 6.12.4媒体列表组 6.13　巨幕 6.14　旋转图标 6.15　图标 6.14　案例：制作一个简单的公司主页 实训项目--导航条、页头等模块 7　javascript插件 7.1插件库说明 7.2对话框 7.2.1对话框的结构 7.2.2对话框的特点 7.2.3弹出框触发方式 7.2.4过度效果 7.2.5触发参数data-* 7.2.6JavaScript触发 7.3下拉菜单 7.3.1声明式触发 7.3.2JavaScript触发 7.3.3事件 7.4滚动监听 7.4.1组件说明 7.4.2滚动监听实现步骤 7.4.3声明式触发 7.4.4JavaScript触发 7.5　Tab选项卡 7.5.1选项卡的组成 7.5.2声明式触发 7.5.3JavaScript触发 7.5.4Pills导航 7.5.5过渡效果 7.5.6事件 7.6Tip提示框 7.6.1结构 7.6.2JavaScript触发 7.6.3Data-*属性 7.6.4事件 7.7Popover弹出框 7.7.1弹出框结构 7.7.2声明式属性 7.7.3JavaScript触发 7.7.4事件 7.8警告框 6.8.1　Alert结构 6.8.2声明式触发 6.8.3JavaScript触发 6.8.4事件 7.9　toast弹框 6.9.1　Alert结构 6.9.2声明式触发 6.9.3JavaScript触发 6.9.4事件 7.10折叠 6.10.1结构 6.10.2声明式触发 6.10.3方法 6.10.4事件 7.11轮播图 6.11.1轮播结构 6.11.2声明式触发 6.11.3javaScript触发 6.11.4事件 7.13综合案例：一个公司主页 实训项目--轮播、模态框等模块 8　企业网站 　8.1 准备启动文件 　8.2 页头区 　8.2.1 把Logo 放到导航条上方 　8.2.2 调整导航条 　8.3 添加实用导航 　8.4 调整响应式导航 　8.5 调整配色 　8.6 调整折叠后的导航条配色 　8.7 设计复杂的响应式布局 　8.7.1 调整中、宽布局 　8.7.2 调整标题、字体大小和按钮 　8.7.3 增大主栏 　8.7.4 调整第三栏 　8.7.5 针对多个视口进行微调 　8.8 复杂的页脚 　8.8.1 准备标记 　8.8.2 调整布局适应平板 　8.8.3 针对性地清除 8.8.4　修整细节 附录