JSRUN 用代码说话

辅助类

编辑教程
上一节 ： 图片 下一节 ： 响应式实用工具

Bootstrap 辅助类

本章将讨论Bootstrap中的一些可能会派上用场的辅助类。

文字

如果文本是一个链接鼠标移动到文本上会变暗：

类 描述
.text-muted “ text-muted”类的文本样式
.text-primary “ text-primary”类的文本样式
.text成功 “ text-success”类的文本样式
.text-info “文本信息”类的文本样式
.text-warning “文本警告”类的文本样式
.text-danger “文本危险”类的文本样式

背景

如果文本是个链接鼠标移动到文本上会变暗：

类 描述
.bg-primary 表格单元格使用了“ bg-primary”类
.bg成功 表格单元格使用了“ bg-success”类
.bg-info 表格单元格使用了“ bg-info”类
.bg警告 表格单元格使用了“ bg-warning”类
.bg-危险 表格单元格使用了“ bg-danger”类

其他

类 描述
。向左拉 元素浮动到左边
.pull-right 元素浮动到右边
.center-block 设置元素为display：block并居中显示
.clearfix 清除浮动
。表演 强制元素显示
。隐 强制元素隐藏
仅.sr 除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable 与.sr-only类结合使用，在元素获取焦点时显示（如：键盘操作的用户）
。文字隐藏 将页面元素所包含的文本内容替换为背景图
。关 显示关闭按钮
。插入符号 显示下拉式功能

更多实例

关闭图标

使用通用的关闭图标来关闭模态框和警告框。使用类close得到关闭图标。

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 关闭图标</title>
   <link rel="stylesheet" 
   href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"
   rel="external nofollow" target="_blank"  rel="external nofollow" 
   target="_blank"  rel="external nofollow" target="_blank"  
   rel="external nofollow" target="_blank"  rel="external nofollow" 
   target="_blank"  rel="external nofollow" target="_blank"  
   rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  
   rel="external nofollow" ></script></head><body><p>关闭图标实例  
   <button type="button" class="close" aria-hidden="true">
      &times;   </button></p></body></html>

结果如下所示：

关闭图标

插入符

使用插入符号表示下拉功能和方向。使用带有class caret的元素得到该功能。

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 插入符</title>
   <link rel="stylesheet"
   href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" 
   rel="external nofollow" target="_blank"  rel="external nofollow" 
   target="_blank"  rel="external nofollow" target="_blank"  
   rel="external nofollow" target="_blank"  rel="external nofollow" 
   target="_blank"  rel="external nofollow" target="_blank" 
   rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow" ></script></head><body><p>插入符实例   
   <span class="caret"></span></p></body></html>

结果如下所示：

插入符

快速浮动

您可以分别使用class pull-left或pull-right来把元素向左或向右浮动。下面的实例演示了这点。

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 快速浮动</title>
   <link rel="stylesheet" 
   href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"
   rel="external nofollow" target="_blank"  rel="external nofollow"
   target="_blank"  rel="external nofollow" target="_blank" 
   rel="external nofollow" target="_blank"  rel="external nofollow"
   target="_blank"  rel="external nofollow" target="_blank" 
   rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow" ></script></head><body><div class="pull-left">
   向左快速浮动</div><div class="pull-right">
   向右快速浮动</div></body></html>

结果如下所示：

快速浮动

要对齐导航导航的组件，请使用.navbar-left或.navbar-right代替。请查看Bootstrap导航栏。

内容居中

使用class center-block来居中元素。

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 居中内容块</title>
   <link rel="stylesheet"
   href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" 
   rel="external nofollow" target="_blank"  rel="external nofollow"
   target="_blank"  rel="external nofollow" target="_blank"  
   rel="external nofollow" target="_blank"  rel="external nofollow"
   target="_blank"  rel="external nofollow" target="_blank" 
   rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  
   rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  
   rel="external nofollow" ></script></head><body><div class="row">
   <div class="center-block" style="width:200px;background-color:#ccc;">
      这是 center-block 实例   </div></div></body></html>

结果如下所示：

居中内容块

清除浮动

要清除元素的浮动，请使用.clearfix类。

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 清除浮动</title>
   <link rel="stylesheet" 
   href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"
   rel="external nofollow" target="_blank"  rel="external nofollow" 
   target="_blank"  rel="external nofollow" target="_blank"  
   rel="external nofollow" target="_blank"  rel="external nofollow"
   target="_blank"  rel="external nofollow" target="_blank" 
   rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow" ></script></head><body><div class="clearfix" 
   style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
   <div class="pull-left" style="background:#58D3F7;">
      向左快速浮动   </div>
   <div class="pull-right" style="background: #DA81F5;">
      向右快速浮动   </div></div></body></html>

结果如下所示：

清除浮动

显示和隐藏内容

您可以通过使用类.show和.hidden来强行设置元素显示或隐藏（包括屏幕阅读器）。

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 显示和隐藏内容</title>
   <link rel="stylesheet" 
   href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"
   rel="external nofollow" target="_blank"  rel="external nofollow"
   target="_blank"  rel="external nofollow" target="_blank" 
   rel="external nofollow" target="_blank"  rel="external nofollow" 
   target="_blank"  rel="external nofollow" target="_blank" 
   rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow" ></script></head><body><div class="row"
   style="padding: 91px 100px 19px 50px;">
   <div class="show" style="left-margin:10px;width:300px;background-color:#ccc;">

      这是 show class 的实例   </div>
   <div class="hidden" style="width:200px;background-color:#ccc;">
      这是 hide class 的实例   </div></div></body></html>

结果如下所示：

显示和隐藏内容

屏幕阅读器

您可以通过使用class .sr-only来把元素对所有设备隐藏，除了屏幕阅读器。

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 屏幕阅读器</title>
   <link rel="stylesheet" 
   href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" 
   rel="external nofollow" target="_blank"  rel="external nofollow"
   target="_blank"  rel="external nofollow" target="_blank" 
   rel="external nofollow" target="_blank"  rel="external nofollow"
   target="_blank"  rel="external nofollow" target="_blank" 
   rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
   rel="external nofollow" ></script></head><body><div class="row" 
   style="padding: 91px 100px 19px 50px;">
   <form class="form-inline" role="form">
   <div class="form-group">
      <label class="sr-only" for="email">Email 地址</label>
      <input type="email" class="form-control" placeholder="Enter email">
   </div>
   <div class="form-group">
      <label class="sr-only" for="pass">密码</label>
      <input type="password" class="form-control" placeholder="Password">
   </div>
   </form></div></body></html>

结果如下所示：

屏幕阅读器

在这里，我们看到两个输入类型的label标签都带有class sr-only，因此标签将只对屏幕阅读器可见。

上一节 ： 图片 下一节 ： 响应式实用工具
Mos固件，小电视必刷固件 ES6 教程 Vue.js 教程 JSON 教程 jQuery 教程 HTML 教程 HTML 5 教程 CSS 教程 CSS3 教程 JavaScript 教程 DHTML 教程 JSON在线格式化工具 JS在线运行 JSON解析格式化 jsfiddle中国国内版本 JS代码在线运行 PHP代码在线运行 Java代码在线运行 C语言代码在线运行 C++代码在线运行 Python代码在线运行 Go语言代码在线运行 C#代码在线运行
JSRUN闪电教程系统是国内最先开创的教程维护系统， 所有工程师都可以参与共同维护的闪电教程，让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编，让零散的知识点帮助更多的人。
X
支付宝
￥ 9.99
无法付款，请点击这里
金额： 0 元
备注：
转账时请填写正确的金额和备注信息，到账由人工处理，可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码， 此过程可能需要15秒钟