Day03 Bootstrap

Bootstrap是一组用于网站和网络应用程序开发的开源前端（所谓“前端”，指的是展现给最终用户的界面。与之对应的“后端”是在服务器上面运行的代码）框架，包括HTML、CSS及JavaScript的框架，提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展，旨在使动态网页和Web应用的开发更加容易。

Bootstrap响应式设计

使用Bootstrap前端框架进行响应式色剂，集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。（使网页在各种尺寸的终端上均可以较好地显示，无需根据屏幕尺寸再做适配。）

• 使用Bootstrap框架，仅需将：

  <link rel = "stylesheet" href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

添加到html文件开头中。

• container-fluid自适应布局
  采用Bootstrap前端框架，需要将所有的HTML内容放在属性class = "container-fluid"的div标签内，表示网页内容采用自适应布局。

• 图片自适应
  在手机页面中插入一张图片，图片的大小可能超过屏幕的尺寸，只需要在img标签中加入class = img-responsive属性即可解决。
  注：根据屏幕的尺寸来调整图片的宽度，图片的长度依据图片的长、宽比例自动调整，得到最佳的显示效果。

• 标题居中
  在h标签中加入class = "text-center"属性即可。

• Bootstrap风格的按钮
  通过btn属性，美化按钮。

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

通常情况下，button元素仅与所包含的文本同宽。通过使其成为块级元素，按钮将会延展，填满页面整个水平空间。其后的所有元素均在区块的下一行。

使用btn-block属性实现。

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

• 按钮的颜色
  深蓝色：btn-primary属性，应用的主要颜色，用于用户主要采取的操作；
  浅蓝色：btn-info属性，用户可能采取的操作；
  红色：btn-danger属性，可能具有破坏性的操作，如删除。

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

- 行内布局
Bootstrap将多个元素置于一行，并且制定各个元素的宽度。借助`div`标签实现，Bootstrap中多数`class`属性均可以放入`div`标签中。
  ```html
  <div class = "row">
      <div class = "col-xs-2"><button>Like</button></div>
      <div class = "col-xs-2"><button>Hate</button></div>
      <div class = "col-xs-2"><button>Bullshit</button></div>
</div>

注：
col：列；
xs：extra-samll（适用于小屏）；
md：medium（中等的）
*：表示一个数字，代表一行中各个元素的宽度。

• 行内元素<span>...</span>
  通过span标签可以为一个元素的不同部分分别制定样式。