类 描述 .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>