文章标题

bootstrap源码解读：

使用 CSS 预处理语言 LESS 编写，使用 Grunt 构建，生成的bootstrap.css文件从上到下分为三个部分的代码：

1.参考 Normalize.css 的代码；

2.参考 HTML5 Boilerplate 的代码；

3.Bootstrap v3 自身的代码。

Normalize.css 样式:

text-size-adjust:100%;//使得没有针对移动小屏幕设备进行页面（宽度）优化的网站的字体，得以在小屏幕上进行缩放（一般为放大），并且不会出现横向滚动条

vertical-align:baseline;//定义行内元素或者table cell的垂直对齐方式
vertical-align:middle;//放置在父元素中部

audio:not([controls])//选择不带controls属性的audio元素

svg:not(:root)//选择HTML页面的svg元素。使用:not(:root)排除非根元素的svg（因为svg可以在别的文档内部作为根元素）。

box-sizing:content-box;//使用 content-box 作为盒模型尺寸，也就是在写一个盒模型大小时，border和padding不包含在contant盒模型大小内。实际宽度：width + padding + border == > content = width;
box-sizing:border-box;//content = width + padding + border;

appearance:button;//将元素的表现形式设置为 button 的样式（自带一些按钮的状态）。

button:-moz-focus-inner{padding:0px;border:0px} //针对firefox移除掉Firefox按钮focus状态下的按钮边框和内间距

::-webkit-inner-spin-button
::-webkit-outter-spin-button：//伪元素，一般配合数字输入框表单元素使用，用于设置数字增减的按钮的样式。

HTML5 Boilerplate 样式：

a[href]:after{content:"("attr(href)")";}//在 a 标签的链接后插入 href 属性中的 URL。

p, h2, h3 { orphans: 3; widows: 3; }//widows 和 orphans 就是分别用来设置打印页前后可以显示的块级文字段落的行数的

page-break-after: avoid;//禁止在当前元素后立即换页，也就是当前元素后面一定得跟着一点内容。

Bootstrap 样式:

.sr-only { clip: rect(0, 0, 0, 0); }//.sr-only主要是为了增强网站的无障碍性（可访问性）;clip: rect(0, 0, 0, 0); 用于隐藏添加了 .sr-only 类的 label 标签

.sr-only-focusable 类：//确保一旦超链接被 :focus 或者 :active 了，也就是超链接被激活了，就会在视觉上可见。用于照顾使用键盘进行网页导航的用户，也是增强网站的无障碍性（可访问性）的手段之一。

white-space: nowrap;//浏览器会忽略空格 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
white-space:normal;//浏览器会忽略空格（包括换行符、空格和制表符）文本换行

border-collapse:collapse;//为表格设置合并边框。

text-overflow:ellipsis; //以...显示
white-space:nowrap; //超出盒模型宽度的段落不换行，并以 ... 显示。

cursor: help;//鼠标指针变成帮助图标
cursor:pointer;//鼠标变成手的样子

box-shadow:inset 0px 0px 10px 10px #000000;//盒模型内阴影，向右偏移 0px，向上偏移 0px，阴影扩展 10px，阴影大小10px 背景色为黑色。

word-break: break-all;//用于设置拉丁字符（英文、拉丁文等）与非拉丁字符（也就是 CJK，Chinese、Japanese、Korean，中文、日文、韩文）之间的换行规则。word-break 使得换行可以发生在任意两个字符之间；此选型更多地用于大篇幅非拉丁字符与少量拉丁字符组成的元素中，以便文字更好地分布

word-wrap: break-word || overflow-wrap;//当一长串不可换行/断句的字符串由于太长，不能放入一个给定宽度的容器内时，用户代理（浏览器）是否可以在一个单词的内部进行断句以避免产生字符溢出。只有 white-space 设置为允许 wrapping 时，word-wrap 才会生效。

touch-action: manipulation;//touch-action 用于指定某个给定的区域是否允许用户操作，以及如何响应用户操作（比如划动、缩放等）。manipulation：浏览器只允许进行滚动和持续缩放操作，任何其它被auto值支持的行为不被支持。

background-clip: padding-box;//background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框下面。padding-box：边框下面没有背景，即背景延伸到内边距外沿。

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) //选择的是 .btn-group 的直接 .btn 子类,不是.btn-group 下的第一个 .btn，也不能是最后一个 .btn，同时不带有 .dropdown-toggle 类

table-layout: fixed;//table-layout 属性定义了表格布局算法，用于对表格中单元格、行和列进行布局。fixed 选型定义了：表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。

:empty //伪类选择器:匹配没有任何子元素（包括 text 节点）的元素

text-align: start;//内容方向是从左至右，则等于 text-align: left;，反之则为 text-align: right;。