辅助样式

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. Winform-控制边框显示属性

  2. codeforce447 D SGU 548 贪心+优先队列

    codeforce447 D - DZY Loves Modification 题意:有一个n*m的矩阵,每次可以选择一行或者一列,可以得到这行或这列的所有元素sum的积分,然后使这一列/行的每一个元 ...

  3. IOS键盘弹出、隐藏

    IOS键盘 UIKeyboardFrameBeginUserInfoKey:动画开始前键盘的size UIKeyboardFrameEndUserInfoKey:动画结束后键盘的size - (voi ...

  4. python selenium自动化(一)点击页面链接测试

    需求:现在有一个网站的页面,我希望用python自动化的测试点击这个页面上所有的在本窗口跳转,并且是本站内的链接,前往到链接页面之后在通过后退返回到原始页面. 要完成这个需求就必须实现3点: 1. 找 ...

  5. mysql router 自动failover测试

    mysql router 启动服务文件内容: [root@monitor mysqlrouter]# cat /etc/init.d/mysqlrouter#! /bin/bash## mysqlro ...

  6. Javascript-获取URL请求参数

    function getUrlParam(){    var param = [], hash;    var url = window.location.href;//获取网页的url     va ...

  7. Sequence用堆排序

    Description Given m sequences, each contains n non-negative integer. Now we may select one number fr ...

  8. Web Navigation

    Description Standard web browsers contain features to move backward and forward among the pages rece ...

  9. ASP.NET MVC 4 让数据库自动迁移

    今天实际测试了下这个方法,可以保持数据库与实体类同步,同时不会出现数据库迁移的提示.但是只能更改实体类来改变数据库,而不能改数据库来改变实体类.所以这才是Code frist,如果通过改数据库表来改动 ...

  10. iOS之Storyboard References

    如果你曾经使用 interface builder 创建过一个复杂.界面非常多的应用,你就会明白最后那些Storyboards 文件变的有多大.他会迅速变的无法管理,阻碍你的进度.自从引入 Story ...