辅助样式

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. 【转】教你Ruby快速入门

    转自:http://developer.51cto.com/art/200703/41243.htm 介绍 这是一个短小的Ruby入门,完全读完只需20分钟.这里假设读者已经安装了Ruby,如果你没有 ...

  2. Ubuntu 15.04下MySQL 5.6.25不支持中文解决办法

    Ubuntu 15.04下MySQL 5.6.25不支持中文解决办法,apt-get install 安装的,不是源码包安装的mysql. 1 修改mysql的配置文件 /etc/mysql/conf ...

  3. BZOJ 3505: [Cqoi2014]数三角形 数学

    3505: [Cqoi2014]数三角形 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/pr ...

  4. Codeforces Gym 100733J Summer Wars 线段树,区间更新,区间求最大值,离散化,区间求并

    Summer WarsTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.a ...

  5. 使用IOCTL代码实现LCD背光调节

    国内这种代码找不到.于是參考了相关代码后完好例如以下代码,且实现方式通过IOCTL代码实现LCD背光调节的功能. 适合场合为平板电脑或者笔记本.主要还是要靠BIOS支持与否. 编译环境使用:Dev-c ...

  6. Dia Diagram Mac OSX Yosemite Fix 闪退 xterm

    [转]http://navkirats.blogspot.hk/2014/10/dia-diagram-mac-osx-yosemite-fix-i-use.html I use the Dia to ...

  7. [Effective C++ --031]将文件间的编译依存关系降至最低

    引言:编译时间成本 在项目中我们都会碰到修改既存类的情况:某个class实现文件做了些轻微改变,修改的不是接口,而是实现,而且只改private成分. 重新build这个程序,并预计只花数秒就好,当按 ...

  8. grep时排除指定的文件和目录

    参考:http://winterth.duapp.com/notes/ar03s04.htmlhttp://blog.sina.com.cn/s/blog_7169c8ce0100qkyf.html ...

  9. PHP.2-LAMP平台介绍及网站的工作原理

    LAMP平台介绍及网站的工作原理 1.HTTP协议 URL(UniformResourceLocator)统一资源定位符,就是网页地址的意思.[格式:协议://主机.端口.文件.附加资源] ##URL ...

  10. setting bundle 多语言,本地化,系统设置

    新建一个setting.bundle后结构如下: Settings.bundle en.lproj Root.strings Root.plist 大家一般都在Root.plst里面添加删除条目,那么 ...