Bootstrap 常用样式有哪些？

Bootstrap是前端开发中非常重要、经常使用的一个开发框架，对于这个框架，它有哪些样式呢？今天为大家分享的就是Bootstrap的一些常用样式，希望可以帮助大家更好的学习bootstrap。

　　.sr-only { clip: rect(0, 0, 0, 0); } ： .sr-only 这个类主要为了增强网站的无障碍性（可访问性）。假设在一个导航栏的 DOM 结构的主要内容之前，有很多超链接，可以使用 .sr-only 类在视觉上隐藏掉这些超链接。也就是说，为了保证视力障碍用户对网站的正常使用，通常需要在导航栏的主体内容之前，增加一些网页阅读器（朗读器）能够很好识别的内容和结构，以提高视力障碍者对网站结构的理解，而这些内容，恰恰是视力正常用户所不需要的，所以可以使用 .sr-only 类在视觉上隐藏掉这些内容，仅供网页阅读器（朗读器）正常辨别即可。语句 clip: rect(0, 0, 0, 0); 用于隐藏添加了 .sr-only 类的 label 标签。

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

　　white-space: nowrap; 语句：描述了如何处理空格（包括换行符、空格和制表符），详情见下图：

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

　　text-overflow: ellipsis; white-space: nowrap; ：组合起来意思就是：超出盒模型宽度的段落不换行，并以 ... 显示。

　　cursor: help; ：鼠标指针变成 帮助 图标。

　　 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); ：盒模型内阴影，向右偏移 0px，向上偏移 1px，阴影扩展 0px，背景色为不透明度 75% 的黑色。

　　word-break: break-all; ： word-break 属性主要用于设置拉丁字符（英文、拉丁文等）与非拉丁字符（也就是 CJK，Chinese、Japanese、Korean，中文、日文、韩文）之间的换行规则。 word-break 使得换行可以发生在任意两个字符之间；此选型更多地用于大篇幅非拉丁字符与少量拉丁字符组成的元素中，以便文字更好地分布。也就是说：如果元素内有大量英文，不建议使用这个选项，因为有很大几率会在一个英文单词的某两个字母中进行段落换行。这对于拉丁字符而言，是一个很糟糕的体验（因为拉丁字符的换行通常发生在音节、空格处）。

　　W3C 规范中关于 word-break 属性的解读： word-break-property

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

　　一般而言， word-break: break-all; 和 word-break: break-all; 会一起使用。

　　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 类。由此可见，CSS 伪元素或者伪类可以通过 连写的方式 来进行条件式选择/排除。

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

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

text-align: start; ：一个实验性质的语句。如果内容方向是从左至右，则等于text-align: left; ，反之则为 text-align: right; 。

文章来源：前端养成记