bootstrap使用心得总结

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

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

以上代码实现了随浏览器宽度的变化container容器的宽度也进行变化。

2.移动设备优先

在html文件中head区域加入这样的一个meta标签，name=“viewpoint”是指这个标签对移动设备生效，content中width=device-width是指宽度为设备宽度，initial-scale=1意思是初始缩放比例为1.

 <meta name="viewport" content="width=device-width, initial-scale=1">

但是在css文档中没有对超小屏幕定义任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的移动设备优先！

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }