zoukankan html css js c++ java

Bootstrap学习笔记（一）

一、Bootstrap概述

　　Bootstrap内容分为五部分：

　　　　1) 起步

　　　　2) 全局CSS样式

　　　　3) 组件

　　　　4) JS插件

　　　　5) 定制

二、起步

　　下载、模板、实例、Bootlint、禁用

　　模板:　　　　

 1 <!DOCTYPEl>
 2 <html lang="zh-cn">
 3   <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>Bootstrap 101 Template</title>
 8 
 9     <!-- Bootstrap -->
10     <link href="css/bootstrap.min.css" rel="stylesheet">
11     <!--[if lt IE 9]>
12       <script src="js/html5shiv.min.js"></script>
13       <script src="js/respond.min.js"></script>
14     <![endif]-->
15   </head>
16   <body>
17 
18     <script src="js/jquery.min.js"></script>
19     <script src="js/bootstrap.min.js"></script>
20   </body>
21 </html>

三、BootStrap中的CSS样式重置

　　1、基本样式　　　　

　　　　*{
　　　　　　　box-sizing: border-box;
　　　　}
　　　　html{
　　　　　　　font-size: 10px;
　　　　}
　　　　body{
　　　　　　font-size: 14px;
　　　　　　fonnt-family: 'helvatica Nenue';
　　　　　　line-height: 20px;
　　　　　　color: #333;
　　　　　　background-color: #fff;
　　　　}
　　　　h1{
　　　　　　font-size: 36px;
　　　　　　margin-top: 20px;
　　　　　　margin-bottom: 10px;
　　　　}
　　　　h2{
　　　　　　font-size: 30px;
　　　　　　margin-top: 20px;
　　　　　　margin-bottom: 10px;
　　　　}
　　　　h3{
　　　　　　font-size: 24px;
　　　　　　margin-top: 20px;
　　　　　　margin-bottom: 10px;
　　　　}
　　　　h4{
　　　　　　font-size: 18px;
　　　　　　margin-top: 10px;
　　　　　　margin-bottom: 10px;
　　　　}
　　　　h5{
　　　　　　font-size: 14px;
　　　　　　margin-top: 10px;
　　　　　　margin-bottom: 10px;
　　　　}
　　　　h6{
　　　　　　font-size: 12px;
　　　　　　margin-top: 10px;
　　　　　　margin-bottom: 10px;
　　　　}
　　　　p{
　　　　　　margin-bottom: 10px;
　　　　}
　　　　a{
　　　　　　color: #???;
　　　　}
　　　　a:hover{
　　　　　　color: #???;
　　　　　　text-decoration: underline;
　　　　}
　　　　table{
　　　　　　border-collapse: collapse;
　　　　　　border-spacing: 0;
　　　　}
　　　　ul, ol{
　　　　　　margin: 0 0 10px;
　　　　}
　　2、全局CSS样式 -- 按钮相关的class

　　　　.btn　　　　　　按钮基本样式

　　　　.btn-default　　白底黑字的按钮

　　　　---------------------------------------------------

　　　　五种常用按钮颜色

　　　　.btn-danger　　红色

　　　　.btn-success　　绿色

　　　　.btn-warning　黄色

　　　　.btn-info　　　浅蓝色

　　　　.btn-primary　深蓝色

　　　　----------------------------------------------------

　　　　四种常用的大小

　　　　.btn-lg　　　　大号

　　　　.btn-md　　　中等（默认）

　　　　.btn-sm　　　小号

　　　　.btn-xs　　　超小

　　　　----------------------------------------------------

　　　　.btn-block　　块级按钮

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6         <meta name="viewport" content="width=device-width, initial-scale=1">
 7         <title>全局CSS样式 -- 按钮相关样式</title>
 8         <link href="css/bootstrap.min.css" rel="stylesheet">
 9     </head>
10     <body> 
11         <div class="container">
12             <h1>全局CSS样式 -- 按钮相关样式</h1>
13             <h2>三种形式的按钮</h2>
14             <button class="btn btn-default">BUTTON按钮</button>
15             <input type="button" value="INPUT按钮" class="btn btn-default">
16             <a href="#" class="btn btn-default">LINK按钮</a>
17 
18             <h2>Bootstrap中的5种常用颜色</h2>
19             <a class="btn btn-danger" href="#">红色的按钮</a>
20             <a class="btn btn-warning" href="#">黄色的按钮</a>
21             <a class="btn btn-success" href="#">绿色的按钮</a>
22             <a class="btn btn-info" href="#">浅蓝色的按钮</a>
23             <a class="btn btn-primary" href="#">深蓝色的按钮</a>
24 
25             <h2>Bootstrap四种常用的大小</h2>
26             <p>
27                 大号：lg(large)
28                 默认/中等大小：md(medium)
29                 小号：sm(small)
30                 超小号：xs(extra small)
31             </p>
32             <a class="btn btn-success btn-lg" href="#">大号按钮</a>
33             <a class="btn btn-success" href="#">中等按钮</a>
34             <a class="btn btn-success btn-sm" href="#">小号按钮</a>
35             <a class="btn btn-success btn-xs " href="#">超小按钮</a>
36 
37             <h2>块级按钮</h2>
38             <a class="btn btn-primary btn-block" href="#">块级按钮</a>
39         </div>        
40     </body>
41 </html>

　　3、全局CSS样式 -- 图片相关的class

　　　　.img-rounded　　圆角图片

　　　　.img-circle　　　圆形图片

　　　　.img-thumbnail 缩略图

　　　　.img-responsive　响应式图片

　　4、全局CSS样式 -- 文本相关的class

　　　　.text-uppercase　　　全部大写

　　　　.text-lowercase　　　全部小写

　　　　.text-capitalize　　　首字母大写

　　　　--------------------------------------------------

　　　　改变文本对齐方式

　　　　.text-left　　　　左对齐

　　　　.text-center　　居中对齐

　　　　.text-right　　　右对齐

　　　　.text-justify　　两端对齐

　　　　.text-nowrap　　无

　　　　--------------------------------------------------

　　　　改变文本颜色

　　　　.text-muted　　　#333（相似）

　　　　.text-primary　　深蓝色

　　　　.text-success　　绿色

　　　　.text-warning　黄色

　　　　.text-info　　　浅蓝色

　　　　.text-danger　　红色

　　　　-------------------------------------------------

　　　　改变文本的背景颜色（与文本颜色亮度不一致）

　　　　.text-primary　　深蓝色

　　　　.text-success　　绿色

　　　　.text-warning　黄色

　　　　.text-info　　　浅蓝色

　　　　.text-danger　　红色

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6         <meta name="viewport" content="width=device-width, initial-scale=1">
 7         <title>全局CSS样式 -- 文本相关样式</title>
 8         <link href="css/bootstrap.min.css" rel="stylesheet">
 9     </head>
10     <body> 
11         <div class="container"> 
12             <h1>全局CSS样式 -- 文本相关样式</h1>
13             <h2>改变文本的大小写</h2>
14             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati consequatur repellat, cum architecto unde, et hic quibusdam tempore dolores commodi odit, delectus eum voluptatum ad aperiam. Aliquid delectus, tempora qui.</p>
15             <p class="text-uppercase">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati consequatur repellat, cum architecto unde, et hic quibusdam tempore dolores commodi odit, delectus eum voluptatum ad aperiam. Aliquid delectus, tempora qui.</p>
16             <p class="text-lowercase">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati consequatur repellat, cum architecto unde, et hic quibusdam tempore dolores commodi odit, delectus eum voluptatum ad aperiam. Aliquid delectus, tempora qui..</p>
17             <p class="text-capitalize">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati consequatur repellat, cum architecto unde, et hic quibusdam tempore dolores commodi odit, delectus eum voluptatum ad aperiam. Aliquid delectus, tempora qui.</p>   
18 
19             <h2>改变文本的对齐方式</h2>
20             <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
21             <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
22             <p class="text-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
23             <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
24             <p class="text-nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
25 
26             <h2>改变文本的颜色</h2>
27             <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
28             <p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
29             <p class="text-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
30             <p class="text-danger">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
31             <p class="text-warning">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
32             <p class="text-info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
33 
34             <h2>改变文本的背景颜色</h2>
35             <p class="bg-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
36             <p class="bg-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
37             <p class="bg-danger">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
38             <p class="bg-warning">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
39             <p class="bg-info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
40             <hr>
41             <p class="text-primary bg-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
42             <p class="text-success bg-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
43             <p class="text-danger bg-danger">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
44             <p class="text-warning bg-warning">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
45             <p class="text-info bg-info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sunt pariatur tenetur et velit numquam cumque vero adipisci, odit delectus vel eligendi, provident reprehenderit est nesciunt saepe nobis magni eum!</p>
46         </div>
47     </body>
48 </html>

　　5、辅助class

　　　　.pull-left ==> float:left

　　　　.pull-right ==> float:right

　　　　.clearfix ==> clear:both

　　　　　.show ==> display:block

　　　　　.hidden ==> display:none

　　　　.invisible ==> visibility:hidden

　　　　.center-block ==> margin-left:auto;margin-right:auto;

　　6、表格相关的class（小重点）

　　　　.table　　基本样式

　　　　.table-bordered　　带边框　

　　　　.table-striped　　条状、隔行变色

　　　　.table-hover　　带鼠标悬停效果

　　　　.table-responsive　　响应式

　　　　注意：在使用响应式表格样式，要将类table包含在其内（即用在table的父容器上）

　　　　　　example：

　　　　　　　　</div>

  1 <!DOCTYPE html>
  2 <html lang="zh-cn">
  3     <head>
  4         <meta charset="utf-8">
  5         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6         <meta name="viewport" content="width=device-width, initial-scale=1">
  7         <title>全局CSS样式 -- 表格相关class</title>
  8         <link href="css/bootstrap.min.css" rel="stylesheet">
  9     </head>
 10     <body> 
 11         <div class="container"> 
 12             <h1>全局CSS样式 -- 表格相关class</h1>
 13             <h2>表格默认样式</h2>
 14             <table>
 15                 <thead>
 16                     <tr>
 17                         <th>姓名</th>
 18                         <th>生日</th>
 19                         <th>电话</th>
 20                         <th>住址</th>
 21                         <th>操作</th>
 22                     </tr>
 23                 </thead>
 24                 <tbody>
 25                     <tr>
 26                         <td>汤姆</td>
 27                         <td>1998-10-23</td>
 28                         <td>135012345678</td>
 29                         <td>园丁路123号</td>
 30                         <td>
 31                             <a class="btn btn-success btn-xs" href="#">详情</a>
 32                         </td>
 33                     </tr>
 34                     <tr>
 35                         <td>杰瑞</td>
 36                         <td>1999-11-23</td>
 37                         <td>135012345670</td>
 38                         <td>园丁路124号</td>
 39                         <td>
 40                             <a class="btn btn-info btn-xs" href="#">修改</a>
 41                         </td>
 42                     </tr>
 43                     <tr>
 44                         <td>玛丽</td>
 45                         <td>1997-01-08</td>
 46                         <td>135012345878</td>
 47                         <td>园丁路125号</td>
 48                         <td>
 49                             <a class="btn btn-danger btn-xs" href="#">删除</a>
 50                         </td>
 51                     </tr>
 52                     <tr>
 53                         <td>马修</td>
 54                         <td>1996-10-23</td>
 55                         <td>135055345678</td>
 56                         <td>园丁路127号</td>
 57                         <td>
 58                             <a class="btn btn-primary btn-xs" href="#">提交</a>
 59                         </td>
 60                     </tr>
 61                     <tr>
 62                         <td>贝斯</td>
 63                         <td>1990-09-23</td>
 64                         <td>135015675678</td>
 65                         <td>园丁路132号</td>
 66                         <td>
 67                             <a class="btn btn-warning btn-xs" href="#">查询</a>
 68                         </td>
 69                     </tr>
 70                 </tbody>
 71             </table>
 72 
 73             <h2>声明.table class的表格</h2>
 74             <table class="table">
 75                 <thead>
 76                     <tr>
 77                         <th>姓名</th>
 78                         <th>生日</th>
 79                         <th>电话</th>
 80                         <th>住址</th>
 81                         <th>操作</th>
 82                     </tr>
 83                 </thead>
 84                 <tbody>
 85                     <tr>
 86                         <td>汤姆</td>
 87                         <td>1998-10-23</td>
 88                         <td>135012345678</td>
 89                         <td>园丁路123号</td>
 90                         <td>
 91                             <a class="btn btn-success btn-xs" href="#">详情</a>
 92                         </td>
 93                     </tr>
 94                     <tr>
 95                         <td>杰瑞</td>
 96                         <td>1999-11-23</td>
 97                         <td>135012345670</td>
 98                         <td>园丁路124号</td>
 99                         <td>
100                             <a class="btn btn-info btn-xs" href="#">修改</a>
101                         </td>
102                     </tr>
103                     <tr>
104                         <td>玛丽</td>
105                         <td>1997-01-08</td>
106                         <td>135012345878</td>
107                         <td>园丁路125号</td>
108                         <td>
109                             <a class="btn btn-danger btn-xs" href="#">删除</a>
110                         </td>
111                     </tr>
112                     <tr>
113                         <td>马修</td>
114                         <td>1996-10-23</td>
115                         <td>135055345678</td>
116                         <td>园丁路127号</td>
117                         <td>
118                             <a class="btn btn-primary btn-xs" href="#">提交</a>
119                         </td>
120                     </tr>
121                     <tr>
122                         <td>贝斯</td>
123                         <td>1990-09-23</td>
124                         <td>135015675678</td>
125                         <td>园丁路132号</td>
126                         <td>
127                             <a class="btn btn-warning btn-xs" href="#">查询</a>
128                         </td>
129                     </tr>
130                 </tbody>
131             </table>  
132 
133             <h2>隔行变色的表格</h2>
134             <table class="table table-striped">
135                 <thead>
136                     <tr>
137                         <th>姓名</th>
138                         <th>生日</th>
139                         <th>电话</th>
140                         <th>住址</th>
141                         <th>操作</th>
142                     </tr>
143                 </thead>
144                 <tbody>
145                     <tr>
146                         <td>汤姆</td>
147                         <td>1998-10-23</td>
148                         <td>135012345678</td>
149                         <td>园丁路123号</td>
150                         <td>
151                             <a class="btn btn-success btn-xs" href="#">详情</a>
152                         </td>
153                     </tr>
154                     <tr>
155                         <td>杰瑞</td>
156                         <td>1999-11-23</td>
157                         <td>135012345670</td>
158                         <td>园丁路124号</td>
159                         <td>
160                             <a class="btn btn-info btn-xs" href="#">修改</a>
161                         </td>
162                     </tr>
163                     <tr>
164                         <td>玛丽</td>
165                         <td>1997-01-08</td>
166                         <td>135012345878</td>
167                         <td>园丁路125号</td>
168                         <td>
169                             <a class="btn btn-danger btn-xs" href="#">删除</a>
170                         </td>
171                     </tr>
172                     <tr>
173                         <td>马修</td>
174                         <td>1996-10-23</td>
175                         <td>135055345678</td>
176                         <td>园丁路127号</td>
177                         <td>
178                             <a class="btn btn-primary btn-xs" href="#">提交</a>
179                         </td>
180                     </tr>
181                     <tr>
182                         <td>贝斯</td>
183                         <td>1990-09-23</td>
184                         <td>135015675678</td>
185                         <td>园丁路132号</td>
186                         <td>
187                             <a class="btn btn-warning btn-xs" href="#">查询</a>
188                         </td>
189                     </tr>
190                 </tbody>
191             </table>   
192 
193             <h2>带鼠标悬停效果的表格</h2>
194             <table class="table table-hover">
195                 <thead>
196                     <tr>
197                         <th>姓名</th>
198                         <th>生日</th>
199                         <th>电话</th>
200                         <th>住址</th>
201                         <th>操作</th>
202                     </tr>
203                 </thead>
204                 <tbody>
205                     <tr>
206                         <td>汤姆</td>
207                         <td>1998-10-23</td>
208                         <td>135012345678</td>
209                         <td>园丁路123号</td>
210                         <td>
211                             <a class="btn btn-success btn-xs" href="#">详情</a>
212                         </td>
213                     </tr>
214                     <tr>
215                         <td>杰瑞</td>
216                         <td>1999-11-23</td>
217                         <td>135012345670</td>
218                         <td>园丁路124号</td>
219                         <td>
220                             <a class="btn btn-info btn-xs" href="#">修改</a>
221                         </td>
222                     </tr>
223                     <tr>
224                         <td>玛丽</td>
225                         <td>1997-01-08</td>
226                         <td>135012345878</td>
227                         <td>园丁路125号</td>
228                         <td>
229                             <a class="btn btn-danger btn-xs" href="#">删除</a>
230                         </td>
231                     </tr>
232                     <tr>
233                         <td>马修</td>
234                         <td>1996-10-23</td>
235                         <td>135055345678</td>
236                         <td>园丁路127号</td>
237                         <td>
238                             <a class="btn btn-primary btn-xs" href="#">提交</a>
239                         </td>
240                     </tr>
241                     <tr>
242                         <td>贝斯</td>
243                         <td>1990-09-23</td>
244                         <td>135015675678</td>
245                         <td>园丁路132号</td>
246                         <td>
247                             <a class="btn btn-warning btn-xs" href="#">查询</a>
248                         </td>
249                     </tr>
250                 </tbody>
251             </table>
252 
253             <h2>带边框的表格</h2>
254             <table class="table table-bordered">
255                 <thead>
256                     <tr>
257                         <th>姓名</th>
258                         <th>生日</th>
259                         <th>电话</th>
260                         <th>住址</th>
261                         <th>操作</th>
262                     </tr>
263                 </thead>
264                 <tbody>
265                     <tr>
266                         <td>汤姆</td>
267                         <td>1998-10-23</td>
268                         <td>135012345678</td>
269                         <td>园丁路123号</td>
270                         <td>
271                             <a class="btn btn-success btn-xs" href="#">详情</a>
272                         </td>
273                     </tr>
274                     <tr>
275                         <td>杰瑞</td>
276                         <td>1999-11-23</td>
277                         <td>135012345670</td>
278                         <td>园丁路124号</td>
279                         <td>
280                             <a class="btn btn-info btn-xs" href="#">修改</a>
281                         </td>
282                     </tr>
283                     <tr>
284                         <td>玛丽</td>
285                         <td>1997-01-08</td>
286                         <td>135012345878</td>
287                         <td>园丁路125号</td>
288                         <td>
289                             <a class="btn btn-danger btn-xs" href="#">删除</a>
290                         </td>
291                     </tr>
292                     <tr>
293                         <td>马修</td>
294                         <td>1996-10-23</td>
295                         <td>135055345678</td>
296                         <td>园丁路127号</td>
297                         <td>
298                             <a class="btn btn-primary btn-xs" href="#">提交</a>
299                         </td>
300                     </tr>
301                     <tr>
302                         <td>贝斯</td>
303                         <td>1990-09-23</td>
304                         <td>135015675678</td>
305                         <td>园丁路132号</td>
306                         <td>
307                             <a class="btn btn-warning btn-xs" href="#">查询</a>
308                         </td>
309                     </tr>
310                 </tbody>
311             </table> 
312 
313             <h2>响应式表格</h2>
314             <div class="table-responsive">
315                 <table class="table">
316                     <thead>
317                         <tr>
318                             <th>姓名</th>
319                             <th>生日</th>
320                             <th>电话</th>
321                             <th>住址</th>
322                             <th>操作</th>
323                         </tr>
324                     </thead>
325                     <tbody>
326                         <tr>
327                             <td>汤姆</td>
328                             <td>1998-10-23</td>
329                             <td>135012345678</td>
330                             <td>园丁路123号</td>
331                             <td>
332                                 <a class="btn btn-success btn-xs" href="#">详情</a>
333                             </td>
334                         </tr>
335                         <tr>
336                             <td>杰瑞</td>
337                             <td>1999-11-23</td>
338                             <td>135012345670</td>
339                             <td>园丁路124号</td>
340                             <td>
341                                 <a class="btn btn-info btn-xs" href="#">修改</a>
342                             </td>
343                         </tr>
344                         <tr>
345                             <td>玛丽</td>
346                             <td>1997-01-08</td>
347                             <td>135012345878</td>
348                             <td>园丁路125号</td>
349                             <td>
350                                 <a class="btn btn-danger btn-xs" href="#">删除</a>
351                             </td>
352                         </tr>
353                         <tr>
354                             <td>马修</td>
355                             <td>1996-10-23</td>
356                             <td>135055345678</td>
357                             <td>园丁路127号</td>
358                             <td>
359                                 <a class="btn btn-primary btn-xs" href="#">提交</a>
360                             </td>
361                         </tr>
362                         <tr>
363                             <td>贝斯</td>
364                             <td>1990-09-23</td>
365                             <td>135015675678</td>
366                             <td>园丁路132号</td>
367                             <td>
368                                 <a class="btn btn-warning btn-xs" href="#">查询</a>
369                             </td>
370                         </tr>
371                     </tbody>
372                 </table>
373             </div>          
374         </div>             
375         <script src="js/jquery-1.11.3.js"></script>
376     </body>
377 </html>

　　7、排版和代码相关标签和样式

　　.list-unstyled　　　　不带提示符

　　.list-inline　　　　　水平列表

查看全文

相关阅读:
网络处理1-异步GET请求
 <十二>读<<大话设计模式>>之状态模式
 oracle的shared、dedicated模式解析
 java 调用ant的自己定义task，默认不是build.xml 的一点问题
 【Android开发-8】生命周期，Activity中打开另外一个Activity
Robot Framework自己主动化測试框架之我见
 三张图教你生成一个Android jar 库。
Array types are now written with the brackets around the element type问题的解决方法
 HDU 4085 Peach Blossom Spring 斯坦纳树状态压缩DP+SPFA
Java 线程池ThreadPoolExecutor简单应用

原文地址：https://www.cnblogs.com/xlb-happymoment/p/6890140.html