Bootstrap 辅助类

Bootstrap辅助类本章将讨论Bootstrap中的一些可能会派上用场的辅助类。文本以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗：类描述实例.text-muted"text-muted"类的文本样式尝试一下.text-primary"text-primary"类的文本样式尝试一下.text-success"text-success"类的文本样式尝试一下.text-info"text-info"类的文本样式尝试一下.text-warning"text-warning"类的文本样式尝试一下.text-danger"text-danger"类的文本样式尝试一下背景以下不同的类展示了不同的背景颜色。如果文本是个链接鼠标移动到文本上会变暗：类描述实例.bg-primary表格单元格使用了"bg-primary"类尝试一下.bg-success表格单元格使用了"bg-success"类尝试一下.bg-info表格单元格使用了"bg-info"类尝试一下.bg-warning表格单元格使用了"bg-warning"类尝试一下.bg-danger表格单元格使用了"bg-danger"类尝试一下其他类描述实例.pull-left元素浮动到左边尝试一下.pull-right元素浮动到右边尝试一下.center-block设置元素为display:block并居中显示尝试一下.clearfix清除浮动尝试一下.show强制元素显示尝试一下.hidden强制元素隐藏尝试一下.sr-only除了屏幕阅读器外，其他设备上隐藏元素尝试一下.sr-only-focusable与.sr-only类结合使用，在元素获取焦点时显示(如：键盘操作的用户)尝试一下.text-hide将页面元素所包含的文本内容替换为背景图尝试一下.close显示关闭按钮尝试一下.caret显示下拉式功能尝试一下更多实例关闭图标使用通用的关闭图标来关闭模态框和警告框。使用classclose得到关闭图标。实例<p>关闭图标实例<buttontype="button"class="close"aria-hidden="true">×</button></p>尝试一下?结果如下所示：aria-hidden="true"主要是帮助残障人士（如失明）使用识读设备（自动读取内容并自动播放出来），播放到带此属性的内容时会自动跳过，以免残障人士混淆！插入符使用插入符表示下拉功能和方向。使用带有classcaret的<span>元素得到该功能。实例<p>插入符实例<spanclass="caret"></span></p>尝试一下?结果如下所示：快速浮动您可以分别使用classpull-left或pull-right来把元素向左或向右浮动。下面的实例演示了这点。实例<divclass="pull-left">向左快速浮动</div><divclass="pull-right">向右快速浮动</div>尝试一下?结果如下所示：如需对齐导航栏中的组件，请使用.navbar-left或.navbar-right代替。请查看Bootstrap导航栏。内容居中使用classcenter-block来居中元素。实例<divclass="row"><divclass="center-block"style="width:200px;background-color:#ccc;">这是center-block实例</div></div>尝试一下?结果如下所示：清除浮动如需清除元素的浮动，请使用.clearfixclass。实例<divclass="clearfix"style="background:#D8D8D8;border:1pxsolid#000;padding:10px;"><divclass="pull-left"style="background:#58D3F7;">向左快速浮动</div><divclass="pull-right"style="background:#DA81F5;">向右快速浮动</div></div>尝试一下?结果如下所示：显示和隐藏内容您可以通过使用class.show和.hidden来强行设置元素显示或隐藏（包括屏幕阅读器）。实例<divclass="row"style="padding:91px100px19px50px;"><divclass="show"style="margin-left:10px;width:300px;background-color:#ccc;">这是showclass的实例</div><divclass="hidden"style="width:200px;background-color:#ccc;">这是hideclass的实例</div></div>尝试一下?结果如下所示：屏幕阅读器您可以通过使用class.sr-only来把元素对所有设备隐藏，除了屏幕阅读器。实例<divclass="row"style="padding:91px100px19px50px;"><formclass="form-inline"role="form"><divclass="form-group"><labelclass="sr-only"for="email">Email地址</label><inputtype="email"class="form-control"placeholder="Enteremail"></div><divclass="form-group"><labelclass="sr-only"for="pass">密码</label><inputtype="password"class="form-control"placeholder="Password"></div></form></div>尝试一下?结果如下所示：在这里，我们看到两个input类型的label标签都带有classsr-only，因此标签将只对屏幕阅读器可见。