类 	                    描述
.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. ubuntu如何修改字符集编码

    系统支持编码的修改如下: 1. 使用如下命令查看系统支持的字符集cat /usr/share/i18n/SUPPORTED说明:查看系统支持的字符集,你需要注意的是支持字符集的格式,如对中文会有以下一 ...

  2. addClass和removeClass函数

    function addClass1(element,value){ if(!element.className){ element.className = value; }else{ newClas ...

  3. Kafka Tools

    参考, https://cwiki.apache.org/confluence/display/KAFKA/System+Tools https://cwiki.apache.org/confluen ...

  4. selenium测试(Java)--多表单切换(十二)

    采用下面的例子来编写用例 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type& ...

  5. IE屏蔽鼠标右键、禁止复制粘贴等功能

    <body oncontextmenu="return false" onselectstart="return false" ondragstart=& ...

  6. Windows下 flex + bison 小例子

    .下载flex和bison,网址是http://gnuwin32.sourceforge.net/packages/flex.htm 和http://gnuwin32.sourceforge.net/ ...

  7. 解决只有单引号的Json格式转换成bean问题

    objectMapper.configure(Feature.ALLOW_UNQUOTED_FIELD_NAMES, true);单引号类似Json格式:{id:124463277,code:null ...

  8. QButtonGroup:按钮类的非可视化容器,默认可实现按钮的子类实例的单选。

    QButtonGroup The QButtonGroup class provides a container to organize groups of button widgets. QButt ...

  9. opencv实例二:缩放一张图片

    1.知识补充 const char*, char const*, char*const的区别 事实上这个概念谁都有只是三种声明方式非常相似: Bjarne在他的The C++ Programming ...

  10. jquery轻量级富文本编辑器Trumbowyg

    html: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv=&qu ...