学习Bootstrap

在本次实习项目中，我负责的是系统的网页前端开发。为了实现开发的快速和高效，我们选择了结合Bootstrap框架来进行前端开发。

在以前的其他项目中，我对Bootstrap有过初步的接触，但了解并不深入，使用也不熟练。因此，我先花费了一些时间对Bootstrap框架进行了比较全面的学习，参考的教程是http://www.runoob.com/bootstrap/bootstrap-tutorial.html 【 Bootstrap教程|菜鸟教程】。

接下来的内容是记录一些Bootstrap教程中我认为比较常用或者有记忆价值，以后可能还会需要查阅的内容。

1.适应不同的移动设备的屏幕尺寸

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

name="viewport"是固定的书写  

content中 width=device-width表明网页的宽度将被设置为该移动设备的屏幕宽度

                  initial-scale=1.0表示初始网页缩放比为1：1，也就是没有任何缩放。

通常情况下，为了使得用户不能随意缩放屏幕大小，只能通过滚动屏幕来浏览网页内容，我们通常会在content中加入下列两个属性设置：

maximum-scale=1.0

user-scalable=no

通过设定最大缩放比和设置用户禁用缩放功能，我们就可以让用户只能选择上下滑动来浏览网页，这种方式是当前大多数适配移动设备的网页会采用的，因为这样浏览起来会让用户觉得原生的网页就是这个样子的，也不会因为误操作改变网页的布局和画面。

在html文件中具体写法如下：

<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">

2.网页中图片文件的自适应

在网页中我们通常会用到许多图片文件，当在实现相册等需要用到不止一张图片的功能时，我们通常需要使图片保持一致的尺寸或大小，或者在不同的设备上，网页中的图片显示不同的大小。

Bootstrap中提供了img-responsive类用于实现图片的自适应。

样例代码如下：

<img src="..." class="img-responsive" alt="自适应图像">

这个类的具体属性如下：

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

可以看到，该类设置了图像的 max-width属性为 100%， height自动，实现了图像的按比例缩放并且不超过它的父元素的尺寸。

从属性设置中我们可以看出，为了实现图像的自适应，其父元素也必须是自适应的，否则在不同的设备上并不能实现图像的自适应缩放。

举例如下：

html中代码：

<div class="container">
   <div class="logo">
        <img src="img/img01.png" class="img-responsive" />
   </div>
</div>

因为Bootstrap中没有logo这个类，因此也没有设定它的宽度和高度。

若自己在css文件中定义logo类如下：

.logo {
  width: 500px;
}

那么图片是无法实现对不同设备的屏幕大小自适应的。

应该修改为类似为下面的代码实现

.logo {
  width: 50%;
}

3.Bootstrap网格系统的使用

网格系统是Bootstrap最重要的特点之一。

使用注意点有以下几点：

1.行必须放在.container class里面，以获得适当的对齐方式和内边距

2.只有列可以是行的直接子元素，内容应该放在列中

3.预定义的网格类可以帮助快速创建网格，比如.col-xs-3

4.网格的列数是随着屏幕尺寸的增加自动增多的，最多有12列

4.媒体查询

Bootstrap默认是没有媒体查询的，因为该框架的设计就是响应式的。而媒体查询的作用也是针对不同的屏幕尺寸，使某些元素展现特定的式样和属性，也就是我们常说的手机适配问题。

媒体查询的代码通常在css文件中这样书写：

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }