响应式设计（自适配）

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

2.例子：

..

..

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

4.既然我们在使用Bootstrap，我们可以通过居中头部元素来使它看起来更棒。 我们所要做的只是把text-center class属性添加给 h2 元素。
记住：你可以用空格分开多个class来为同一个元素添加多个 class 属性， 就像这样：

your text

5.Bootstrap有它自己的 button 按钮风格， 看起来要比默认的按钮好看得多。
在三只猫咪图片下面创建一个新的 button 元素。给它添加 btn class 属性。
Like

6.的 button 元素仅与它所包含的文本一样宽。通过使其成为块级元素，你的按钮将会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行。
注意，这些按钮仍然需要 btn class。
Like

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

浅蓝色 btn-info
Info

红色btn-danger被用来提醒用户该操作具有“破坏性”
Delete

8.Bootstrap 使用一种响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。Bootstrap 中大多数的class属性都可以设置于 div 元素中。
class属性 col-md-* 正被使用。在这里，md 表示 medium (中等的)，* 代表一个数字，它指定了这个元素所占的列宽。通过此图表的属性设置可知，在中等大小的屏幕上(例如笔记本电脑)，元素的列宽被指定了。
在我们创建的 Cat Photo App 中，将会使用 col-xs-* ，其中 xs 是 extra small 缩写（应用于较小的屏幕，比如手机屏幕），* 是你需要填写的数字，代表在一行中,各个元素应该占的列宽

把 Like, Info 和 Delete 三个按钮一并放入一个

元素中；然后，其中的每一个按钮都需要各自被一个

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

Like

Info

Delete

9.通过使用 span 元素，你可以把几个元素放在一起。你甚至可以用此为一个元素的不同部分指定样式。
样式：

Top 3 things cats hate:

Things cats love:

image.png