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 显现下拉式功用 测验一下

更多实例

封闭图标

运用通用的封闭图标来封闭模态框和正告框。运用 class close 得到封闭图标。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 封闭图标</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<p>封闭图标实例
   <button type="button" class="close" aria-hidden="true">
      &times;
   </button>
</p>

</body>
</html>

成果如下所示:

封闭图标

刺进符

运用刺进符表明下拉功用和方向。运用带有 class caret 的 <span> 元素得到该功用。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 刺进符</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<p>刺进符实例
   <span class="caret"></span>
</p>

</body>
</html>

成果如下所示:

刺进符

快速起浮

您能够别离运用 class pull-leftpull-right 来把元素向左或向右起浮。下面的实例演示了这点。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 快速起浮</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></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="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row">
   <div class="center-block" style="width:200px;background-color:#ccc;">
      这是 center-block 实例
   </div>
</div>

</body>
</html>

成果如下所示:

居中内容块

铲除起浮

如需铲除元素的起浮,请运用 .clearfix class。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 铲除起浮</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></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>

成果如下所示:

铲除起浮

显现和躲藏内容

您能够经过运用 class .show.hidden 来强行设置元素显现或躲藏(包含屏幕阅读器)。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 显现和躲藏内容</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></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="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></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>

成果如下所示:

屏幕阅读器

在这里,咱们看到两个 input 类型的 label 标签都带有 class sr-only,因而标签将只对屏幕阅读器可见。