我们从使用角度，暂时不想要查看bootstrap的源代码，而是直接使用它预编译好的包。包内容如下： {代码...} 包括有： 编译好的CSS和JS (bootstrap.)，和压缩过的css，JS (bootstrap.min.) 还有一个CSS source map文件 (bootstrap.*.map) ，这个文件有些浏览器的开发工具需要它 来自Glyphicons的字体图标 可选的Bootstrap ...

几乎每个人都会想要问，为什么bootstrap布局划分屏幕空间采用的是12等分，而不是别的什么等分？确实奇妙，这里的12太舒服了。它可以被1、2、3、4、6、12共6个数字整除，本来就是用来分空间的系统，当然可以更好的被整除最好了，这样怎么分都愉快。比如

然后继续。每个.container的容器内都可以加入.row作为行，在行内通过col-md-来指定划分每个子元素的占据宽度。解释下col-md- :

只要把增补控件和input的class="input-group"内，其中的增补控件标记为class="input-group-addon"即可。当然，你可以只是做前缀增补，或者只是增加后缀增补，只要把不需要的删除就行了。

我们拿一个常见的登录界面为案例。默认情况下的form，代码是这样的： {代码...} 而通过bootstrap稍加改造，就可以看起来工工整整的很专业，代码是这样的： {代码...} 只需要给form加上class="form-vertical"，给input加上class="form-control"，就可以出来效果。 form的class还可以设置为水平和单行，设置的值分别为form...

可以使用Jumbotron呈现需求非常显眼的重要信息。 像是这样，把需要呈现的内容放到div元素内，并且设置它的class为jumbotron： {代码...} 如果希望这些内容不是左右充满页面，而是流出空间并加上圆角的话，可以把jumbotron放到一个container内： {代码...}

按钮一般用来执行操作，但是也可以设置状态。 状态按钮 单一的按钮可以通过data-toggle="button"设置切换状态： {代码...} 点击一次，按钮切换一次状态，外观因此不同。 或者点击一次显示loading，然后切换回原来的标题。只要加入html： {代码...} 和代码： {代码...} 多选式按钮组 通过属性data-toggle="buttons"可以把...

弹出层包括模态对话框、提示条、popover、alert。它们都可以用来提示或者警告用户，或者显示详细信息。 模态对话框 模态对话框就是一个对话框，它在继续下一步工作前来提示重要信息给用户，并可能会要求用户做出不同操作的选择。 如下代码可以点击一个按钮，弹出模态对话框： {代码...} 模态对话框的DOM结构嵌套的有点深...

使用bootstrap内置类可以把图片套圆角、套圆、套白边： {代码...} 利用好bootstrap的布局能力，做出类似缩略图集的UI很容易： <div class="container"> {代码...} </div>

navbar被称为导航条，一般放到站点的页面头部，用来导航网站。如下展示了一个比较简单的导航条，其中仅有一个用来放置Logo或者站点名称的navbar-brand ，以及两个导航链接：

本文讲解的是三个行内组件，它们可以嵌入到很多其他组件内来达成设计者的交互意图。它们分别是 icon、label、badge。 行内通用标签span，可以应用glyphicon从而变成一个icon： {代码...} 或者应用.badge，变成一个徽章： {代码...} 或者应用label，变成一个标签： {代码...} 当我们看到-default字样的类时，一定会去想试...

标签ul是非常实用的，因为它： 可以在语义上表达一个列表 列表是可以嵌套的 比如这样的例子代码： {代码...} 至于外观，默认的看来确实只能做简单的排版。然而，bootstrap大量采用ul，赋予它新的外观和操作，基于此标签，可以做成list，listgroup、dropdown等通用组件。 list 我们常常需要把默认纵向显示的ul，改成横向...

有时候，你想要把内容放到一个看起来还漂亮的盒子里面，那么就可以考虑panel。panel就是一个可以选择不同的边线样式、还可以有header和footer的盒子。这样一个有头有脚的组件，代码看起来是这样的：

bootstrap是Twitter公司出品的css框架，被前端程序员欣赏并广为采用。那么它给web网页带来了什么呢。我们从一个按钮的样式开始。假设如下代码的网页，页面内只有一个按钮：

bootstrap提供了一个carousel（旋转木马）组件，我们称之为轮播。它可以轮播图片和文字，常常用来展示网站的关键信息。如下就是一个carousel：

Bootstrap 可以用划分栅格的高逼格策略，你只需要几行 CSS 代码，就可以开发出响应式的Web 布局。Bootstrap 在背后默默的完成那些复杂的，有很多浏览器兼容性大坑的工作。