Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.
With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.

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

通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。

引入 BootStrap

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

适配图片

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

![](/images/running-cat.jpg)

适配文本

使用Bootstrap，使文本居中，使它看起来更棒。 我们所要做的只是把text-center class属性添加给 h2 元素。

<h2 class="red-text text-center">your text</h2>

适配按钮

通常情况下，你的 button 元素仅与它所包含的文本一样宽。通过使其成为块级元素，你的按钮将会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行。

<button class="btn btn-block">Like</button>

添加Bootstrap的 btn-primary class 属性到按钮标签上，使按钮高亮。

<button class="btn btn-block btn-primary">Like</button>

Bootstrap自带了一些预定义的按钮颜色。浅蓝色 btn-info 被用在那些用户可能会采取的操作上。

<button class="btn btn-block btn-info">Info</button>

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

<button class="btn btn-block btn-danger">Delete</button>

适配网格布局

class row 行
class col-md-* (中等屏幕适配)，col-xs-*(小屏适配)

• 填数字

<div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary">Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info">Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger">Delete</button>
    </div>
  </div>

Font Awesome

Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形，被保存在 .svg 的文件格式中。这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父HTML元素的字体大小。

引入

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

给按钮添加一个icon

<div class="col-xs-4">
      <button class="btn btn-block btn-primary">Like<i class="fa fa-thumbs-up"></i></button>
    </div>

Paste_Image.png