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>

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

Bootstrap内辅助类，响应式工具，组件的个人总结
辅助类(工具类): 文本颜色: Fusce dapibus, tellus ac cursus commodo, torto ...
bootstrap -- css -- 辅助类
文本文本颜色如果文本是个链接,则鼠标移动到链接文本上的时候,文本会变暗 .text-muted:灰色 .text-primary:浅蓝色 .text-success:绿色 .text-info:深 ...
Tomcat8源码笔记(二)Bootstrap启动
TOMCAT源码调试入口是Bootstrap类的main方法,我的启动参数VM: -Dcatalina.home=E:/Tomcat_Source_Code/apache-tomcat-8.0.53- ...
【Netty】Netty简介及服务器客户端简单开发流程
什么是Netty Netty是一个基于Java NIO的编写客服端服务器的框架,是一个异步事件框架. 官网https://netty.io/ 为什么选择Netty 由于JAVA NIO编写服务器的过程 ...
Bootstrap<基础九>辅助类
Bootstrap 中的一些可能会派上用场的辅助类. 文本以下不同的类展示了不同的文本颜色.如果文本是个链接鼠标移动到文本上会变暗: 类描述 .text-muted "text-mu ...
Bootstrap辅助类
前面的话 Bootstrap提供了一组工具类,用于辅助项目的开发.本文将详细介绍Bootstrap辅助类文本色通过颜色来展示意图,Bootstrap 提供了一组工具类.这些类可以应用于链接,并且在 ...
bootstrap——辅助类和响应式工具类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Bootstrap 辅助类
[Bootstrap 辅助类] 1.背景色 2. 插入符实例 ...
Bootstrap 按钮，图片，辅助类
Bootstrap 按钮任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a&g ...

随机推荐

MySQL 性能优化的最佳 20+ 条经验
今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序员需要去关注的事情.当我们去设计数据库表结构,对操作数 ...
JavaScript操作XML工作记录
JavaScript操作XML (一) JavaScript操作XML是通过XML DOM来完成的.那么什么是XML DOM呢?XML DOM 是: 用于 XML 的标准对象模型用于 XML 的标准 ...
QT全局宏变量的实现
qt中如何实现定义一个宏,在整个工程中都可以实现呢?下面我来写一个亲测的例子: pro中添加如下宏定义代码: DEFINES += HELLO=\"$$PWD/\" DEFINES ...
ubuntu之Matlab安装
(清华大学校内适用) 1.首先下载Matlab镜像:http://its.tsinghua.edu.cn/column/jsrj/1,一共有两个ios文件. 2.然后执行 cd ~ mkdir mat ...
js学习之--Bootstrap Modals（模态框）
http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html http://outofmemory.cn/bootstrap/tutor ...
C Language Study - 函数指针的使用
函数指针的使用 1.函数指针定义第一次使用函数指针,我是这样声明的,typedef void ( *pSimulatepks )( uint8 *prxBuf, uint8 *prxBufLen ) ...
CentOS7下Tomcat启动慢的原因及解决方案
现象在一次CentOS 7系统中安装Tomcat,启动过程很慢,需要几分钟,经过查看日志,发现耗时在这里:是session引起的随机数问题导致的.Tocmat的Session ID是通过SHA1算法 ...
HTML5的表单所有type类型
1.button:定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本). <input id="" type="button ...
oracle中如何把结果集插入临时表中
比如临时表叫temp,你要查询的语句为select * from 表名 where id=1. 1.建表temp 2.插入语句: ; commit;
Kafka学习之一深度解析
背景介绍 Kafka简介 Kafka是一种分布式的,基于发布/订阅的消息系统.主要设计目标如下: 以时间复杂度为O(1)的方式提供消息持久化能力,即使对TB级以上数据也能保证常数时间的访问性能高吞吐 ...

bootstrap之辅助类

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

随机推荐

热门专题