引入Bootstrap

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

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

改造自己的HTML

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

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

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

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<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的栅格系统，可以轻松完成页面的布局，并且可以自适应分辨率。

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

定制Bootstrap

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

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