Bootstrap教程
文章目录
- 1.安装
- 2.容器
-
- 2.1容器的类别
-
- 2.1.1 .container类
- 2.1.2 .container-fluid类
- 2.2 容器的边距
- 2.3 容器的颜色
- 2.4响应式容器
- 3.网格系统
-
- 3.1 网格类
- 3.2 网格系统规则
- 3.3 bootstrap 网络的基本结构
-
- 3.3.1 创建相等宽度的列，Bootstrap 自动布局
- 3.3.2 等宽响应式列
- 3.3.3 设置某一列宽度
- 3.3.4嵌套列
- 3.3.5 偏移列
- 4.文字排版
-
- 4.1 Bootstrap 5 默认设置
- 4.2 < h1 > - < h6 >
- 4.3 Display 标题类
- 5.颜色
-
- 5.2 背景颜色
- 6.表格
-
- 6.1基础表格
- 6.2 条纹表格
- 6.3 带边框的表格
- 6.4鼠标悬停状态表格
- 6.5 黑色背景表格
- 6.6 黑色条纹表格
- 6.7 鼠标悬停效果 - 黑色背景表格
- 6.8 无边框表格
- 6.9 指定意义的颜色类
- 6.10 表头颜色
1.安装
使用两种方式下载：
- 使用 Bootstrap5 CDN。
- 从官网 getbootstrap.com 下载 Bootstrap 5。
2.容器
bootstraps需要用容器来包裹网站的内容。
2.1容器的类别
- .container 类用于固定宽度并且支持响应式布局的容器
- .container-fluid 类 用于100%宽度，占据全部视口的容器。
2.1.1 .container类
用于创建固定宽度的类
宽度 (max-width) 会根据屏幕宽度同比例放大或缩小。
| 超级小屏幕<576px | 小屏幕≥576px | 中等屏幕≥768px | 大屏幕≥992px | 特大屏幕≥1200px | 超级大屏幕≥1400px | |
| max-width | 100% | 540px | 720px | 960px | 1140px | 1320px |
2.1.2 .container-fluid类
用于创建全屏尺寸的容器，容器始终跨越整个屏幕的宽度。
2.2 容器的边距
默认情况下，容器都有填充左右内边距，顶部和底部没有填充内边距。Bootstrap 提供了一些间距类用于填充边距。 比如 .pt-5 就是用于填充顶部内边距：
2.3 容器的颜色
Bootstrap 也提供了一些边框（border）和颜色（bg-dark、bg-primary等）类用于设置容器的样式：
2.4响应式容器
你可以使用 .container-sm|md|lg|xl 类来创建响应式容器。
容器的 max-width 属性值会根据屏幕的大小来改变。
3.网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
我们也可以根据自己的需要，定义列数。
Bootstrap 5 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
请确保每一行中列的总和等于或小于 12。
3.1 网格类
Bootstrap 5 网格系统有以下 6 个类:
- col- 针对所有设备。
- col-sm- 平板 屏幕宽度等于或大于 576px。
- col-md- 桌面显示器 屏幕宽度等于或大于 768px。
- col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px。
- col-xl- 特大桌面显示器 屏幕宽度等于或大于 1200px。
- col-xxl- 超大桌面显示器 - 屏幕宽度等于或大于 1400px。
3.2 网格系统规则
Bootstrap5 网格系统规则:
- 网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
- 使用行来创建水平的列组。
- 内容需要放置在列中，并且只有列可以是行的直接子节点。
- 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
- 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
- 网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置。
- Bootstrap 5 和 Bootstrap 4 使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。 如果您想了解有关 Flexbox 的更多信息，可以网上查阅相关的资料 。
3.3 bootstrap 网络的基本结构
"row">
"col-*-*">
"row">
"col-*-*">
"col-*-*">
"col-*-*">
"row">
"col">
"col">
"col">
3.3.1 创建相等宽度的列，Bootstrap 自动布局
"row">
"col">.col
"col">.col
"col">.col
3.3.2 等宽响应式列
以下实例演示了在平板及更大屏幕上创建不等宽度的响应式列。 在移动设备上，即屏幕宽度小于 576px 时，两个列将会上下堆叠排版:
"col-sm-3">.col-sm-3
"col-sm-3">.col-sm-3
"col-sm-3">.col-sm-3
"col-sm-3">.col-sm-3
3.3.3 设置某一列宽度
如果只设置一列的宽度，其他列会自动均分剩下的宽度。 以下实例将列宽度为 25%、50%、25%：
"row">
"col">col
"col-6">col-6
"col">col
3.3.4嵌套列
以下实例创建两列布局，其中一列内嵌套着另外两列：
"row">
"col-8">
.col-8
"row">
"col-6">.col-6
"col-6">.col-6
"col-4">.col-4
3.3.5 偏移列
偏移列通过 offset-- 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
例如：.offset-md-4 是把.col-md-4 往右移了四列格。
"row">
"col-md-4">.col-md-4
"col-md-4 offset-md-4">.col-md-4 .offset-md-4
"row">
"col-md-3 offset-md-3">.col-md-3 .offset-md-3
"col-md-3 offset-md-3">.col-md-3 .offset-md-3
"row">
"col-md-6 offset-md-3">.col-md-6 .offset-md-3
4.文字排版
4.1 Bootstrap 5 默认设置
Bootstrap 5 默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。
此外，所有的 < p > 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。
4.2 < h1 > - < h6 >
Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。你也可以使用 .h1 到 .h6 类来设置元素的样式：
"container">
"h1">h1 Bootstrap 标题
"h2">h2 Bootstrap 标题
"h3">h3 Bootstrap 标题
"h4">h4 Bootstrap 标题
"h5">h5 Bootstrap 标题
"h6">h6 Bootstrap 标题
4.3 Display 标题类
Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。
"container">
Display 标题
Display 标题可以输出更大更粗的字体样式。
"display-1">Display 1
"display-2">Display 2
"display-3">Display 3
"display-4">Display 4
| < small > | 在 Bootstrap 5 中 HTML < small > 元素用于创建字号更小的颜色更浅的文本: |
| < mark > | Bootstrap 5 定义 < mark > 标签及 .mark 类为黄色背景及有一定的内边距: |
| < abbr > | Bootstrap 5 定义 HTML < abbr > 元素的样式为显示在文本底部的一条虚线边框: |
| < blockquote > | 对于引用的内容可以在 < blockquote > 上添加 .blockquote 类 : |
| < dl > | Bootstrap 5 定义 HTML < dl > 元素的样式如下: |
| < code > | Bootstrap 5 定义 HTML < code > 元素的样式如下: |
| < pre > | Bootstrap 5 定义 HTML < pre > 元素的样式如下: |
| < kbd > | Bootstrap 5 定义 HTML < kbd > 元素的样式如下: |
5.颜色
Bootstrap 5 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (默认颜色，为黑色) and .text-light:
"container">
代表指定意义的文本颜色
"text-muted">柔和的文本。
"text-primary">重要的文本。
"text-success">执行成功的文本。
"text-info">代表一些提示信息的文本。
"text-warning">警告文本。
"text-danger">危险操作文本。
"text-secondary">副标题。
"text-dark">深灰色文字。
"text-body">默认颜色，为黑色。
"text-light">浅灰色文本（白色背景上看不清楚）。
"text-white">白色文本（白色背景上看不清楚）。
可以设置文本颜色透明度为 50% ，使用 .text-black-50 或 .text-white-50 类:
"text-black-50">透明度为 50% 的黑色文本，背景为白色。
"text-white-50 bg-dark">透明度为 50% 的白色文本，背景为黑色。
实例
"container">
文本颜色
鼠标移动到链接。
"#" class="text-muted">柔和的链接。
"#" class="text-primary">主要链接。
"#" class="text-success">成功链接。
"#" class="text-info">信息文本链接。
"#" class="text-warning">警告链接。
"#" class="text-danger">危险链接。
"#" class="text-secondary">副标题链接。
"#" class="text-dark">深灰色链接。
"#" class="text-light">浅灰色链接。
5.2 背景颜色
提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。
注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用。
"container">
背景颜色
"bg-primary text-white">重要的背景颜色。
"bg-success text-white">执行成功背景颜色。
"bg-info text-white">信息提示背景颜色。
"bg-warning text-white">警告背景颜色
"bg-danger text-white">危险背景颜色。
"bg-secondary text-white">副标题背景颜色。
"bg-dark text-white">黑色背景颜色。
"bg-light text-dark">浅灰背景颜色。
6.表格
6.1基础表格
Bootstrap5 通过 .table 类来设置基础表格的样式，实例如下:
"table">
Firstname
Lastname
Email
John
Doe
[email protected]
Mary
Moe
[email protected]
July
Dooley
[email protected]
6.2 条纹表格
通过添加 .table-striped 类，您将在 内的行上看到条纹
"table table-striped">
Firstname
Lastname
Email
John
Doe
[email protected]
Mary
Moe
[email protected]
July
Dooley
[email protected]
6.3 带边框的表格
.table-bordered 类可以为表格添加边框
"table table-bordered">
Firstname
Lastname
Email
John
Doe
[email protected]
Mary
Moe
[email protected]
July
Dooley
[email protected]
6.4鼠标悬停状态表格
.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）：
"table table-hover">
Firstname
Lastname
Email
John
Doe
[email protected]
Mary
Moe
[email protected]
July
Dooley
[email protected]
6.5 黑色背景表格
.table-dark 类可以为表格添加黑色背景：
6.6 黑色条纹表格
联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格：
6.7 鼠标悬停效果 - 黑色背景表格
联合使用 .table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果：
6.8 无边框表格
.table-borderless 类可以设置一个无边框的表格：
6.9 指定意义的颜色类
通过指定意义的颜色类可以为表格的行或者单元格设置颜色：
| 类名 | 描述 |
|---|---|
| .table-primary | 蓝色: 指定这是一个重要的操作 |
| .table-success | 绿色: 指定这是一个允许执行的操作 |
| .table-danger | 红色: 指定这是可以危险的操作 |
| .table-info | 浅蓝色: 表示内容已变更 |
| .table-warning | 橘色: 表示需要注意的操作 |
| .table-active | 灰色: 用于鼠标悬停效果 |
| .table-secondary | 灰色: 表示内容不怎么重要 |
| .table-light | 浅灰色，可以是表格行的背景 |
| .table-dark | 深灰色，可以是表格行的背景 |
6.10 表头颜色
我们也可以设置表头的颜色，例如 .table-dark 类用于给表头添加黑色背景， .table-light 类用于给表头添加灰色背景:
"table">
"table-dark">
Firstname
Lastname
Email
John
Doe
[email protected]
Mary
Moe
[email protected]
July
Dooley
[email protected]