类 	                    描述

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

bootstrap之辅助类的更多相关文章

  1. Bootstrap内辅助类，响应式工具，组件的个人总结

    辅助类(工具类): 文本颜色: <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, torto ...

  2. bootstrap -- css -- 辅助类

    文本 文本颜色 如果文本是个链接,则鼠标移动到链接文本上的时候,文本会变暗 .text-muted:灰色 .text-primary:浅蓝色 .text-success:绿色 .text-info:深 ...

  3. Tomcat8源码笔记(二)Bootstrap启动

    TOMCAT源码调试入口是Bootstrap类的main方法,我的启动参数VM: -Dcatalina.home=E:/Tomcat_Source_Code/apache-tomcat-8.0.53- ...

  4. 【Netty】Netty简介及服务器客户端简单开发流程

    什么是Netty Netty是一个基于Java NIO的编写客服端服务器的框架,是一个异步事件框架. 官网https://netty.io/ 为什么选择Netty 由于JAVA NIO编写服务器的过程 ...

  5. Bootstrap<基础九>辅助类

    Bootstrap 中的一些可能会派上用场的辅助类. 文本 以下不同的类展示了不同的文本颜色.如果文本是个链接鼠标移动到文本上会变暗: 类 描述   .text-muted "text-mu ...

  6. Bootstrap辅助类

    前面的话 Bootstrap提供了一组工具类,用于辅助项目的开发.本文将详细介绍Bootstrap辅助类 文本色 通过颜色来展示意图,Bootstrap 提供了一组工具类.这些类可以应用于链接,并且在 ...

  7. bootstrap——辅助类和响应式工具类

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Bootstrap 辅助类

    [Bootstrap 辅助类] 1.背景色 2. <p>插入符实例 <span class="caret"></span> </p> ...

  9. Bootstrap 按钮，图片，辅助类

    Bootstrap 按钮 任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a&g ...

随机推荐

  1. Zend Studio 配置

    2.更改Zend字体 依次进入Window——Preferences——General——Appearance——Colors and Fonts——Basic——Text Font进行修改,偶还是喜 ...

  2. Drupal模块的安装方法

    Drupal自身的安装很简单,新建一个数据库,然后根据安装提示一步一步做就OK了. 而Drupal可以通过安装各种模块来提供更多定制功能,这些模块的安装方法基本相同,一般来说,就是以下几步: 1) 从 ...

  3. CheckBoxList 全选(jquery版本)

    function selectedAll(allselect, obj) { $("#"+obj.id+" input:checkbox").each(func ...

  4. js - html中跳转出frame框架

    echo '<script>alert("密码修改成功,请重新登录!");window.parent.location.href = "'.site_url( ...

  5. openfire url get提交 中文乱码问题

    原因是它只接受url编码后的中文 如:%E7%BC%96%E7%A0%81%E5%90%8E%E7%9A%84%E4%B8%AD%E6%96%87 会自动转变为:http://127.0.0.1:90 ...

  6. Latex的各种帽子

    \hat{A} \widehat{A} \tilde{A} \widetilde{A} \overline{A} \underline{A} \overbrace{A} \underbrace{A} ...

  7. jenkins配置过程遇到的问题

    jenkins 搭建完成后,可以浏览器访问: http://localhost:8081/jenkins, 新建任务过程中遇到以下问题: 1. 源码管理不现实git, 只显示无 解决: 插件管理 -  ...

  8. Android学习CursorWrapper与Decorator模式 （转至http://www.cnblogs.com/bastard/archive/2012/05/31/2527944.html）

    一 Decorator模式 意图: 动态的给一个对象添加一些额外的职责.就增加功能来说,Decorator模式相比生成子类更为灵活. 动态的给一个对象,而不是对整个类添加额外职责,说明此模式将采用的结 ...

  9. Linux新手要了解的十个知识点

    Linux对于有的新手来说,感觉无从下手,或者不知道从哪儿学起?怎么学?针对这些问题,我给大家说说新手学习Linux需要了解的十个知识点. 注意大小写 Linux是大小写敏感的系统,举个例子,Mozi ...

  10. 【Java NIO深入研究3】文件锁

    1.1概述——文件锁 文件锁定初看起来可能让人迷惑.它 似乎 指的是防止程序或者用户访问特定文件.事实上,文件锁就像常规的 Java 对象锁 — 它们是 劝告式的(advisory) 锁.它们不阻止任 ...