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