知识点
情境文本颜色
通过颜色来展示意图，如果文本是个链接鼠标移动到文本上会变暗。
类 | 描述
- | :-: | -:
.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">×</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();
}
其他
类 | 描述
- | :-: | -:
.sr-only | 除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable | 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.text-hide | 将页面元素所包含的文本内容替换为背景图
