状态类

通过这些状态类可以为行或单元格设置颜色。

.active    鼠标悬停在行或单元格上时所设置的颜色
.success    标识成功或积极的动作
.info    标识普通的提示信息或动作
.warning    标识警告或需要用户注意
.danger    标识危险或潜在的带来负面影响的动作

Div

.container

.row

.container-fluid

栅格参数

.col-xs-*   

.col-sm-* 

.col-md-* 

.col-lg-*

列偏移

http://v3.bootcss.com/css/#grid-offsetting

使用这个就不需要强制通过补满栅格12列来布局了

.col-xs-offset-*    
.col-sm-offset-*   
.col-md-offset-*   
.col-lg-offset-*

响应式工具

.visible-xs-*

.visible-sm-*

.visible-md-*

.visible-lg-*

.hidden-xs     

.hidden-sm

.hidden-md

.hidden-lg

表单

http://v3.bootcss.com/css/#forms-horizontal

.form-horizontal

.form-group

.form-control

.form-control-static

.form-inline

.control-label

.input-group > .input-group-addon + .form-control + .input-group-addon  我最喜欢的样式

按钮Btn

 role="button"

.btn

.btn-default 

.btn-primary

.btn-success

.btn-info

.btn-warning

.btn-danger

.btn-link

.btn-(xs/md/sm/lg)

表格

http://v3.bootcss.com/css/#tables

.table

.table-striped

.table-bordered

.table-hover

.table-condensed

.table-responsive  将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格

多选和单选框

http://v3.bootcss.com/css/#-24

.disabled

.radio

.radio-inline

.checkbox

.checkbox-inline

校验状态

.has-warning
.has-error 
.has-success

控件尺寸高度

通过 .input-lg 类似的类可以为控件设置高度,通过 .col-lg-* 类似的类可以为控件设置宽度。

.input-(xs/md/sm/lg)

.form-group-(xs/md/sm/lg)

 图片形状 

img-rounded

img-circle

img-thumbnail

文本颜色

.text-muted 

.text-primary 

.text-success 

.text-info 

.text-warning 

.text-danger 

情境背景色

.bg-primary 

.bg-success 

.bg-info 

.bg-warning 

.bg-danger 

工具类

.pull-left

.pull-right

.center-block  让内容块居中

.clearfix

.show

.hidden

Bootstrap - 全局css样式类的更多相关文章

  1. bootstrap全局CSS样式学习

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

  2. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  3. 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  4. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  5. Bootstrap全局CSS样式之表单

    .form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...

  6. Bootstrap全局CSS样式之排版

    Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...

  7. Bootstrap全局CSS样式之表格

    .table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...

  8. bootstrap全局css样式

    以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...

  9. 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2

    1.表格 <div class="container"> <table class="table "> <thead> &l ...

随机推荐

  1. iOS __block类型变量作用域

    看下图 在c语言中,2个独立的函数是不可能互相访问局部变量的,但是__block提供了这个功能,它不单单能读变量,还可以对变量进行写!上图说明,block获得了i最后的真实值5,没有只取得0,这都是& ...

  2. Java for LeetCode 045 Jump Game II

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  3. Android activity_main.xml删除边缘距离,充满屏幕

    删除android:paddingBottom.android:paddingLeft.android:paddingRight和android:paddingTop四个属性

  4. Merge和Rebase在Git中的区别

    git命令Merge和Rebase的区别 git merge 会生成一个新得合并节点,而rebase不会 比如: D---E test / A---B---C---F master 使用merge合并 ...

  5. 在linux上安装psycopg2出错--Error: pg_config executable not found.

    这个错误可能是因为缺少PGSQL的相关库吧. 网上有很多解决办法,我最终用以下方式解决: yum install postgresql postgresql-devel python-devel

  6. mac 下修改Hosts文件

    最近Google网站老是打不开,具体原因大家都明白,不过修改Hosts文件后,就能访问了,也算不上原创,网上一搜就能找到,自己操作记录下,希望有刚接触Mac 系统的童鞋有帮助. 第一步:打开Finde ...

  7. PHP GBK UTF8互转

    function gbk_to_utf8($str){     return mb_convert_encoding($str, 'utf-8', 'gbk'); }   function utf8_ ...

  8. Codeforces Round #313 (Div. 2)B.B. Gerald is into Art

    B. Gerald is into Art Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/problemset/ ...

  9. C#学习笔记(九)——集合、比较和转换

    一.集合 ** System.Collections名称空间中的几个接口提供了基本的集合功能 Ps:这里看成一个动态的链表,但是已经完美的封装好了. (一)使用集合 1.代码示例 (1)Animal. ...

  10. hadoop系列讨论

    生产环境下cloudera的cdh版本更受欢迎,但是貌似cloudera对于YARN的开发力度不是很突出,所以在apache与cdh版本选择的时候,大家是怎么考虑的? 主要关注生产环境下的运维成本,期 ...