分享bootstrap学习笔记心得(组件及其属性)
Bootstrap是一种web框架，是基于HTML,CSS和JS的一种目前较为流行的前端框架。
Bootstrap包含有丰富的组件，根据提供的组件，开发者可以更加快速、便捷地搭建自己心仪的网站。通常包括有以下常用组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、排版、缩略图、警告对话框、进度条、媒体对象等。此外，bootstrap还包含有众多jQuery插件：莫泰局昂、标签页、滚动条、弹出框等。
有关bootstrap的下载和文档可到bootstrap中文网：www.bootcss.com查看。
那么使用bootstrap的优势在哪里？第一、利于开发响应式网站，解决不同设备的兼容性问题。第二、提高了网站的开发速度和开发效率。
参考：如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框
Bootstrap学习系列之使用BootstrapTypeahead组件实现百度下拉效果
本篇文章将总结常用组件及其属性。
1.1栅格系统
1、栅格系统是一种行和列构成的一种布局。随着，屏幕分辨率的变大，最多可展示12个列。
PC端：
PAD端：
手机终端：
2、栅格参数：
col-lg-*:(屏幕>=1200px)PC
col-md-*:（992px-1200px）
col-sm-*:（768px-992px）小平板
col-xs-*:（小于768px）手机
3.代码示例：
<divclass="container"style="border:1pxsolidred;"> <divclass="row"> <divclass="col-lg-3col-sm-4col-xs-6"> <divclass="thumbnail"> <imgsrc="img/codeguide.png"> <h2>靠谱研究所</h2> <p>我们的口号是：靠谱、有趣、有料</p> </div> </div> <divclass="col-lg-3col-sm-4col-xs-6"> <divclass="thumbnail"> <imgsrc="img/codeguide.png"> <h2>靠谱研究所</h2> <p>我们的口号是：靠谱、有趣、有料</p> </div> </div> </div> </div>
1.2辅助类
1.文本颜色：
<spanstyle="white-space:pre"></span><h1class="text-primary">text-primary靠谱研究所</h1> <h1class="text-success">text-success靠谱研究所</h1> <h1class="text-warning">text-warning靠谱研究所</h1> <h1class="text-danger">text-danger靠谱研究所</h1> <h1class="text-info">text-info靠谱研究所</h1> <h1class="text-muted">text-muted靠谱研究所</h1>
2、背景颜色：
<spanstyle="white-space:pre"></span><h1class="bg-primary">text-primary靠谱研究所</h1> <h1class="bg-success">text-success靠谱研究所</h1> <h1class="bg-warning">text-warning靠谱研究所</h1> <h1class="bg-danger">text-danger靠谱研究所</h1> <h1class="bg-info">text-info靠谱研究所</h1> <h1class="bg-muted">text-muted靠谱研究所</h1>
3、关闭按钮&三角图标：
<spanstyle="white-space:pre"></span><!--关闭按钮--> <buttonclass="close"><span>×</span></button> <!--三角图标--> <spanclass="caret"></span>
4、快速浮动：
左浮动：pull-left
右浮动：pull-right清除浮动：clearfix
浮动会将块元素转换成行内元素
<divclass="pull-leftbg-primary">这是左边的内容</div> <divclass="pull-rightbg-danger">这是右边的内容</div>
5、块元素居中、文字居中：
<!--块元素垂直居中-->
<style>
#div2{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);//平移
}
</style>
<spanstyle="white-space:pre"></span><!--实现块元素水平居中-->
<divid="div1"class="center-blocktext-center"style="width:500px;border:1pxsolidred;">块元素水平居中</div>
<!--实现块元素垂直居中-->
<divid="div2"class="center-blocktext-center"style="width:500px;border:1pxsolidred;">块元素垂直居中</div>
1.3表格
1.表格颜色：active,warning,danger,info,danger
2.鼠标悬停效果：table-hover
3.带边框表格：table-bordered
4.各行换色：table-striped
<tableclass="tabletable-stripedtable-hovertable-bordered"><!--隔行换色、鼠标悬停、表格边框--> <thead> <trclass="danger"><!--表格颜色--> <th>姓名：</th> <th>性别：</th> <th>年龄：</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>23</td> </tr> <tr> <td>张三</td> <td>男</td> <td>23</td> </tr> <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)
<ulclass="list-group"> <liclass="list-group-item"> 靠谱研究所 <!--列表徽章--><spanclass="badge">10</span> </li> <liclass="list-group-itemlist-group-item-success">IT研究所</li> <liclass="list-group-itemlist-group-item-warning">美食研究所</li> <liclass="list-group-itemlist-group-item-info">美妆研究所</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>
<spanstyle="white-space:pre"></span><formrole="form">
<h3class="text-center">靠谱研究所后台管理系统</h3>
<divclass="form-grouphas-successhas-feedback">
<labelfor="user">用户名</label>
<inputtype="text"id="user"placeholder="请输入用户名"class="form-control">
<spanclass="glyphiconglyphicon-okform-control-feedback"></span>
</div>
<divclass="form-grouphas-errorhas-feedback">
<labelfor="pass">密码</label>
<inputtype="text"id="pass"placeholder="请输入密码"class="form-control">
<spanclass="glyphiconglyphicon-removeform-control-feedback"></span>
</div>
<divclass="checkbox">
<label>
<inputtype="checkbox">请记住我
</label>
</div>
<buttontype="submit"class="btnbtn-successbtn-block">提交</button>
</form>