知识点

情境文本颜色
通过颜色来展示意图，如果文本是个链接鼠标移动到文本上会变暗。

类 | 描述

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

情境背景色
如果文本是个链接鼠标移动到文本上会变暗。

类 | 描述

| :-: | -:
.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;

关闭按钮

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

三角符号

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

快速浮动
这里的浮动类名不能用于导航浮动，排列导航条中的组件时可以使用这些工具类：.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();
}

让内容块居中
.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();
}

显示或隐藏内容
.show
.hidden,.sr-only
.invisible类可以被用来仅仅影响元素的可见性，元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布。
.show，.hidden通过 !important 来避免 CSS 样式优先级问题，注意这些类只对块级元素起作用。

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

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

其他

类 | 描述