图片
响应式图片
.img-responsive 类可以让图片支持响应式布局
其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。
如果需要让使用了 .img-responsive 类的图片水平居中,请使用 .center-block 类,不要用 .text-center
<img src="..." class="img-responsive" alt="Responsive image">
图片形状
通过为 ![]() 元素添加以下相应的类,可以让图片呈现不同的形状
 元素添加以下相应的类,可以让图片呈现不同的形状
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
辅助类
情境文本颜色
<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>
情境背景色
<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>
关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
三角符号:提示具有下拉功能
<span class="caret"></span>
快速浮动
通过添加一个类,可以将任意元素向左或向右浮动。
!important 被用来明确 CSS 样式的优先级。这些类还可以作为 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)
<!-- 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 样式优先级问题,就像 quick floats 一样的做法。注意,这些类只对块级元素起作用,另外,还可以作为 mixin 使用。
.invisible 类可以被用来仅仅影响元素的可见性,也就是说,元素的 display 属性不被改变,并且这个元素仍然能够影响文档流的排布。
<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}
// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}
屏幕阅读器和键盘导航
.sr-only 类可以对屏幕阅读器以外的设备隐藏内容。
.sr-only 和 .sr-only-focusable 联合使用的话可以在元素有焦点的时候再次显示出来(例如,使用键盘导航的用户)。
<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();
}
响应式工具
可用的类
                手机 (<768px) 平板 (≥768px) 桌面 (≥992px) 桌面 (≥1200px)
.visible-xs-*	可见	隐藏	隐藏	隐藏
.visible-sm-*	隐藏	可见	隐藏	隐藏
.visible-md-*	隐藏	隐藏	可见	隐藏
.visible-lg-*	隐藏	隐藏	隐藏	可见
.hidden-xs	    隐藏	可见	可见	可见
.hidden-sm	    可见	隐藏	可见	可见
.hidden-md	    可见	可见	隐藏	可见
.hidden-lg	    可见	可见	可见	隐藏
.visible--类,针对每种屏幕都有三种变体,每个针对css不同的display属性
类组	                        CSS display
.visible-*-block	        display: block;
.visible-*-inline	        display: inline;
.visible-*-inline-block	    display: inline-block;
.visible-xs、.visible-sm、.visible-md 和 .visible-lg类也存在,但是不建议使用;
它们和.visible-*-block差不多
打印类
下面的类可以根据打印机,显示或者隐藏某些内容
class	                    浏览器	    打印机
.visible-print-block
.visible-print-inline
.visible-print-inline-block	隐藏	        可见
.hidden-print	            可见	        隐藏