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; 。
文章来源:前端养成记