Bootstrap是前端開發(fā)中非常重要、經(jīng)常使用的一個(gè)開發(fā)框架，對于這個(gè)框架，它有哪些樣式呢？今天為大家分享的就是Bootstrap的一些常用樣式，希望可以幫助大家更好的學(xué)習(xí)bootstrap。

　　.sr-only { clip: rect(0, 0, 0, 0); } ： .sr-only 這個(gè)類主要為了增強(qiáng)網(wǎng)站的無障礙性（可訪問性）。假設(shè)在一個(gè)導(dǎo)航欄的 DOM 結(jié)構(gòu)的主要內(nèi)容之前，有很多超鏈接，可以使用 .sr-only 類在視覺上隱藏掉這些超鏈接。也就是說，為了保證視力障礙用戶對網(wǎng)站的正常使用，通常需要在導(dǎo)航欄的主體內(nèi)容之前，增加一些網(wǎng)頁閱讀器（朗讀器）能夠很好識(shí)別的內(nèi)容和結(jié)構(gòu)，以提高視力障礙者對網(wǎng)站結(jié)構(gòu)的理解，而這些內(nèi)容，恰恰是視力正常用戶所不需要的，所以可以使用 .sr-only 類在視覺上隱藏掉這些內(nèi)容，僅供網(wǎng)頁閱讀器（朗讀器）正常辨別即可。語句 clip: rect(0, 0, 0, 0); 用于隱藏添加了 .sr-only 類的 label 標(biāo)簽。

.sr-only-focusable 類：確保一旦超鏈接被 :focus 或者 :active 了，也就是超鏈接被激活了，就會(huì)在視覺上可見。用于照顧使用鍵盤進(jìn)行網(wǎng)頁導(dǎo)航的用戶，也是增強(qiáng)網(wǎng)站的無障礙性（可訪問性）的手段之一。

　　white-space: nowrap; 語句：描述了如何處理空格（包括換行符、空格和制表符），詳情見下圖：

border-collapse: collapse; ：為表格設(shè)置合并邊框。

　　text-overflow: ellipsis; white-space: nowrap; ：組合起來意思就是：超出盒模型寬度的段落不換行，并以 ... 顯示。

　　cursor: help; ：鼠標(biāo)指針變成 幫助 圖標(biāo)。

　　 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); ：盒模型內(nèi)陰影，向右偏移 0px，向上偏移 1px，陰影擴(kuò)展 0px，背景色為不透明度 75% 的黑色。

　　word-break: break-all; ： word-break 屬性主要用于設(shè)置拉丁字符（英文、拉丁文等）與非拉丁字符（也就是 CJK，Chinese、Japanese、Korean，中文、日文、韓文）之間的換行規(guī)則。 word-break 使得換行可以發(fā)生在任意兩個(gè)字符之間；此選型更多地用于大篇幅非拉丁字符與少量拉丁字符組成的元素中，以便文字更好地分布。也就是說：如果元素內(nèi)有大量英文，不建議使用這個(gè)選項(xiàng)，因?yàn)橛泻艽髱茁蕰?huì)在一個(gè)英文單詞的某兩個(gè)字母中進(jìn)行段落換行。這對于拉丁字符而言，是一個(gè)很糟糕的體驗(yàn)（因?yàn)槔∽址膿Q行通常發(fā)生在音節(jié)、空格處）。

　　W3C 規(guī)范中關(guān)于 word-break 屬性的解讀： word-break-property

　　word-wrap: break-word; ： word-wrap 是舊標(biāo)準(zhǔn)的遺留產(chǎn)物，新標(biāo)準(zhǔn)中的屬性叫overflow-wrap 。 word-wrap 屬性用于規(guī)定當(dāng)一長串不可換行/斷句的字符串由于太長，不能放入一個(gè)給定寬度的容器內(nèi)時(shí)，用戶代理（瀏覽器）是否可以在一個(gè)單詞的內(nèi)部進(jìn)行斷句以避免產(chǎn)生字符溢出。只有 white-space 設(shè)置為允許 wrapping 時(shí)， word-wrap 才會(huì)生效。

　　一般而言， word-break: break-all; 和 word-break: break-all; 會(huì)一起使用。

　　touch-action: manipulation; ： touch-action 用于指定某個(gè)給定的區(qū)域是否允許用戶操作，以及如何響應(yīng)用戶操作（比如劃動(dòng)、縮放等）。 manipulation ：瀏覽器只允許進(jìn)行滾動(dòng)和持續(xù)縮放操作，任何其它被auto值支持的行為不被支持。

　　background-clip: padding-box; ： background-clip 設(shè)置元素的背景（背景圖片或顏色）是否延伸到邊框下面。 padding-box ：邊框下面沒有背景，即背景延伸到內(nèi)邊距外沿。

　　.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) 選擇器：選擇的是 .btn-group 的直接 .btn 子類，它不能是 .btn-group 下的第一個(gè) .btn ，也不能是最后一個(gè) .btn ，同時(shí)不帶有 .dropdown-toggle 類。由此可見，CSS 偽元素或者偽類可以通過 連寫的方式 來進(jìn)行條件式選擇/排除。

　　table-layout: fixed; ： table-layout 屬性定義了表格布局算法，用于對表格中單元格、行和列進(jìn)行布局。 fixed 選型定義了：表格和列的寬度通過表格的寬度來設(shè)置，某一列的寬度僅由該列首行的單元格決定。在當(dāng)前列中，該單元格所在行之后的行并不會(huì)影響整個(gè)列寬。

　　:empty 偽類選擇器：匹配沒有任何子元素（包括 text 節(jié)點(diǎn)）的元素。

text-align: start; ：一個(gè)實(shí)驗(yàn)性質(zhì)的語句。如果內(nèi)容方向是從左至右，則等于text-align: left; ，反之則為 text-align: right; 。

文章來源：前端養(yǎng)成記