Bootstrap学习系列（一）之简介与概述

最近在学习响应式网站的搭建，所以写个系列文章来巩固一下。

一、首先在搭建响应式网站之前，我们要知道响应式系统的优缺点，和什么类型的网站适合使用响应式的布局。

1、什么是响应式网站：

　　响应式的网站也就是自适应，就是可以自动识别屏幕宽度、并做出相应调整的网页设计，以识别各种设备（电脑，手机，平板）。目前这种设计已经出现在越来越多的国内网站上。

2、响应式网站的优点：    

1. 随着移动设备越来越多，可以提升用户体验。
2. 该设计没有网页版本区分，所以SEO的策略保持一致。
3. 可以避免重复内容，专心维护这一个网页。
4. 保持网页的原有链接。
5. 开发人员只需要开发一套系统就能在各种设备上运行，降低开发成本。

3、响应式网站的缺点：

　　1. 加载的资源文件太多（为了适应不同的设备，可能需要编写多套不同的CSS），导致在移动设备端打开网站速度过慢（一般移动端可能使用3G，4G等网络）。

　　2.自由度太低，局限性太大，由于需要同时的适应多种设备，必然会导致可以选择的设计方案减少，局限性太大。

　　3.只支持一些主流的就新的浏览器，兼容性是一个很难解决的问题。需要花费大量的时间在兼容性上。

　　4.对开发人员对前端技术要求太大。

4、哪些网站适合响应式的布局：

　　页面排版简单，内容简单的网站(一些内容型的网站：新闻的浏览)，一些大型的网站不建议使用响应式的布局。

　　国内的一些出名的响应式网站：http://www.pingwest.com/（PingWest中文网）

二、bootstrap的概览。

1、首先的你网站得在支持HTML5的环境下运行。

2、最新的Bootstrap3是以移动设备优先的。

为了保证我们使用移动设备浏览网站时，不会进行自动缩放，我需要通过为视口（viewport）设置 meta 属性为 user-scalable=no来禁止缩放功能。

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

content属性值 :

     width:可视区域的宽度，值可为数字或关键词device-width。

     height:同width。

     intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

     maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别， maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

     user-scalable:是否可对页面进行缩放，no 禁止缩放。

3、Bootstrap使用了Normalize.css来增强跨浏览器表现的一致性。

4、布局容器.Container和.Container-fluid两个布局容器不能互相嵌套使用。

.Container:类用于固定宽度并支持响应式布局的容器。

　　　　<div class="container">

  　　　　...

　　　　</div>

.container-fluid :类用于100%宽度，占据全部视口（viewport）容器。（关于什么是viewport请浏览http://zhanchaojiang.iteye.com/blog/1470586）

　　　　<div class="container-fluid">
  　　　　...
　　　　</div>

以上是对bootstrap使用的一个大概简介，下一章将会介绍什么是栅格系统。