Head First Bootstrap

Bootstrap是Twitter开发的一套前端开发库,使用它可以快速开发Web2.0风格的页面,并且符合响应式设计。要使用Bootstrap,拢共分三步。

可以在Bootstrap官网下载源码添加到自己的项目中,也可以在HTML中添加Bootcss提供的CDN

使用CDN的好处是,服务器会自动选取最近的节点来提供文档的下载;另一方面,当用户之前浏览其他网页的时候如果加载过了这个文档,在访问我们的站点时就会从缓存中读取。

改造自己的HTML

只要为自己的HTML元素赋上特定的类名,就可以修改各个元素的外观甚至行为。

例如,要为按钮设置样式,只需要写下面的代码,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<button type="button" class="btn btn-default">Default</button>


<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

就会得到这样的效果:

Bootstrap按钮效果

另外,Bootstrap还提供了响应式的导航条,会根据浏览器的分辨率自动调整样式,在移动客户端上会变成弹出式下拉菜单,效果很棒。使用Bootstrap的栅格系统,可以轻松完成页面的布局,并且可以自适应分辨率。

所有这些,都不需要写一行CSS或JS代码。

定制Bootstrap

当你用完爽过了之后,会发现所有用Bootstrap默认样式做出来的东西都是一副面孔,逼格瞬间下降了。这个时候就需要定制Bootstrap了。当然,已经有很多为Bootstrap开发的主题,比如Bootswatch。除此之外,还可以通过在这里自定义LESS变量来定制Bootstrap。设置完毕后下载编译好的CSS和JS文档即可。

Bootstrap自身提供了200个字体图标供我们使用。这些图标并不是图片,而是字体,可以不失真调整大小,自定义颜色、阴影等一切CSS能控制的样式。同样,只需要为<span>赋上特定的类名即可。如果丧心病狂的你认为这200个还不够用的话,我们还有Font Awesome,总有一款适合你。