Bootstrap3 CSS样式基本用法总结_html/css_WEB-ITnose
程序员文章站
2022-05-26 10:18:57
...
出于学习需要,自觉得把基本的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
图片的三种形状
表格
基本表格 .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
用户名
密码
记住密码
确定
上一篇: jquery判断浏览器版本
下一篇: 神奇的rotate函数
推荐阅读
-
css 样式用法的累积_html/css_WEB-ITnose
-
css 样式用法的累积_html/css_WEB-ITnose
-
对于一些css样式的巧妙方法进行总结。_html/css_WEB-ITnose
-
Css基本样式――――综合设计:表格的制作_html/css_WEB-ITnose
-
Bootstrap3 CSS样式基本用法总结_html/css_WEB-ITnose
-
CSS用法的一些总结_html/css_WEB-ITnose
-
iframe用法总结_html/css_WEB-ITnose
-
对于一些css样式的巧妙方法进行总结。_html/css_WEB-ITnose
-
关于div+css 样式表中float与clear的用法_html/css_WEB-ITnose
-
iframe用法总结_html/css_WEB-ITnose