欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2024-01-10 14:50:14
...
出于学习需要,自觉得把基本的bootstrap用法自己敲一遍,对每个用法有个较清晰的印象,所以做了本篇总结,这也是一个巩固的学习过程。

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

按钮

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

a标签按钮 button标签按钮

        a标签按钮           

预置样式

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

                                                        

按钮大小

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

                                

块级按钮-btn-block

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

                

禁用状态 class="disabled"

被禁用的按钮

        

激活状态 class="active"

激活状态的按钮

        

图片

响应式图片-img-responsive

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

图片的三种形状

        Bootstrap3 CSS样式基本用法总结_html/css_WEB-ITnoseBootstrap3 CSS样式基本用法总结_html/css_WEB-ITnoseBootstrap3 CSS样式基本用法总结_html/css_WEB-ITnose

表格

基本表格 .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

用户名

密码

记住密码

确定