bootstrap学习笔记心得1

Bootstrap是一种web框架，是基于HTML,CSS和JS的一种目前较为流行的前端框架。

Bootstrap包含有丰富的组件，根据提供的组件，开发者可以更加快速、便捷地搭建自己心仪的网站。通常包括有以下常用组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、排版、缩略图、警告对话框、进度条、媒体对象等。此外，bootstrap还包含有众多JQuery插件：莫泰局昂、标签页、滚动条、弹出框等。

有关bootstrap的下载和文档可到bootstrap中文网：www.bootcss.com查看。

那么使用bootstrap的优势在哪里？第一、利于开发响应式网站，解决不同设备的兼容性问题。第二、提高了网站的开发速度和开发效率。

本篇文章将总结常用组件及其属性。

1.1栅格系统

1、栅格系统是一种行和列构成的一种布局。随着，屏幕分辨率的变大，最多可展示12个列。

PC端：

PAD端：

手机终端：

2、栅格参数：

col-lg-*:(屏幕>=1200px) PC

col-md-*:（992px-1200px）

col-sm-*:（768px-992px）小平板

col-xs-*:（小于768px）手机

3.代码示例：

[html]  view plain  copy

1. <div class="container" style="border:1px solid red;">  
2.     <div class="row">  
3.         <div class="col-lg-3 col-sm-4 col- xs-6">  
4.             <div class="thumbnail">  
5.                 <img src="img/codeguide.png">  
6.                 <h2>靠谱研究所</h2>  
7.                 <p>我们的口号是：靠谱、有趣、有料</p>  
8.             </div>  
9.         </div>  
10.         <div class="col-lg-3 col-sm-4 col- xs-6">  
11.             <div class="thumbnail">  
12.                 <img src="img/codeguide.png">  
13.                 <h2>靠谱研究所</h2>  
14.                 <p>我们的口号是：靠谱、有趣、有料</p>  
15.             </div>  
16.         </div>  
17.     </div>      
18.   </div>  

1.2辅助类

1.文本颜色：

[html]  view plain  copy

1. <span style="white-space:pre">  </span>    <h1 class="text-primary">text-primary靠谱研究所</h1>  
2.         <h1 class="text-success">text-success靠谱研究所</h1>  
3.         <h1 class="text-warning">text-warning靠谱研究所</h1>  
4.         <h1 class="text-danger">text-danger靠谱研究所</h1>  
5.         <h1 class="text-info">text-info靠谱研究所</h1>  
6.         <h1 class="text-muted">text-muted靠谱研究所</h1>  

2、背景颜色：

[html]  view plain  copy

1. <span style="white-space:pre">  </span>    <h1 class="bg-primary">text-primary靠谱研究所</h1>  
2.         <h1 class="bg-success">text-success靠谱研究所</h1>  
3.         <h1 class="bg-warning">text-warning靠谱研究所</h1>  
4.         <h1 class="bg-danger">text-danger靠谱研究所</h1>  
5.         <h1 class="bg-info">text-info靠谱研究所</h1>  
6.         <h1 class="bg-muted">text-muted靠谱研究所</h1>  

3、关闭按钮&三角图标：

[html]  view plain  copy

1. <span style="white-space:pre">  </span>    <!--关闭按钮-->  
2.         <button class="close"><span>×</span></button>  
3.         <!--三角图标-->  
4.         <span class="caret"></span>  

4、快速浮动：

左浮动：pull-left右浮动：pull-right 清除浮动：clearfix

浮动会将块元素转换成行内元素

[html]  view plain  copy

1. <div class="pull-left bg-primary">这是左边的内容</div>  
2.     <div class="pull-right bg-danger">这是右边的内容</div>  

  5、块元素居中、文字居中：

[html]  view plain  copy

1. <!--块元素垂直居中-->  
2.     <style>  
3.         #div2{  
4.         position:absolute;  
5.         left:50%;  
6.         top:50%;  
7.         transform:translate(-50%,-50%);//平移  
8.         }  
9.     </style>  
10. <span style="white-space:pre">  </span><!--实现块元素水平居中-->  
11.     <div id="div1" class="center-block text-center" style="width:500px;border:1px solid red;">块元素水平居中</div>  
12.     <!--实现块元素垂直居中-->  
13.     <div id="div2" class="center-block text-center" style="width:500px;border:1px solid red;">块元素垂直居中</div>  

1.3表格

1.表格颜色：active,warning,danger,info,danger

2.鼠标悬停效果：table-hover

3.带边框表格：table-bordered

4.各行换色：table-striped

[html]  view plain  copy

1. <table class="table table-striped table-hover table-bordered"><!--隔行换色、鼠标悬停、表格边框-->  
2.             <thead>  
3.                 <tr class="danger"><!--表格颜色-->  
4.                     <th>姓名：</th>  
5.                     <th>性别：</th>  
6.                     <th>年龄：</th>  
7.                 </tr>  
8.             </thead>  
9.             <tbody>  
10.                 <tr>  
11.                     <td>张三</td>  
12.                     <td>男</td>  
13.                     <td>23</td>  
14.                 </tr>  
15.                 <tr>  
16.                     <td>张三</td>  
17.                     <td>男</td>  
18.                     <td>23</td>  
19.                 </tr>  
20.                 <tr>  
21.                     <td>张三</td>  
22.                     <td>男</td>  
23.                     <td>23</td>  
24.                 </tr>  
25.             </tbody>  
26.         </table>  

1.4列表：

class属性：ul:list-groupli:list-group-item 徽章：span:badge                                                                                             列表项颜色：list-group-item-(success/warning/danger)

[html]  view plain  copy

1.     <ul class="list-group">  
2.     <li class="list-group-item">  
3.     靠谱研究所  
4.     <!--列表徽章--><span class="badge">10</span>  
5.     </li>  
6.     <li class="list-group-item list-group-item-success">IT研究所</li>  
7.     <li class="list-group-item list-group-item-warning">美食研究所</li>  
8.     <li class="list-group-item list-group-item-info">美妆研究所</li>  
9. </ul>  

1.5表单：

表单分组：form-group 表单项：(input/span/textarea):form-control

[html]  view plain  copy

1. <style>  
2.     .container{  
3.         width:450px;  
4.         height:300px;  
5.         background:#ffffff;  
6.         position:absolute;  
7.         left:50%;  
8.         top:50%;  
9.         transform:translate(-50%,-50%);  
10.         border-radius:20px;  
11.     }  
12.   </style>  
13. <span style="white-space:pre">  </span><form role="form">  
14.             <h3 class="text-center">靠谱研究所后台管理系统</h3>  
15.             <div class="form-group has-success has-feedback">  
16.                 <label for="user">用户名</label>  
17.                 <input type="text" id="user" placeholder="请输入用户名" class="form-control">  
18.                 <span class="glyphicon glyphicon-ok form-control-feedback"></span>  
19.             </div>  
20.             <div class="form-group has-error has-feedback">  
21.                 <label for="pass">密码</label>  
22.                 <input type="text" id="pass" placeholder="请输入密码" class="form-control">  
23.                 <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
24.             </div>  
25.             <div class="checkbox">  
26.                 <label>  
27.                     <input type="checkbox">请记住我  
28.                 </label>  
29.             </div>  
30.             <button type="submit" class="btn btn-success btn-block">提交</button>  
31.         </form>