Bootstrap入门十：辅助类

标签：

1.情境文本颜色

通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。

<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>

?

2.情境背景色

和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。

<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>

?

3.关闭按钮

通过使用一个象征关闭的图标，可以让模态框和警告框消失。

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

?

4.三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。

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

?

5.快速浮动

通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。这些类还可以作为 mixin（参见 less 文档） 使用。

<div class="pull-left">...</div>
<div class="pull-right">...</div>

不能用于导航条组件中
排列导航条中的组件时可以使用这些工具类：.navbar-left 或 .navbar-right 。 参见导航条文档以获取更多信息。

6.让内容块居中

为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用。

<div class="center-block">...</div>

7.清除浮动

通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用。

<!-- Usage as a class -->
<div class="clearfix">...</div>

8.显示或隐藏内容

**.show 和 .hidden **类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题，就像 quick floats 一样的做法。注意，这些类只对块级元素起作用，另外，还可以作为 mixin 使用。
.hide 类仍然可用，但是它不能对屏幕阅读器起作用，并且从 v3.0.1 版本开始就不建议使用了。请使用 .hidden 或 .sr-only 。
另外，.invisible 类可以被用来仅仅影响元素的可见性，也就是所，元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布。

<div class="show">...</div>
<div class="hidden">...</div>

9.屏幕阅读器和键盘导航

.sr-only 类可以对屏幕阅读器以外的设备隐藏内容。.sr-only 和 .sr-only-focusable 联合使用的话可以在元素有焦点的时候再次显示出来（例如，使用键盘导航的用户）。对于遵循 可访问性的最佳实践 很有必要。这个类也可以作为 mixin 使用。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

10.图片替换

使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。

<h1 class="text-hide">Custom heading</h1>

11.响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。
有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。

可用的类
通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

?

从 v3.2.0 版本起，形如 .visible-- 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：

?

因此，以超小屏幕（xs）为例，可用的 .visible-- 类是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。
.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了

相关的元素的特殊情况外，它们与 .visible-*-block 大体相同。

打印类
和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。

?

.visible-print 类也是存在的，但是从 v3.2.0 版本开始不建议使用。它与 .visible-print-block 类大致相同，除了

相关元素的特殊情况外。

测试用例
调整你的浏览器大小，或者用其他设备打开页面，都可以测试这些响应式工具类。

在...上可见
带有绿色标记的元素表示其在当前浏览器视口（viewport）中是可见的。

?

在...上隐藏
带有绿色标记的元素表示其在当前浏览器视口（viewport）中是隐藏的。

?

Bootstrap入门十：辅助类

标签：

原文地址：http://www.cnblogs.com/quickcodes/p/Bootstrap-ru-men-shi-fu-zhu-lei.html