知識點

情境文本顏色
通過顏色來展示意圖，如果文本是個鏈接鼠標(biāo)移動到文本上會變暗。

類 | 描述

• | :-: | -:
  .text-muted | color: #777;
  .text-primary | color: #337ab7;
  .text-success | color: #3c763d;
  .text-info | color: #31708f;
  .text-warning | color: #8a6d3b;
  .text-danger | color: #a94442;

情境背景色
如果文本是個鏈接鼠標(biāo)移動到文本上會變暗。

類 | 描述

• | :-: | -:
  .bg-primary | color: #fff;background-color: #337ab7;
  .bg-success | background-color: #3c763d;
  .bg-info | background-color: #31708f;
  .bg-warning | background-color: #8a6d3b;
  .bg-danger | background-color: #a94442;

關(guān)閉按鈕

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

三角符號

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

快速浮動
這里的浮動類名不能用于導(dǎo)航浮動，排列導(dǎo)航條中的組件時可以使用這些工具類：.navbar-left 或 .navbar-right 。

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

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

讓內(nèi)容塊居中
.center-block

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

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

清除浮動
.clearfix

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

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

顯示或隱藏內(nèi)容
.show
.hidden,.sr-only
.invisible類可以被用來僅僅影響元素的可見性，元素的 display 屬性不被改變，并且這個元素仍然能夠影響文檔流的排布。
.show，.hidden通過 !important 來避免 CSS 樣式優(yōu)先級問題，注意這些類只對塊級元素起作用。

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

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

其他

類 | 描述

• | :-: | -:
  .sr-only | 除了屏幕閱讀器外，其他設(shè)備上隱藏元素
  .sr-only-focusable | 與 .sr-only 類結(jié)合使用，在元素獲取焦點時顯示(如：鍵盤操作的用戶)
  .text-hide | 將頁面元素所包含的文本內(nèi)容替換為背景圖