什么是Bootstrap?

Bootstrap是一个流行的响应式框架。

它能干什么？

Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调响应式设计的概念。

通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。你仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：

适配图片

当你想要在不同的页面宽度上都能适配你的图片，通过Bootstrap，我们要做的只是给图片添加 img-responsive class属性。这样图片的宽度就能完美地适配你的页面的宽度了。

居中

我们在使用Bootstrap时，我们可以通过居中头部元素来使它看起来更棒。我们所要做的只是把text-center class属性添加给需要居中的元素。

Button

Bootstrap有它自己的button按钮风格，在button元素中给它添加btn class 属性。通常情况下，你的button元素仅与它所包含的文本一样宽。通过使其成为块级元素，你的按钮将会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行。(注意，这些按钮仍然需要btn class)添加Bootstrap的btn-block class 到你的按钮。

Bootstrap自带了一些预定义的按钮颜色

深蓝色btn-primary是你的应用的主要颜色，被用在那些用户主要采取的操作上。添加Bootstrap的btn-primary class 属性到按钮标签上。（注意：这个按钮仍然需要btn和btn-block属性）

浅蓝色btn-info被用在那些用户可能会采取的操作上。添加Bootstrap的btn-primary class 属性到按钮标签上。（注意：这些按钮仍然需要btn和btn-blockclass属性）

红色btn-danger被用来提醒用户该操作具有“破坏性”，例如删除一张图片。添加Bootstrap的btn-danger class 属性到按钮标签上。(注意：这些按钮仍然需要btn和btn-blockclass属性）

Bootstrap 使用一种响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。

Bootstrap 中大多数的class属性都可以设置于div元素中。

假设在我们创建的网页中，将会使用col-xs-*，其中xs是 extra small 缩写（应用于较小的屏幕，比如手机屏幕），*是你需要填写的数字，代表在一行中,各个元素应该占的列宽。

把需要并排排列的按钮一并放入一个<div class="row">元素中；然后，其中的每一个按钮都需要各自被一个<div class="col-xs-4">元素包裹。

当div元素设置了 class 属性row之后，那几个按钮便可嵌入其中。

Bootstrap使用响应式栅格系统，这使得把元素放入行内并为每个元素指定宽度变得很容易。大部分的 Bootstrap的 class 都可以被用在 div 元素上。这张图展示了 Bootstrap 的12栏栅格布局是如何工作的：

Bootstrap 有一个 class 属性叫做 well，它的作用是为设定的列创造出一种视觉上的深度感（一种视觉上的效果）。

Bootstrap 还有一种属于按钮的 class 属性叫做 btn-default 。

了解Bootstrap