好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

Bootstrap3CSS样式基本用法总结_html/css_WEB-ITnose

出于学习需要,自觉得把基本的bootstrap用法自己敲一遍,对每个用法有个较清晰的印象,所以做了本篇总结,这也是一个巩固的学习过程。

可点击左边的目录,方便速查。

按钮

a,input,button都可以设置为按钮

a标签按钮 button标签按钮

        a标签按钮                           button标签按钮     

预置样式

default样式 primary样式 success样式 info样式 warning样式 danger样式 link样式

         default样式          primary样式          success样式          info样式          warning样式          danger样式          link样式  

按钮大小

大按钮btn-lg 默认按钮 小按钮btn-sm 超小按钮btn-xs

         大按钮btn-lg          默认按钮          小按钮btn-sm          超小按钮btn-xs  

块级按钮-btn-block

块级按钮,与父元素等宽 块级按钮,与父元素等宽

         块级按钮,与父元素等宽          块级按钮,与父元素等宽  

禁用状态 class="disabled"

被禁用的按钮

         被禁用的按钮  

激活状态 class="active"

激活状态的按钮

         激活状态的按钮  

图片

响应式图片-img-responsive

          

图片的三种形状

                                  

表格

基本表格 .table

表格标题 表格标题 表格标题 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元

                                                表格标题                表格标题                表格标题                                                                表格单元                表格单元                表格单元                                           表格单元                表格单元                表格单元                                           表格单元                表格单元                表格单元                                   

斑马线表格 .table .table-striped

表格标题 表格标题 表格标题 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元

                                                表格标题                表格标题                表格标题                                                                表格单元                表格单元                表格单元                                           表格单元                表格单元                表格单元                                           表格单元                表格单元                表格单元                                   

带边框表格 .table .table-bordered

表格标题 表格标题 表格标题 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元

                                                表格标题                表格标题                表格标题                                                                表格单元                表格单元                表格单元                                           表格单元                表格单元                表格单元                                           表格单元                表格单元                表格单元                                   

鼠标悬停表格 .table .table-hover

表格标题 表格标题 表格标题 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元

                                                表格标题                表格标题                表格标题                                                                表格单元                表格单元                表格单元                                           表格单元                表格单元                表格单元                                           表格单元                表格单元                表格单元                                   

紧凑表格 .table .table-condensed

表格标题 表格标题 表格标题 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元

                                                表格标题                表格标题                表格标题                                                                表格单元                表格单元                表格单元                                           表格单元                表格单元                表格单元                                           表格单元                表格单元                表格单元                                   

响应式表格 .table .table-responsive

表格标题 表格标题 表格标题 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元

      

表格标题 表格标题 表格标题 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元 表格单元

状态类

表格标题 表格标题 表格标题 状态active 状态active 状态active 状态success 状态success 状态success 状态info 状态info 状态info 状态warning 状态warning 状态warning 状态danger 状态danger 状态danger

                                                表格标题                表格标题                表格标题                                                                状态active                状态active                状态active                                           状态success                状态success                状态success                                           状态info                状态info                状态info                                          状态warning                状态warning                状态warning                                          状态danger                状态danger                状态danger                                   

表单

基本表单-.from-control 和.from-group搭配

用户名

密码

记住密码

确定

         

内联表单-.from-inline

用户名

密码

记住密码

确定

        

移动端注意(隐藏label)

用户名

密码

记住密码

确定

        

input的内联组合

前面

后面

提交

         

水平排列表单(用栅格系统)

用户名

密码

记住密码

确定

        

单选框和复选框的内联形式

选择1 选择2 选择3

选择1 选择2 选择3

                        选择1                                   选择2                                   选择3                     

选择1 选择2 选择3

查看更多关于Bootstrap3CSS样式基本用法总结_html/css_WEB-ITnose的详细内容...

  阅读:40次