辅助样式

1、情景文本色  .text-muted  .text-primary  .text-success  .text-info  .text-warning  .text-danger  {color}

2、情景背景色  .bg-primary  .bg-success  .bg-info  .bg-warning  .bg-danger  {color/background-color}

3、关闭按钮  .close  ×  {padding/cursor/background/border/float/font-size/font-weight/color/opcity}

4、三角符号  .caret  {display/width/height/border-top/border-left/border-right}

5、快速浮动  .pull-left  .pull-right  {float!important}

6、居中  .center-block  {display/margin-left/margin-right}

7、清除浮动  .clearfix

8、显示和隐藏  .show  .hidden  .invisible

9、屏幕阅读器和键盘导航  .sr-only  .sr-only-focusable  {position/width/height/padding/margin/overflow/clip/border}

10、文本隐藏,图片替换  .text-hide  {font/color/background-color/text-shadow/border}

11、响应式显示和隐藏类

超小<768        小>768        中等>992        大>1200

.visible-xs-*        可见            隐藏           隐藏           隐藏

.visible-sm-*       隐藏            可见           隐藏           隐藏

.visible-md-*       隐藏           隐藏           可见           隐藏

.visible-lg-*        隐藏            隐藏           隐藏           可见

.hidden-sm        可见            隐藏           可见           可见

.hidden-md        可见            可见           隐藏           可见

.hidden-lg         可见            可见           可见           隐藏

.visible-**-*  :  .visible-**-block  .visible-**-inline-block  .visible-**-inline

[Bootstrap]全局样式(五)的更多相关文章

  1. bootstrap 全局样式设置

    HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...

  2. bootstrap全局样式二

    加form-grope是为了以后更好的管理,一组form写一个form-grope 显示如下: 并排显示的话,给用户名前面再加一个div,再加horizontal,如下,并且加上control-lab ...

  3. bootstrap全局样式

    内联子标题: 显示如下: 主体副本: 显示如下: 对齐类: 显示如下: 强调类: 显示如下: 缩略语: 地址: 表格: 加一个class:“table-striped” js里面的奇数偶数行(odd) ...

  4. [Bootstrap]全局样式(四)

    按钮 1.基本类.btn {display/padding/margin-bottom/font-size/border-radius/border} 作用于< a:role:button &g ...

  5. [Bootstrap]全局样式(三)

    表格 1.基本类  .table  {width/margin-bottom/}  {padding/border-top} e.g.:<table class="table" ...

  6. [Bootstrap]全局样式(二)

    具体排版 1.标题和标题类 <h1> ~<h6>和.h1~h6|副标题<small>和.small font-size                    mar ...

  7. [Bootstrap]全局样式(一)

    页面必须设置为html5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 适应移动设备 ...

  8. bootstrap 全局样式

    reset.css html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% ...

  9. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

随机推荐

  1. 让table 居于页面的正中间(上下左右均居中的方法)

    ? <table bgcolor="#jnkc" width="300" height="200" style="posit ...

  2. delphi 获取驱动盘的卷标 号

    {获取C盘的卷标 格式化硬盘卷标改变} //GetHardDiskSerial('c:\') function GetHardDiskSerial(Drive: string): string; va ...

  3. hdu4864 hdu4268 贪心 lower_bound

    hdu4864 题意: 有n个机器,m个任务,n,m<=100000,每个机器都有工作时间的最大限制xi(0<xi<1440)和完成的最大难度yi(0<=yi<=100) ...

  4. Zend Studio / Ecliplse插件StartExplorer

    Install site.zip (quick and simple way) Locate zip file under site\target in Project Explorer, Start ...

  5. 初步认知MySQL metadata lock(MDL)

    http://blog.itpub.net/26515977/viewspace-1208250/ 概述 随着5.5.3引入MDL,更多的Query被“Waiting for table metada ...

  6. mysql_upgrade命令

    mysql 创建存储过程失败.查看错误日志,发现如下信息:*********************************************************************** ...

  7. 基础笔记(二)HTTP协议

    GET与POST的区别 1.GET提交的数据会放在URL之后,以?分割URL和传输数据,参数之间用&连接:POST是把提交的数据放在HTTP的body中. 2.GET提交的数据大小有限制(协议 ...

  8. 使用JS制作一个鼠标可拖的DIV(一)——鼠标拖动

    使用 JS 来实现一个可拖动的DIV,主要是使用到以下几个事件: 1.鼠标按下:DIV元素的onmousedown. 2.鼠标按住拖动:document 的 onmousemove 元素. 3.鼠标放 ...

  9. 自定义JPA之AttributeConverter

    1. 执行类 public class BooleanConverter implements AttributeConverter<Boolean, Integer> { } 2. 属性 ...

  10. TensorFlow安装与测试

    官网:http://tensorflow.org/安装步骤:1.sudo apt-get install python-pip python-dev python-virtualenv 2.virtu ...