bootstrap之辅助类

 

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

 下拉列表

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

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

 

posted @ 2015-07-02 14:37  坠落鱼  阅读(269)  评论(0)  编辑  收藏  举报