Bootstrap3 CSS样式基本用法总结_html/css_WEB-ITnose
php中文网
发布时间：2016-06-24 11:26:19
|
1082人浏览过
|
来源于php中文网
原创
出于学习需要，自觉得把基本的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
用户名
密码
记住密码
确定
立即学习“前端免费学习笔记（深入）”；
移动端注意(隐藏label)
用户名
密码
记住密码
确定
立即学习“前端免费学习笔记（深入）”；
input的内联组合
前面
后面
提交
立即学习“前端免费学习笔记（深入）”；
水平排列表单(用栅格系统)
用户名
密码
记住密码
确定
立即学习“前端免费学习笔记（深入）”；
单选框和复选框的内联形式
选择1 选择2 选择3
选择1 选择2 选择3
立即学习“前端免费学习笔记（深入）”；
静态控件 .form-control-static
用户名
Tab Weng
立即学习“前端免费学习笔记（深入）”；
标题
（提示：由于默认的h1~h7在博客园编辑器中受默认样式的影响，所以无法显示bootstrap的样式，其具体样式与下面的class="h1"等相同）
h1标题样式
h4标题样式
h5标题样式 h6标题样式
h1标题样式
h4标题样式
h5标题样式
h6标题样式
立即学习“前端免费学习笔记（深入）”；
标题也可用class="h1"设置
通过class="h1"来设置样式
通过class="h4"来设置样式
通过class="h5"来设置样式
通过class="h6"来设置样式
通过class="h1"来设置样式
通过class="h4"来设置样式
通过class="h5"来设置样式
通过class="h6"来设置样式
立即学习“前端免费学习笔记（深入）”；
副标题-(或class="small")
设置样式h1 这里是副标题
设置样式h4 这里是副标题
设置样式h5 这里是副标题
设置样式h6 这里是副标题
设置样式h1这里是副标题
设置样式h4这里是副标题
设置样式h5这里是副标题
设置样式h6这里是副标题
立即学习“前端免费学习笔记（深入）”；
页面内容
p标签
Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。 制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体 效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。
Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。 制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体 效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。
立即学习“前端免费学习笔记（深入）”；
突出段落-class="lead"
Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。 制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体 效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。
Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。 制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体 效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。
立即学习“前端免费学习笔记（深入）”；
内联文本元素
标记-
使用mark来标记一下
使用mark来标记一下
立即学习“前端免费学习笔记（深入）”；
删除线-或
用del标签来删除这段话
用s标签来删除这段话
用del标签来删除这段话
用s标签来删除这段话
立即学习“前端免费学习笔记（深入）”；
下划线-或
ins标签表示插入文本
u标签表示加上下划线
ins标签表示插入文本
u标签表示加上下划线
立即学习“前端免费学习笔记（深入）”；
小号文本-
这是小号文本
这是小号文本
立即学习“前端免费学习笔记（深入）”；
强调-
这是加强字体，用strong
这是加强字体，用strong
立即学习“前端免费学习笔记（深入）”；
斜体-
这是斜体，用em
这是斜体，用em
立即学习“前端免费学习笔记（深入）”；
对齐
居左对齐
居中对齐
居右对齐
[两端对齐] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、 前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计 和OAuth等等，比较前卫的项目，还会用到Single Page Application、Web Socket、HTML5/CSS3 这些技术以及像第三方开发像微信公众号微博应用等等。
[没有对齐] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、 前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计 和OAuth等等，比较前卫的项目，还会用到Single Page Application、Web Socket、HTML5/CSS3 这些技术以及像第三方开发像微信公众号微博应用等等。
居左对齐
居中对齐
居右对齐
[两端对齐] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、 前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计 和OAuth等等，比较前卫的项目，还会用到Single Page Application、Web Socket、HTML5/CSS3 这些技术以及像第三方开发像微信公众号微博应用等等。
[没有对齐] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、 前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计 和OAuth等等，比较前卫的项目，还会用到Single Page Application、Web Socket、HTML5/CSS3 这些技术以及像第三方开发像微信公众号微博应用等等。
立即学习“前端免费学习笔记（深入）”；
改变大小写
LowerCase HahaHa
UpperCase Hahaha
capitalize haHaha
LowerCase HahaHa
UpperCase Hahaha
capitalize haHaha
立即学习“前端免费学习笔记（深入）”；
缩略语 标签
bootstrap是一个高度集成化的开发框架 此处缩略
bootstrap是一个高度集成化的开发框架 此处缩略
bootstrap是一个高度集成化的开发框架 此处缩略
bootstrap是一个高度集成化的开发框架 此处缩略
立即学习“前端免费学习笔记（深入）”；
引用
基本引用
这是html的基本引用标签blockquote，bootstrap为它左边添加了一个灰色带
这是html的基本引用标签blockquote，bootstrap为它左边添加了一个灰色带
立即学习“前端免费学习笔记（深入）”；
引用来源
这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。
比尔盖茨
这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。
立即学习“前端免费学习笔记（深入）”；
居右的引用，添加类.blockquote-reverse
这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。
比尔盖茨
这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。
立即学习“前端免费学习笔记（深入）”；
列表
无样式列表.list-unstyled
这里是列表 这里是列表 这里是二级列表 这里是二级列表 这里是二级列表 这里是二级列表 这里是列表 这里是列表 这里是列表
- 这里是列表
- 这里是列表
- 这里是二级列表
- 这里是二级列表
- 这里是二级列表
- 这里是二级列表
- 这里是列表
- 这里是列表
- 这里是列表
立即学习“前端免费学习笔记（深入）”；
内联列表-同一行显示.list-inline
这里是列表 这里是列表 这里是二级列表 这里是二级列表 这里是二级列表 这里是二级列表 这里是列表 这里是列表 这里是列表
- 这里是列表
- 这里是列表
- 这里是二级列表
- 这里是二级列表
- 这里是二级列表
- 这里是二级列表
- 这里是列表
- 这里是列表
- 这里是列表
立即学习“前端免费学习笔记（深入）”；
普通描述
名言 如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。 比尔盖茨的名人名言是这样描述的 在你出生之前，你的父母并非像他们现在这样乏味。 他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。 所以，如果你想消灭你父母那一辈中的"寄生虫"来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。
- 名言
- 如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。
- 比尔盖茨的名人名言是这样描述的
- 在你出生之前，你的父母并非像他们现在这样乏味。 他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。 所以，如果你想消灭你父母那一辈中的"寄生虫"来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。
立即学习“前端免费学习笔记（深入）”；
水平排列描述.dl-horizontal
名言 如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。 比尔盖茨的名人名言是这样描述的 在你出生之前，你的父母并非像他们现在这样乏味。 他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。 所以，如果你想消灭你父母那一辈中的"寄生虫"来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。
- 名言
- 如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。
- 比尔盖茨的名人名言是这样描述的
- 在你出生之前，你的父母并非像他们现在这样乏味。 他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。 所以，如果你想消灭你父母那一辈中的"寄生虫"来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。
立即学习“前端免费学习笔记（深入）”；
代码
内联代码 code
Let's add a headFile #include
Let's add a headFile #include
立即学习“前端免费学习笔记（深入）”；
用户输入 kbd
请按 F5 刷新
请按 F5 刷新
立即学习“前端免费学习笔记（深入）”；
代码块 pre
This is a tag name div
This is a tag name div
立即学习“前端免费学习笔记（深入）”；
变量 var
a
a
立即学习“前端免费学习笔记（深入）”；
程序输出 samp
Hello World!
Hello World!
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
本篇总结了一些常用的bootstrap3 的Css样式，但并非所有。
详细的学习请参考bootstrap官网：http://getbootstrap.com
bootstrap4 即将到来，期待！
