Bootstrap是一种web框架，是基于HTML,CSS和JS的一种目前较为流行的前端框架。
Bootstrap包含有丰富的组件，根据提供的组件，开发者可以更加快速、便捷地搭建自己心仪的网站。通常包括有以下常用组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、排版、缩略图、警告对话框、进度条、媒体对象等。此外，bootstrap还包含有众多jQuery插件：莫泰局昂、标签页、滚动条、弹出框等。
有关bootstrap的下载和文档可到bootstrap中文网：查看。
那么使用bootstrap的优势在哪里？第一、利于开发响应式网站，解决不同设备的兼容性问题。第二、提高了网站的开发速度和开发效率。
参考：
本篇文章将总结常用组件及其属性。
1.1栅格系统
1、栅格系统是一种行和列构成的一种布局。随着，屏幕分辨率的变大，最多可展示12个列。
PC端：
PAD端：
手机终端：
2、栅格参数：
col-lg-*:(屏幕 =1200px) PC
col-md-*:（992px-1200px）
col-sm-*:（768px-992px）小平板
col-xs-*:（小于768px）手机
3.代码示例：
div div div div img src="img/codeguide.png" h2 靠谱研究所 /h2 p 我们的口号是：靠谱、有趣、有料 /p /div /div div div img src="img/codeguide.png" h2 靠谱研究所 /h2 p 我们的口号是：靠谱、有趣、有料 /p /div /div /div /div
1.2辅助类
1.文本颜色：
span /span h1 text-primary靠谱研究所 /h1 h1 ess靠谱研究所 /h1 h1 text-warning靠谱研究所 /h1 h1 text-danger靠谱研究所 /h1 靠谱研究所 /h1 h1 text-muted靠谱研究所 /h1
2、背景颜色：
span /span h1 text-primary靠谱研究所 /h1 h1 ess靠谱研究所 /h1 h1 text-warning靠谱研究所 /h1 h1 text-danger靠谱研究所 /h1 靠谱研究所 /h1 h1 text-muted靠谱研究所 /h1
3、关闭按钮 三角图标：
span /span !--关闭按钮-- button span × /span /button !--三角图标-- span /span
4、快速浮动：
左浮动：pull-left
右浮动：pull-right 清除浮动：clearfix
浮动会将块元素转换成行内元素
div 这是左边的内容 /div div 这是右边的内容 /div
5、块元素居中、文字居中：
!--块元素垂直居中--
style
#div2{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);//平移
/style
span /span !--实现块元素水平居中--
div id="div1" 块元素水平居中 /div
!--实现块元素垂直居中--
div id="div2" 块元素垂直居中 /div
1.3表格
1.表格颜色：active,,danger
2.鼠标悬停效果：table-hover
3.带边框表格：table-bordered
4.各行换色：table-striped
table !--隔行换色、鼠标悬停、表格边框-- thead tr !--表格颜色-- th 姓名： /th th 性别： /th th 年龄： /th /tr /thead tbody td 张三 /td td 男 /td td 23 /td /tr td 张三 /td td 男 /td td 23 /td /tr td 张三 /td td 男 /td td 23 /td /tr /tbody /table
1.4列表：
class属性：ul:list-group
li:list-group-item 徽章：span:badge
列表项颜色：list-group-item-(success/warning/danger)
靠谱研究所 !--列表徽章-- span 10 /span /li li IT研究所 /li li 美食研究所 /li li 美妆研究所 /li /ul
1.5表单：
表单分组：form-group
表单项：(input/span/textarea):form-control
style
.container{
width:450px;
height:300px;
background:#ffffff;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-radius:20px;
/style
span /span form role="form"
h3 靠谱研究所后台管理系统 /h3
div
label for="user" 用户名 /label
input type="text" id="user" placeholder="请输入用户名"
span /span
/div
div
label for="pass" 密码 /label
input type="text" id="pass" placeholder="请输入密码"
span /span
/div
div
label
input type="checkbox" 请记住我
/label
/div
button type="submit" 提交 /button
/form