bootstrap使用心得总结

背景介绍：2015年9月份开始接触bootstrap前端框架集，为什么呢，因为它实在是太火了，慕课网、菜鸟教程这些我经常逛的网站上bootstrap都是一个专题了，再加之它简单好上手于是就选了它来入门。
项目：1.电子手册阅读网站的搭建；2.个人博客网站的搭建。

bootstrap的特点：
1.响应式布局
概念：响应式web布局是让用户通过不同尺寸的浏览器都可以获得良好视觉的一种方法。是目前比较流行的一种布局方法。
实现原理：通过CSS3 Media Queries（媒体（设备）查询），媒体查询是让页面内容在不同的媒体环境下运行时可以展示不同的样式（这个样式当然是由我们来书写规定的）。@media是CSS3中规定的属性，它可以实现针对不同媒体设备来设置不同的样式的目的。而且就算是在同一设备中它也可以在你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
Bootstrap主要用到min-width、max-width，以及and语法，用于在不同的分辨率下设置不同的CSS样式。
@media的语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

其中mediatype有print（打印设备）、screen（用于电脑屏幕，平板电脑，智能手机等）、speech（应用于屏幕阅读器等发声设备）；media feature则是用来规定如最大宽度或者最小宽度。

我们来看看bootstrap中布局容器的例子：
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。
如下

固定宽度布局
<div class="container">
  ...
</div>
或者 流式布局
<div class="container-fluid">
  ...
</div>

在bootstrap的css文档中@media属性

1591~1605行

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {