Bootstrap基础学习笔记

.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-{sm | md | lg | xl}-none

在指定屏幕大小下隐藏

.d-block

在较小屏幕下显示

.d-{sm | md | lg | xl}-block

在指定屏幕大小下显示

.bg-success

执行成功背景颜色

.bg-info

信息提示背景颜色

.bg-warning

警告背景颜色

.bg-danger

危险背景颜色

.bg-secondary

副标题背景颜色

.bg-dark

深灰背景颜色

.bg-light

浅灰背景颜色

<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>

内联样式，黑色圆角边框，白字样式。

.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-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-circle

设置椭圆形图片

.img-thumbnail

设置图片缩略图(图片有边框)

.img-fluid

响应式图片

.float-right

图片右对齐

.float-left

图片左对齐

.container-fluid

全屏容器类。

.jumbotron

创建一个大的灰色的圆角背景框

.jumbotron-fluid

创建全屏的没有圆角的背景框

.alert-{success、info、warning、danger、primary、secondary、light、dark}

各种类型的配色样式

.fade、.show

设置提示框在关闭时的淡出和淡入效果,要求二个同时调用，示例： <div class="alert alert-success fade show"> <button class="close" data-dismiss="alert">&times;</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">&times;</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-pill

药丸形状徽章

.bg-{primary | secondary | info | success | warning | danger | dark | light}

定义背景色

.text-white

定义字体颜色

.progress-bar

定义一个进度条，用width百分比值来定义进度条的长度

.progress-bar-striped

定义带条纹的进度条

.progress-bar-animated

动画显示进度条，必需和progress-bar-striped结合使用，不然看不到动画效果

.bg-{primary、secondary、success、warning、danger、info、dark、light}

定义进度条的颜色

.pagination-{lg|sm}

定义页码大小

.page-item

页码容器类，一般使用li来定义：<li class="page-item">...

.page-link

定义分页连接

.active

高亮显示该页码，深蓝色背景，白字

.disabled

禁用该页码，不可点击状态

.breadcrumb-item

链接类

.active

当前项

.list-group-item

定义列表项目类

.active

[列表项目]激活状态下的列表项，蓝色背景，白色字

.disabled

[列表项目]禁用状态下的列表项，白色背景，浅灰色字

.list-group-item-action

[列表项目]鼠标移上去列表背景变成灰色

.list-group-item-{primary、secondary、success、danger、warning、info、dark、light}

定义列表项的背景色。注意使用bg-{...}不是理想的配色方案，不建议使用。

.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-{primary | second | dark | light | warning | danger | success | info | white}

边框的颜色

.border-0

四条边都不含边框

.border-{top | right | bottom | left }-0

指定哪一条边不含边框

.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同时设置

.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-target="#id" | href="#id"

折叠触发对象必需属性

.collapse

折叠目标对象样式

data-parent="#id"

属性来实现父元素下，某一个折叠选项显示时其他选项就隐藏。

.w-50

宽度50%

.w-75

宽度75%

.w-100

宽度100%

.mw-100

最大宽度100%

.h-50

高度50%

.h-75

高度75%

.h-100

高度100%

.mh-100

最大高度100%