前言
bootstrap 是一个开源的前端框架，主要应用于页面的布局。
官网介绍：
the world’s most popular framework for building responsive, mobile-first sites
同时，它也是移动优先的布局框架。
移动优先，指使用bootstrap开发的页面，不仅能用于web显示，还能用于移动端显示。
CSS布局常用篇
屏幕自适应
使用bootstrap中规范好的CSS样式，能使页面根据屏幕大小自适应，但必须要在head部分加入：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
内外边距
可以设置的属性：
m - 设置外边距 margin
p - 设置内边距 padding
可以设置的方向：
t - 设置上距 *-top
b - 设置下距 *-bottom
l - 设置左距 *-left
r - 设置右距 *-right
x - 设置x方向的*距，即左右边距 both *-left and *-right
y - 设置y方向 both *-top and *-bottom
(none) - 空则表示设置四个方向
可以设置的大小：
0 - 设置边距为0：for classes that eliminate the margin or padding by setting it to 0
1 - (by default) 设置 the margin or padding to spacer * .5
3 - (by default) 设置 the margin or padding to spacer * 1.5
5 - (by default) 设置 the margin or padding to $spacer * 3
auto - 设置自动的外边距* the margin to auto
示例：
mr-3 对应 margin-right: 3 3为不定值，随屏幕大小变化。
py-2 对应 padding-top:2;padding-bottom:2;
......
块级元素与行内元素的转换
d-inline-block 将块级元素转换为行内块级元素
栅栏布局
基础
见官网：栅栏布局
配合外边距
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
效果如下：
grid1.png
偏移
offset-*
<div class="row">
<div class="col-4">.col-md-4</div>
<div class="col-4 offset-4">.col-md-4 .offset-md-4</div>
</div>
规范子元素的flex
d-flex
水平布局
justify-content-*
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
作用于div子元素。
效果依次为：
flex1.png
垂直布局
align-items-*
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
同样作用于div子元素。
效果依次为：
flex2.png
充满
flex-fill
<div class="d-flex">
<div class="p-2 flex-fill">Flex item with a lot of content</div>
<div class="p-2 flex-fill">Flex item</div>
<div class="p-2 flex-fill">Flex item</div>
</div>
作用于当前元素，效果是充满父元素。
增长
flex-grow-*
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Third flex item</div>
</div>
Use .flex-grow-* utilities to toggle a flex item’s ability to grow to fill available space.
将当前元素尽可能地增长，效果如下：
flex3.png
缩短
flex-shrink-*
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">Flex item</div>
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>
Use .flex-shrink-* utilities to toggle a flex item’s ability to shrink if necessary.
将当前元素有必要地缩短，效果如下：
flex4.png
作用当前元素
当前元素水平布局
利用外边距可以实现：
<div class="ml-auto" style="width: 200px;">
Centered element
</div>
<div class="mr-auto" style="width: 200px;">
Centered element
</div>
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
ml-auto 表示 margin-left:auto，效果使得当前元素水平居右。
mx-auto 表示左右外边距都为 auto，效果是水平居中。
当前元素垂直布局
align-*
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
作用于当前元素，效果如下：
verticalAlign.png
CSS元素规范篇
规范字体
字体样式
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
效果如下：
字体样式.png
包裹字体
text-wrap
<div class="text-wrap" style="width: 6rem;">
This text should wrap.
</div>
字体会自动换行，适用于规定宽度的div中的字体。
不包裹字体则是 text-nowarp。
字体过长省略
text-truncate
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.
适用于块级元素中的字体。
字体水平位置
text-*
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
效果如下：
字体水平布局.png
规范列表
list-unstyled 列表无黑点
list-inline 行内列表
list-inline-item 行内列表中的一项
使用如下：
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
规范表格
见官网 表格
CSS组件篇
块引用
blockquote 设置为块引用
blockquote-footer 块引用的引脚
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
效果如下：
blockquote.png
网友评论