Bootstrap基础教程电子书

内容提要

前言

第1章 Bootstrap是什么

1.1 Bootstrap简述

1.2 为什么使用Bootstrap

1.3 如何使用Bootstrap

1.4 下载Bootstrap

1.5 简单模板

1.6 案例：第一个Bootstrap实例

1.7 Bootstrap 4

本章小结

练习与实训

第2章 栅格系统

2.1 实现原理

2.2 工作原理

2.3 使用方法

2.3.1 基本用法

2.3.2 列偏移

2.3.3 列排序

2.3.4 列嵌套

2.3.5 响应式栅格

2.4 案例：招商银行首页

本章小结

练习与实训

第3章 CSS布局

3.1 排版

3.1.1 标题

3.1.2 段落

3.1.3 mark标签

3.1.4 小号文本

3.1.5 del和s标签

3.1.6 ins和u标签

3.1.7 strong和em标签

3.1.8 b和i标签

3.1.9 文本对齐方式

3.1.10 字母大小写

3.1.11 缩略语

3.1.12 地址

3.1.13 引用

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.4.5 紧凑型表格

3.4.6 状态类

3.4.7 响应式表格

3.5 按钮

3.5.1 预定义按钮

3.5.2 按钮尺寸

3.5.3 块级按钮

3.5.4 按钮激活状态

3.5.5 按钮禁用状态

3.5.6 按钮标签

3.6 图像

3.6.1 响应式图像

3.6.2 图像形状

3.7 辅助类

3.7.1 情景文本颜色

3.7.2 情景文本背景色

3.7.3 关闭按钮

3.7.4 三角符号

3.7.5 快速浮动

3.7.6 块级居中显示

3.7.7 清除浮动

3.7.8 显示或隐藏

3.7.9 屏幕阅读器和键盘焦点

3.7.10 图像替换

3.8 案例：个人简历

本章小结

练习与实训

第4章 表单

4.1 基础表单

4.1.1 基本实例

4.1.2 内联表单

4.1.3 水平表单

4.2 输入框

4.3 下拉框

4.4 文本域

4.5 复选框和单选按钮

4.6 表单焦点

4.7 表单禁用

4.8 验证样式

4.8.1 颜色提示

4.8.2 图标提示

4.8.3 文字提示

4.9 元素大小

4.9.1 高度

4.9.2 宽度

4.10 输入框组

4.11 案例：一个表单页面

本章小结

练习与实训

第5章 CSS组件

5.1 字体图标

5.1.1 可用的字体图标

5.1.2 使用字体图标

5.1.3 字体图标实例

5.1.4 定制字体图标

5.2 下拉菜单

5.2.1 基本用法

5.2.2 对齐

5.2.3 标题和分割线

5.2.4 菜单状态

5.3 按钮组

5.3.1 基本按钮组

5.3.2 按钮工具栏

5.3.3 尺寸

5.3.4 嵌套

5.3.5 垂直的按钮组

5.3.6 两端对齐的按钮组

5.4 按钮式弹出菜单

5.4.1 单按钮下拉菜单

5.4.2 分裂式按钮下拉菜单

5.4.3 尺寸

5.4.4 向上弹出式菜单

5.5 输入框组

5.5.1 基本实例

5.5.2 尺寸

5.5.3 作为额外元素的复选框和单选按钮

5.5.4 作为额外元素的按钮

5.5.5 作为额外元素的按钮式下拉菜单

5.5.6 作为额外元素的分裂式按钮下拉菜单

5.5.7 作为额外元素的多个按钮

5.6 导航

5.6.1 选项卡导航

5.6.2 胶囊式导航

5.6.3 两端对齐的导航

5.6.4 禁用的链接

5.6.5 带有下拉菜单的导航

5.7 导航栏

5.7.1 默认样式的导航栏

5.7.2 品牌图标

5.7.3 表单

5.7.4 按钮

5.7.5 文本

5.7.6 非导航的链接

5.7.7 对齐方式

5.7.8 固定在顶部

5.7.9 固定在底部

5.7.10 静止在顶部

5.7.11 反色导航栏

5.7.12 响应式导航栏

5.8 路径导航

5.9 分页

5.9.1 基本实例

5.9.2 禁用和激活状态

5.9.3 尺寸

5.10 翻页

5.10.1 基本实例

5.10.2 对齐链接

5.10.3 可选的禁用状态

5.11 标签

5.11.1 基本实例

5.11.2 多样式的标签

5.12 徽章

5.13 巨幕

5.14 页头

5.15 缩略图

5.15.1 基本实例

5.15.2 自定义内容

5.16 警告框

5.16.1 基本警告框

5.16.2 可关闭的警告框

5.16.3 警告框中的链接

5.17 进度条

5.17.1 基本实例

5.17.2 根据情景变化的进度条

5.17.3 条纹进度条

5.17.4 动画进度条

5.17.5 堆叠进度条

5.18 媒体对象

5.18.1 默认样式

5.18.2 对齐方式

5.18.3 媒体对象列表

5.19 列表组

5.19.1 基本实例

5.19.2 向列表组添加徽章

5.19.3 向列表组添加链接

5.19.4 向列表组中添加按钮

5.19.5 列表项目禁用状态

5.19.6 列表项目情景类

5.19.7 向列表组添加自定义内容

5.20 面板

5.20.1 基本实例

5.20.2 带标题的面板

5.20.3 带脚注的面板

5.20.4 情景效果

5.20.5 带表格的面板

5.20.6 带列表组的面板

5.21 Well

5.22 案例：制作一个个人简历页面

本章小结

练习与实训

第6章 JavaScript插件

6.1 插件库说明

6.2 模态框

6.2.1 模态框的结构

6.2.2 模态框的特点

6.2.3 模态框触发方式

6.2.4 过渡效果

6.2.5 触发参数data-*

6.2.6 JavaScript触发——参数

6.2.7 JavaScript触发——方法

6.2.8 JavaScript触发——事件

6.3 下拉菜单

6.3.1 声明式触发

6.3.2 JavaScript触发

6.3.3 事件

6.4 滚动监听

6.4.1 组件说明

6.4.2 滚动监听实现步骤

6.4.3 声明式触发

6.4.4 JavaScript触发

6.5 选项卡

6.5.1 选项卡的组成

6.5.2 声明式触发

6.5.3 JavaScript触发

6.5.4 过渡效果

6.5.5 事件

6.6 工具提示

6.6.1 结构

6.6.2 JavaScript触发

6.6.3 Data-*属性

6.6.4 事件

6.7 弹出框

6.7.1 弹出框结构

6.7.2 声明式属性

6.7.3 JavaScript触发

6.7.4 事件

6.8 警告框

6.8.1 Alert结构

6.8.2 声明式触发

6.8.3 JavaScript触发

6.8.4 事件

6.9 按钮

6.9.1 按钮加载状态

6.9.2 单选按钮

6.9.3 复选框

6.9.4 方法

6.10 折叠

6.10.1 结构

6.10.2 声明式触发

6.10.3 方法

6.10.4 事件

6.11 轮播

6.11.1 轮播结构

6.11.2 声明式触发

6.11.3 JavaScript触发

6.11.4 事件

6.12 Afflix插件

6.12.1 声明属性

6.12.2 JavaScript方法

6.12.3 事件

6.13 案例

本章小结

练习与实训

第7章 第三方扩展

7.1 字体图标

7.1.1 介绍

7.1.2 常规用法

7.1.3 List列表上的图标

7.1.4 导航上的图标

7.1.5 固定角度旋转图标

7.1.6 动画图标

7.1.7 多图叠加

7.2 Buttons

7.3 DateTimePicker

7.4 Flat UI

7.5 案例：特性页面

本章小结

练习与实训

第8章 综合案例

8.1 网站概述

8.2 开始页面

8.3 主要内容的制作

8.3.1 制作第一屏

8.3.2 制作第二屏

8.3.3 制作第三屏

8.3.4 制作第四屏

8.4 完善网站

8.4.1 添加地图

8.4.2 添加导航条

8.4.3 设置页脚

8.4.4 设置滚动监听

8.4.5 平滑滚动

本章小结

练习与实训

附录A Less和Sass

附录B CSS选择器

参考文献