1. 下载
下载最新版 Bootstrap。
注意:3.0 以上版本不支持 IE7-
2. 准备模板
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>标题</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </head> <body> ... </body> </html> |
3. 填写内容
1. 最外层包裹
使用
|
1 2 3 4 |
<div class="container"> ... </div> |
或者
|
1 2 3 4 |
<div class="container-fluid"> ... </div> |
2. 分段包裹
将你的网页 “分段”，每一段用
|
1 2 3 4 |
<div class="row"> ... </div> |
包裹
3. 每一段中的内容
在不用 bootstrap 的情况下，通常都是自己写 div 分栏，每一栏里面填写东西。
现在有了 Bootstrap，分栏的任务就交给它了。Bootstrap 采用 12 格流布局，当成 Table 用也是可以的。
每一栏用
|
1 2 3 4 |
<div class="col-AA-BB"> ... </div> |
包裹。
注意：每一行（row）里面子元素必须为列（col），否则显示出错。所有的东西都在列里面写。列里面可以嵌套列。
AA 表示 “什么屏幕及以上使用这个效果”，BB 表示 “使用这个效果的时候这一栏是多宽”。“宽度” 为 1～12 的整数。如果 “屏幕” 小于设定，将会撑满宽度。
比如，class="col-xs-2"表示在最小屏幕及以上的设备中使用这个样式。这一栏宽度是 2。
比如，class="col-lg-6"表示在 Large 屏幕及以上的设备中使用这个样式。这一栏的宽度是 6。如果屏幕小于 Large，那么自动变成 100% 的宽度并进行堆叠（就像是没有 css 的时候那样的效果）。
如果不想每次都从最左边开始显示，那么可以设置 “列偏移”。格式为 col-AA-offset-BB。含义同上。
如果想自定义列的顺序，那么可以设置 “列排序”。格式为 col-AA-push-BB。含义同上。
好了，来一个综合一点的例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<body> <div class="container-fluid"> <div class="row"> <div class="col-xs-2"> balabala </div> <div class="col-xs-3 col-xs-offset-3"> balabala </div> </div> <div class="row"> <div class="col-xs-2 col-md-4"> balabala </div> <div class="col-xs-3 col-xs-offset-3 col-lg-6 col-lg-offset-2"> balabala </div> </div> <div class="row"> </div> </div> </body> |
缩小一下显示器试试。
记得加上这个，效果会明显一点
|
1 2 3 4 |
*{ outline:1px dashed red; } |
4. 各种组件
各种组件都是 “用到哪儿写到哪儿” 的。
css 样式一股脑塞到 class=" "里面就好，样式就会叠加了。
有些是组合起来用的，有些必须有规定写法，有些是加上 style 就行。
比如，写一个按钮：
|
1 2 |
<button type="button" class="btn btn-default">按钮</button> |
然后我想让它变一个颜色：
|
1 2 |
<button type="button" class="btn btn-info">按钮</button> |
再变一个大小：
|
1 2 |
<button type="button" class="btn btn-info btn-lg">按钮</button> |
有时候我想让一个 a 标签伪装成一个按钮：
|
1 2 |
<a class="btn btn-info btn-lg">按钮</a> |
JS 组件我用着一直悲剧，就不说了。
5. 关于其他一些东西
编译 css 的语言我真的不会。所以看到这些东西就跳，跳，跳，然后文档就看完了？？！！
6. 写在最后
用 Bootstrap 能很快地写出一个十分简洁的网页。但是呢，如果纯用它，网页也就剩下简洁了。还有，设计、构图，这些东西必须在纸上完成，再放到电脑上。否则只用代码写，然后再看效果，速度十分慢。
Bootstrap 简单着用的话十分简单，搞定布局就好了。如果真真正正使用，那种高端的，还得去学 Css 编程语言。
当觉得 Bootstrap 自带的组件满足不了你的时候，自己去找其他 JS 吧。