bootstrap是Twitter公司出品的css框架，被前端程序员欣赏并广为采用。那么它给web网页带来了什么呢。我们从一个按钮的样式开始。假设如下代码的网页，页面内只有一个按钮：
//vim normal.html
Bootstrap
当使用浏览器查看时:
open normal.html
网页和按钮的外观是浏览器默认提供的。普通而平凡。
然而，当我们引入bootstrap，同样的按钮看起来就有声有色了。至少相当一部分采用了此框架的人是这样看的。
// bootstrap.html
Bootstrap
请打开浏览器查看如下的文件：
open bootstrap.html对比下两个html文件，可以看到，魔术的变化来自于：
多出来了一个css文件的引入，此文件位于bootstrap的cdn服务器上，这样就暂时不必自己下载bootstrap套件，即可看到效果了。
bootstrap的链接是 https://maxcdn.bootstrapcdn.c...
对指定的button元素，应用class，值为btn
bootstrap的大部分效果的应用来自于对class属性的操纵。比如我们可以继续把button改造出各种样子来，一时间，百花齐放：
我们很多人知道，样式起了作用，秘密在于bootstrap.css文件，但是有了此文件，我们甚至不必深入了解css是什么，以及如何做到这样的效果；而只要修改class属性的值，就可以得到各种为人称道的页面展示了。
实际的效果，可以在此处：https://jsfiddle.net/1000copy... 看到。这个网站可以让我们不必写很多html的head和body标签，并且在一屏内同时编写js、html、css，并展示最终网页的效果。
令人不适的地方
老实说，在button标签的情况下，需要在class内写一遍btn，有点重复。但是你只需要知道class的btn说的是外观这件事，前面标签的button说的是语义。语义和外观的分离也能带来好处的。框架只是简单的修改class来控制外观，而不在乎标签到底是什么。这意味着，你可以把它用到很多标签上，从而控制它的外观。比如
button
button
button
- button
- button
- button
只不过，从惯例上来说，我们把a标签、li标签显示成button的样子在不同的场景下会引发困惑，因此不会这样做而已。举出此案例的目的，在于加深class控制外观，标签设置语义的这样的分工的价值和合理性。
另外一个惯例是使用不同的背景色表达不同类型的信息，比如我们看到btn-前缀的一组class，btn-primary、btn-success、btn-info、 btn-warning 、btn-danger这样的惯例也适用于label 、progress-bar、table、list-group、alert等,我们可以看到label的可以class和button的class是对应的。
Default
Primary
Success
Info
Warning
Danger
分别设置不同的背景色用来标识信息的类型差异，从而仅仅从信息的背景色上即可一目了然的理解到信息的差异性。
看到了这样的细节，其实是存在一点让人不舒适的地方的。比如
Default为什么不能写成：
Default
这略微的不适需要适应下，毕竟bootstrap使用起来不过就是改改class就可以得到很棒的效果。
还有更加不爽的地方，比如使用button，考虑到Accessibility（无障碍访问）的需求，可能在bootstrap内看到这样的代码：
属性role的存在，是为了告诉Accessibility类应用（比如屏幕朗读程序，为盲人提供的访问网络的便利程序），这是一个按钮。在html5元素内，标签本身就是有语义的，因此role是不必添加的，至少是不推荐的，但是bootstrap的案例内很多都是有类似的属性和声明的，目的是为了兼容老版本的浏览器（用户代理），如果你的代码使用了html5标签，并且不准备支持老版本的浏览器，不妨不使用role标签。
bootstrap也提供不少可以交互的用户界面元素，此时除了css文件外，还需要引入它提供的js文件，并且此js文件需要依赖jquery，因此也得引入jquery文件。为了方便，我提供了一个html模板，供实验引用：
Bootstrap
参考
https://www.zhihu.com/questio... 黄喜的答案
关于
作者：刘传君
创建过产品，创过业。不好动，读书机器。
可以通过 1000copy#gmail.com 联系到我
出品
http小书 http://www.ituring.com.cn/boo...
Git小书 http://www.ituring.com.cn/boo...