辅助类

文本

不同的类展示了不同的文本颜色。如果文本是链接鼠标移动到文本上会变暗：

• .text-muted
• .text-primary
• .text-success
• .text-info
• .text-warning
• .text-danger

<div class="container">
    <h2>文本</h2>
    <p class="text-muted">该段落使用了样式 "text-muted"。</p>            
    <a class="text-muted" href="http://www.w3cschool.cc">链接使用了样式 "text-muted"。</a> 

        <p class="text-primary">该段落使用了样式 "text-primary"。</p>            
    <a class="text-primary" href="http://www.w3cschool.cc">链接使用了样式 "text-primary"。</a>

        <p class="text-success">该段落使用了样式 "text-success"。</p>            
        <a class="text-success" href="http://www.w3cschool.cc">链接使用了样式 "text-success"。</a>

        <p class="text-info">该段落使用了样式 "text-info"。</p>            
    <a class="text-info" href="http://www.w3cschool.cc">链接使用了样式 "text-info"。</a>

        <p class="text-warning">该段落使用了样式 "text-warning"。</p>            
    <a class="text-warning" href="http://www.w3cschool.cc">链接使用了样式 "text-warning"。</a>

        <p class="text-danger">该段落使用了样式 "text-danger"。</p>            
    <a class="text-danger" href="http://www.w3cschool.cc">链接使用了样式 "text-danger"。</a> 
</div>

背景

不同的类展示了不同的背景颜色。如果文本是个链接鼠标移动到文本上回变暗：

• .bg-primary
• .bg-success
• .bg-info
• .bg-warning
• .bg-danger

<div class="container">
    <h2>背景</h2>
    <p class="bg-primary">该段落使用了类 "bg-primary"。</p>
    <a class="bg-primary" href="/index.php">该链接使用了类 "bg-primary"。</a>

        <p class="bg-success">该段落使用了类 "bg-success"。</p>
    <a class="bg-success" href="/index.php">该链接使用了类 "bg-success"。</a>

        <p class="bg-info">该段落使用了类 "bg-info"。</p>
    <a class="bg-info" href="/index.php">该链接使用了类 "bg-info"。</a>

        <p class="bg-warning">该段落使用了类 "bg-warning"。</p>
    <a class="bg-warning" href="/index.php">该链接使用了类 "bg-warning"。</a>

        <p class="bg-danger">该段落使用了类 "bg-danger"。</p>
    <a class="bg-danger" href="/index.php">该链接使用了类 "bg-danger"。</a>
</div>

其他

<div class="container">
    <h2>实例</h2>
    <div class="pull-left">元素浮动到左侧</div>
    <div class="pull-right">元素浮动到右侧</div>

        <div class="center-block" style="width:150px;background-color:#ccc;">该 div 显示在中间</div>
</div>


<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-xs-6 col-sm-3" style="background-color:lavender;">
      列 1<br>
      重置窗口大小，查看效果。也尝试删除有 clearfix  的 div 查看效果。
    </div>
    <div class="col-xs-6 col-sm-3" style="background-color:lavenderblush;">列 2</div>
    <!-- Add clearfix for only the required viewport -->
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-3" style="background-color:lightcyan;">列 3</div>
    <div class="col-xs-6 col-sm-3" style="background-color:lightgray;">列 4</div>
  </div>
</div>

<div class="container">
    <h2>实例</h2>
    <p> .show 类强制一个元素显示:</p>
    <p class="show">该段落强制显示</p>
    <p> .hidden 类强制一个元素隐藏 :</p>
    <p class="hidden">该段落强制隐藏</p>      
</div>

<div class="container">
    <h2>实例</h2>
    <p> .sr-only 类除了屏幕阅读器外，其他设备上都隐藏元素:</p>
    <a class="sr-only" href="#">跳转到主要内容</a>
    <p>与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户):</p>
    <a class="sr-only sr-only-focusable" href="#">跳转到主要内容</a>
</div>

<div class="container">
    <h2>实例</h2>
    <p> .text-hide 类将页面元素所包含的文本内容替换为背景图:</p>
    <div class="text-hide">在 div 元素中插入一些文本。</div>
</div>

<div class="container">
    <h2>实例</h2>
    <p> .close 类可以显示一个关闭按钮。</p>
    <button type="button" class="close"><span aria-hidden="true">x</span><span class="sr-only">关闭</span></button>
</div>

<div class="container">
    <h2>实例</h2>
    <p> .caret 类显示了一个下拉的功能: <span class="caret"></span></p>
    <p> .caret 类在按钮中使用：</p>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">一个链接</a></li>
            <li><a href="#">另一个链接 link</a></li>
            <li><a href="#">其他功能</a></li>
        </ul>
    </div>        
</div>

更多实例

关闭图标

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

<p>关闭图标实例
  <button type="button" class="close" aria-hidden="true">
    ×
  </button>
</p>

插入符

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

<p>插入符实例<span class="caret"></span></p>

快速浮动

可以分别使用class pull-left或pull-right来把元素向左或向右浮动。

<div class="pull-left">
  向左快速浮动
</div>
<div class="pull-right">
  向右快速浮动
</div>

内容居中

使用class center-block来居中元素

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

清除浮动

如需清除元素的浮动，请使用.clearfix class。

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

显示和隐藏内容

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

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

屏幕阅读器

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

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

打赏

微信扫一扫，打赏作者吧～