bootstrap响应式css框架

引入

Bootstrap 会根据屏幕大小来动态调整 HTML 元素的大小————因此称为 Responsive Design（响应式设计）。

通过响应式设计，我们将无需额外设计一个手机版的网页， 因为它在任何尺寸的屏幕上看起来都很棒。

任何 Web 应用，都可以通过添加如下代码到 HTML 顶部来引入 Bootstrap 。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

---

img-responsive使图片自适应移动端

通过 Bootstrap，我们仅仅只需要为 image 标签上设置 class 属性为 img-responsive ， 就可以让它完美地适应你的页面的宽度了。

  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive">

---

text-center居中文本

可以使用 Bootstrap 将顶部的元素居中来美化页面。 只需要将 h2 元素的 class 属性设置为 text-center 就可以实现。

---

button

Bootstrap 的 button 元素有着独有的、比默认 HTML 按钮更好的样式风格。
在较大的小猫图片下方创建新的 button 元素。 为它添加 btn 与 btn-default 两个 classes 和 Like 文本。

一般情况下，btn 和 btn-default 两个 classes 修饰的 button 元素宽度与它包含的文本相同；通过为按钮添加 class 属性 btn-block 使其成为块级元素，按钮会伸展并填满页面的整个水平空间，后续的元素会流到这个块级元素的下方，即 “另起一行”。