bootstrap常用样式整理

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

代码解析
<blockquote></blockquote>
引用
<cite></cite>
表格
普通表格
class='table'
条纹表格
class = 'table-striped'
带边框表格
class='table-bordered'
鼠标响应表格
class = 'table-hovered'
紧缩表格
class = 'table-condensed'

响应式
<div class="table-responsive"><table></table></div>

表单
小块使用 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
额外图标
<div class='input-group'><span class='input-group-addon'>额外图标</span></div>
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'

    原文作者:lackdata
    原文地址: https://segmentfault.com/a/1190000012872556
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞