【网格系统】
| .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} | 在指定屏幕下的列偏移 |
【显示隐藏】
| .d-none | 在较小屏幕下隐藏 |
| .d-{sm | md | lg | xl}-none | 在指定屏幕大小下隐藏 |
| .d-block | 在较小屏幕下显示 |
| .d-{sm | md | lg | xl}-block | 在指定屏幕大小下显示 |
【常用背景颜色】
| .bg-primary | 重要的背景颜色 |
| .bg-success | 执行成功背景颜色 |
| .bg-info | 信息提示背景颜色 |
| .bg-warning | 警告背景颜色 |
| .bg-danger | 危险背景颜色 |
| .bg-secondary | 副标题背景颜色 |
| .bg-dark | 深灰背景颜色 |
| .bg-light | 浅灰背景颜色 |
【文字常用标签】
| <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 | 浅灰色文本（白色背景上看不清楚） |
| 【表格标签】 | |
| <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 | 同上 |
【图形】
| .rounded | 图片显示圆角效果 |
| .rounded-circle | 设置椭圆形图片 |
| .img-thumbnail | 设置图片缩略图(图片有边框) |
| .img-fluid | 响应式图片 |
| .float-right | 图片右对齐 |
| .float-left | 图片左对齐 |
【容器类】
| .container | 居中容器类，最大宽度默认为1200px。左右间隙15px |
| .container-fluid | 全屏容器类。 |
| .jumbotron | 创建一个大的灰色的圆角背景框 |
| .jumbotron-fluid | 创建全屏的没有圆角的背景框 |
【信息提示】
| .alert | 基类 |
| .alert-{success、info、warning、danger、primary、secondary、light、dark} | 各种类型的配色样式 |
| .fade、.show | 设置提示框在关闭时的淡出和淡入效果,要求二个同时调用，示例： <div class="alert alert-success fade show"> <button class="close" data-dismiss="alert">×</button> </div> |
| .alert-link | 提示框内带链接样式,示例: <div class="alert alert-success"> <a href="#" class="alert-link">这条信息</a> </div> |
| .alert-dismissible | 带关闭功能的提示，示例： <div class="alert alert-success alert-dismissible"> <button class="close" data-dismiss="alert">×</button> </div> |
| 按钮样式 | |
| .btn | 按钮基类 |
| .btn-{primary | secondary | success | info | warining | danger | dark | light | link } | 各种类型按钮样式 |
| .active | 按钮激活状态样式 |
| .disabled | 按钮禁用状态样式 |
| .btn-outline-{primary | secondary | success | info | warning | danger | dark | light } | 按钮边框样式 |
| 按钮大小 | |
| .btn-block | 块级按钮 |
| .btn-lg | 大号按钮 |
| .btn-sm | 小号按钮 |
| 按钮组 | |
| .btn-group | 水平按钮组 |
| .btn-group-vertical | 垂直按钮组 |
| 按钮组大小 | |
| .btn-group-lg | 大号按钮组 |
| .btn-group-sm | 小号按钮组 |
| 菜单触发样式 | |
| .dropdown-toggle | 下拉基类，定义一个触发下拉的元素。要和data-toggle="dropdown"属性结合使用 |
| .dropdown-toggle-split | 菜单分割线，作用未知 |
| 菜单列表样式 | |
| .dropdown-menu | 定义一个下拉菜单容器 |
| .dropdown-menu-right | 下拉菜单容器右对齐。默认是左对齐 |
| .dropdown-header | 下拉菜单标题 |
| .dropdown-item | 下拉菜单列表项目 |
| .dropdown-divider | 在下拉菜单中创建一个水平的分割线 |
| .active | 启用指定下拉菜单列表项目 |
| .disabled | 禁用指定下拉菜单列表项目 |
【徽章】
| .badge | 基类，默认样式为四角圆角6像素 |
| .badge-pill | 药丸形状徽章 |
| .bg-{primary | secondary | info | success | warning | danger | dark | light} | 定义背景色 |
| .text-white | 定义字体颜色 |
【进度条】
| .progress | 进度条容器类，用height来定义进度条的高度 |
| .progress-bar | 定义一个进度条，用width百分比值来定义进度条的长度 |
| .progress-bar-striped | 定义带条纹的进度条 |
| .progress-bar-animated | 动画显示进度条，必需和progress-bar-striped结合使用，不然看不到动画效果 |
| .bg-{primary、secondary、success、warning、danger、info、dark、light} | 定义进度条的颜色 |
【分页】
| .pagination | 定义分类容器类,一般使用ul来定义：<ul class="pagination"></ul> |
| .pagination-{lg|sm} | 定义页码大小 |
| .page-item | 页码容器类，一般使用li来定义：<li class="page-item">... |
| .page-link | 定义分页连接 |
| .active | 高亮显示该页码，深蓝色背景，白字 |
| .disabled | 禁用该页码，不可点击状态 |
【面包屑导航】类似当前位置导航，它会自动在每项后面加上 /
| .breadcrumb | 容器类 |
| .breadcrumb-item | 链接类 |
| .active | 当前项 |
【列表: ul/ol/dl】列表默认样式为垂直样式，一个项目占据一行。带灰色圆角边框。
| .list-group | 定义列表容器类 |
| .list-group-item | 定义列表项目类 |
| .active | [列表项目]激活状态下的列表项，蓝色背景，白色字 |
| .disabled | [列表项目]禁用状态下的列表项，白色背景，浅灰色字 |
| .list-group-item-action | [列表项目]鼠标移上去列表背景变成灰色 |
| .list-group-item-{primary、secondary、success、danger、warning、info、dark、light} | 定义列表项的背景色。注意使用bg-{...}不是理想的配色方案，不建议使用。 |
【卡片】卡片用于定义一块带圆角的区域。
| .card | 定义卡片容器 |
| .card-body | 卡片主体内容部份 |
| .card-header | 卡片头 |
| .card-footer | 卡片尾 |
| .card-title | 卡片标题 |
| .card-text | 卡片文本区域 |
| .card-link | 卡片链接 |
| .card-img-top | 卡片中图片位于文字顶部 |
| .card-img-bottom | 卡片中图片位于文字底部 |
| .card-img-overlay | 卡片中图片做为背景 |
| .bg-{primary、secondary、success、warning、danger、info、dark、light} | 定义卡片的背景色,定义在卡片容器上 |
【边框】
| .border | 含有边框 |
| .border-{primary | second | dark | light | warning | danger | success | info | white} | 边框的颜色 |
| .border-0 | 四条边都不含边框 |
| .border-{top | right | bottom | left }-0 | 指定哪一条边不含边框 |
【margin、padding】 分别采用m与p的简写方式
margin间距样式：
| .m-{0 | 1 | 2 | 3 | 4 | auto} | 定义四周间距 .m-0 等价于{margin:0 !important} .m-1 等价于{margin:0.25rem !important} .m-2 等价于{margin:0.5rem !important} .m-3 等价于{margin:1rem !important} .m-4 等价于{margin:1.5rem !important} .m-auto 等价于{margin:auto !important} |
| .mt-{0 | 1 | 2 | 3 | 4 | auto} | 表示margin-top设置 |
| .mr-{0 | 1 | 2 | 3 | 4 | auto} | 表示margin-right设置 |
| .mb-{0 | 1 | 2 | 3 | 4 | auto} | 表示margin-bottom设置 |
| .ml-{0 | 1 | 2 | 3 | 4 | auto} | 表示margin-left设置 |
| .mx-{0 | 1 | 2 | 3 | 4 | auto} | 表示margin-left与margin-right同时设置 |
| .my-{0 | 1 | 2 | 3 | 4 | auto} | 表示margin-top与margin-bottom同时设置 |
padding间距样式：
| .p-{0 | 1 | 2 | 3 | 4 | auto} | 定义四周间距 .p-0 等价于{padding:0 !important} .p-1 等价于{padding:0.25rem !important} .p-2 等价于{padding:0.5rem !important} .p-3 等价于{padding:1rem !important} .p-4 等价于{padding:1.5rem !important} .p-auto 等价于{padding!important} |
| .pt-{0 | 1 | 2 | 3 | 4 | auto} | 表示padding-top设置 |
| .pr-{0 | 1 | 2 | 3 | 4 | auto} | 表示padding-right设置 |
| .pb-{0 | 1 | 2 | 3 | 4 | auto} | 表示padding-bottom设置 |
| .pl-{0 | 1 | 2 | 3 | 4 | auto} | 表示padding-left设置 |
| .px-{0 | 1 | 2 | 3 | 4 | auto} | 表示padding-left与padding-right同时设置 |
| .py-{0 | 1 | 2 | 3 | 4 | auto} | 表示padding-top与padding-bottom同时设置 |
【折叠】可以很容易的实现内容的显示与隐藏。
| data-toggle="collapse" | 折叠触发对象必需属性 |
| data-target="#id" | href="#id" | 折叠触发对象必需属性 |
| .collapse | 折叠目标对象样式 |
| data-parent="#id" | 属性来实现父元素下，某一个折叠选项显示时其他选项就隐藏。 |
触发元素要设置以下属性：
data-toggle = "collapse"
data-target = "#id" 或者链接的href代替此属性 href="#id"
触发下拉元素代码示例：
<!-- 要折叠的容器ID：lists -->
<button data-toggle="collapse" data-target="#lists">折叠</button>
<!-- 或者 -->
<a data-toggle="collapse" href="#lists">折叠</a>
宽度百分比样式：
| .w-25 | 宽度25% |
| .w-50 | 宽度50% |
| .w-75 | 宽度75% |
| .w-100 | 宽度100% |
| .mw-100 | 最大宽度100% |
高度百分比样式：
| .h-25 | 高度25% |
| .h-50 | 高度50% |
| .h-75 | 高度75% |
| .h-100 | 高度100% |
| .mh-100 | 最大高度100% |
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
