Bootstrap 辅助类

知识点

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

类 | 描述

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

关闭按钮

×

三角符号

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

其他

类 | 描述

• | :-: | -:
  .sr-only | 除了屏幕阅读器外，其他设备上隐藏元素
  .sr-only-focusable | 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
  .text-hide | 将页面元素所包含的文本内容替换为背景图