bootstrap常用样式整理

栅栏模式
container 把页面切换成12格 xs sm md 分别用于 手机 平板 pc
文字效果
下划线 删除 中划线
段落效果
class ='text-lowercase'小写 class ='text-uppercase'小写 class='text-capitalized' 首字母大写
对齐方式
class='text-left'左对齐 class='text-right'右对齐 class='text-center'中间对齐 class='text-justify'俩侧对齐 class='text-nowrap'不换行

代码解析

引用

表格
普通表格
class='table'
条纹表格
class = 'table-striped'
带边框表格
class='table-bordered'
鼠标响应表格
class = 'table-hovered'
紧缩表格
class = 'table-condensed'

响应式

表单
小块使用 class = 'form-group' 节点使用 class='form-control'
内联表单
和表格的响应式一样需要在外层加一个class = 'form-inline'的父级层
水平排列表单
内容和输入框水平摆放，需要用到栅栏 父层div class='form-horizontal' 内部label col-md-3 input col-md-9

input设置

禁用input
readOnly disabled
额外图标

额外图标

button样式
class = 'btn btn-default'无色 primary 深蓝 success 绿色 ....和table一样
注:a标签同样可以伪装成button 但是diabled属性需要写在 class中

图片
响应式图片
class='img-responsive'
圆角图片
class='img-rounded'
圆形图片
class='img-circle'
带框图片
class='img-thumbnail'

颜色
表格tr/td颜色
class='active' hover颜色 success 绿色 info 蓝色 warning 黄色 danger 红色
button颜色
class = 'btn btn-default'无色 primary 深蓝 success 绿色 ....和table一样
文字颜色
class='text-success'....等
背景颜色
class='bg-success'

快速浮动
pull-left/pull-right
清除浮动
clearfix
显示隐藏
class='show'/'hide'