<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

情境背景色

和情境文本顏色類一樣，使用任意情境背景色類就可以設置元素的背景。鏈接組件在鼠標經(jīng)過時顏色會加深，就像上面所講的情境文本顏色類一樣。

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

關閉按鈕

通過使用一個象征關閉的圖標，可以讓模態(tài)框和警告框消失。

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

三角符號

通過使用三角符號可以指示某個元素具有下拉菜單的功能。注意，向上彈出式菜單中的三角符號是反方向的。

<span class="caret"></span>

快速浮動

通過添加一個類，可以將任意元素向左或向右浮動。!important 被用來明確 CSS 樣式的優(yōu)先級。這些類還可以作為 mixin（參見 less 文檔）使用。

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

不能用于導航條組件中

排列導航條中的組件時可以使用這些工具類：.navbar-left 或 .navbar-right 。參見導航條文檔以獲取更多信息。

讓內容塊居中

為任意元素設置 display: block 屬性并通過`` margin 屬性讓其中的內容居中。下面列出的類還可以作為 mixin 使用。

<div class="center-block">...</div>

    // Class
    .center-block {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    // Usage as a mixin
    .element {
      .center-block();
    }

清除浮動

通過為父元素添加 .clearfix 類可以很容易地清除浮動（float）。這里所使用的是 Nicolas Gallagher 創(chuàng)造的 micro clearfix 方式。此類還可以作為 mixin 使用。

<!-- Usage as a class -->
<div class="clearfix">...</div>

    // Mixin itself
    .clearfix() {
      &:before,
      &:after {
        content: " ";
        display: table;
      }
      &:after {
        clear: both;
      }
    }

    // Usage as a mixin
    .element {
      .clearfix();
    }

顯示或隱藏內容

.show 和 .hidden 類可以強制任意元素顯示或隱藏(對于屏幕閱讀器也能起效)。這些類通過 !important 來避免 CSS 樣式優(yōu)先級問題，就像 quick floats 一樣的做法。注意，這些類只對塊級元素起作用，另外，還可以作為 mixin 使用。

.hide 類仍然可用，但是它不能對屏幕閱讀器起作用，并且從 v3.0.1 版本開始就不建議使用了。請使用 .hidden 或 .sr-only 。

另外，.invisible 類可以被用來僅僅影響元素的可見性，也就是所，元素的 display 屬性不被改變，并且這個元素仍然能夠影響文檔流的排布。

<div class="show">...</div>
<div class="hidden">...</div>

    // Classes
    .show {
      display: block !important;
    }
    .hidden {
      display: none !important;
      visibility: hidden !important;
    }
    .invisible {
      visibility: hidden;
    }

    // Usage as mixins
    .element {
      .show();
    }
    .another-element {
      .hidden();
    }

屏幕閱讀器和鍵盤導航

.sr-only 類可以對屏幕閱讀器以外的設備隱藏內容。.sr-only 和 .sr-only-focusable 聯(lián)合使用的話可以在元素有焦點的時候再次顯示出來（例如，使用鍵盤導航的用戶）。對于遵循可訪問性的最佳實踐很有必要。這個類也可以作為 mixin 使用。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

圖片替換

使用 .text-hide 類或對應的 mixin 可以用來將元素的文本內容替換為一張背景圖。

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

輔助類

情境文本顏色