BootstrapBootstrap学习笔记(一)

一、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
class=”table-responsive”>

          <div
class=”table”></div>

        </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     
水平列表

  

    

相关文章