【网格系统】
| 样式 |
说明 |
| .row |
定义一行 |
| .col |
均分列数，最多一行12列。每列左右间隙各15px |
| .col-{1到12} |
定义在所有屏幕下的列宽 |
| .col-{sm|md|lg|xl}-{1到12} |
定义在指定屏幕下该列占据的列宽，sm:屏幕>=576px、md:屏幕>=720px、lg:屏幕>=960px、xl:屏幕>=1200px |
| .offset-{1到11} |
在所有屏幕下的列偏移 |
| .offset-{sm|md|lg|xl}-{1到11} |
在指定屏幕下的列偏移 |
代码一：在所有尺寸屏幕下，均分三列
<div class="row">
<div class="col bg-danger">1</div>
<div class="col bg-dark">2</div>
<div class="col bg-light">3</div>
</div
代码二：在所有尺寸屏幕下，第一列占据50%，第二列占据25%，第三列占据25%
<div class="row">
<div class="col-6 bg-primary">1</div>
<div class="col bg-success">2</div>
<div class="col bg-info">3</div>
</div>
代码三：在屏幕宽度>=960像素时，第一列占据50%，第二列占据10%，第三列占据25%，小于960像素的屏幕下，每列占据100%宽度
<div class="row">
<div class="col-lg-6 bg-primary">1</div>
<div class="col-lg-3 bg-success">2</div>
<div class="col-lg-3 bg-info">3</div>
</div>
代码四：列1在所有屏幕尺寸下均向右偏移1个单元列的宽度。列2只在屏幕宽度>=960像素 时向右偏移1个单元列的宽度
<div class="row">
<div class="col-lg-5 offset-1 bg-primary">1</div>
<div class="col-lg-2 offset-lg-1 bg-success">2</div>
<div class="col-lg-3 bg-info">3</div>
</div>
【容器类】
| 样式 |
说明 |
| .container |
居中容器类，最大宽度默认为1200px。左右间隙15px |
| .container |
-fluid 全屏容器类。 |
| .jumbotron |
创建一个大的灰色的圆角背景框 |
| .jumbotron-fluid |
创建全屏的没有圆角的背景框 |
【文字常用标签】
| 标签 |
说明 |
| h1、h2、h3、h4、h5、h6 |
标题类标签，h1字体最大以次类推 |
| small |
更小、颜色更浅的字号。 |
| mark |
黄色背景及有一定的内边距的文本 |
| abbr |
简要标签, 结合title使用,
示例: \<abbr title=\"移上去显示这里的文字\">Add:\</abbr> |
| blockquote |
引用标签，可结合.blockquote 类，及footer标签、blockquote-footer
示例：\<blockquote class=\"blockquote\">内容 \<footer class=\"blockquote-footer\">脚底\</footer> \</blockquote> |
| dl、dt、dd |
在bootstrap中，dt、dd默认为块级元素。其中dt为粗体字。 |
| code |
内联代码样式 |
| pre |
块级代码样式 |
| kbd |
内联样式，黑色圆角边框，白字样式。 |
【文字常用样式】
| 样式 |
说明 |
| .display-{1到4} |
标题类，显示更大的字号，值为1-4，display-1字号最大。 |
| .small |
更小、颜色更浅的字号。 |
| .font-weight-bold |
粗体 |
| .font-weight-normal |
普通文本 |
| .font-weight-light |
更细的文本 |
| .font-italic |
斜体文本 |
| .lead |
让段落更突出 |
| .text-left |
左对齐 |
| .text-right |
右对齐 |
| .text-center |
居中对齐 |
| .text-justify |
两端对齐 |
| .text-nowrap |
段落中超出屏幕部分不换行 |
| .text-lowercase |
设定文本小写 |
| .text-uppercase |
设定文本大写 |
| .text-capitalize |
设定单词首字母大写 |
| .initialism |
显示在 \<abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字 |
| .list-unstyled |
移除默认的列表样式，列表项中左对齐 ( \<ul> 和 \<ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式) |
| .list-inline |
内联列表样式。将所有列表项放置同一行 |
| .pre-scrollable |
使 \<pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条 |
【文字颜色样式】
| 样式 |
说明 |
| .text-muted |
柔和的文本 |
| .text-primary |
重要的文本 |
| .text-success |
执行成功的文本 |
| .text-info |
代表一些提示信息的文本 |
| .text-warning |
警告文本 |
| .text-danger |
危险操作文本 |
| .text-secondary |
副标题 |
| .text-white |
白色文本（白色背景上看不清楚） |
| .text-dark |
深灰色文字 |
| .text-light |
浅灰色文本（白色背景上看不清楚） |
【背景颜色】
| 样式 |
说明 |
| .bg-primary |
重要的背景颜色 |
| .bg-success |
执行成功背景颜色 |
| .bg-info |
信息提示背景颜色 |
| .bg-warning |
警告背景颜色 |
| .bg-danger |
危险背景颜色 |
| .bg-secondary |
副标题背景颜色 |
| .bg-dark |
深灰背景颜色 |
| .bg-light |
浅灰背景颜色 |
【图形】
| 样式 |
说明 |
| .rounded |
图片显示圆角效果 |
| .rounded-circle |
设置椭圆形图片 |
| .img-thumbnail |
设置图片缩略图(图片有边框) |
| .img-fluid |
响应式图片 |
| .float-right |
图片右对齐 |
| .float-left |
图片左对齐 |
【表格】
【表格标签】
| 标签 |
说明 |
| table |
定义一个表格 |
| thead |
表格表头 |
| tbody |
表格主体内容 |
| tr |
行 |
| th |
表头列 |
| td |
单元格 |
| caption |
表格标题 |
【table样式】
| 样式 |
说明 |
| .table |
基类，以下样式均应用于\<table... |
| .table-striped |
定义条纹表格,示例：\<table class=\"table table-striped\"> |
| .table-bordered |
定义带有边框的条件,示例: \<table class=\"table table-bordered\"> |
| .table-hover |
为表格的每一行添加鼠标悬停效果（灰色背景）,示例：\<table class=\"table table-hover\"> |
| .table-dark |
定义黑色背景的表格,示例：\<table class=\"table table-dark\"> |
| .table-responsive |
创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）,示例: \<table class=\"table table-responsive\"> |
| .table-responsive-{sm|md|lg|xl} |
定义在指定屏幕尺寸下响应式表格 |
| .table-lg |
较大的表格,示例：\<table class=\"table table-lg\"> |
| .table-sm |
较小的表格,示例：\<table class=\"table table-sm\"> |
【tr、thead样式】
| 样式 |
说明 |
| .table-primary |
指定tr或thead行的颜色，下同 |
| .table-success |
同上 |
| .table-info |
同上 |
| .table-danger |
同上 |
| .table-warning |
同上 |
| .table-active |
同上 |
| .table-secondary |
同上 |
| .table-light |
同上 |
| .table-dark |
同上 |