先說點題外話，如果想直接進入bootstrap正題請從第二段開始。周五面試一個小公司，給了我一個psd圖讓我用最快的時間還願出這個靜態頁面，要求是能保證兼容性以及web響應式各種屏幕正常顯示。周五晚上開始着手做到了凌晨，然后周六睡了一天的覺補回來，發現現在精力真不比大學畢業。周天放松了一天，爐石新版本巫妖王的騎士剛開，必須玩一下。TI7newbee輸了。中國新歌聲這屆真的不行。中國有嘻哈到目前為止最喜歡小青龍的才氣（可惜聲音一般），希望帶來更多好聽的歌，PGone應該是奪冠熱門，現場氣氛被帶動到爆！說真的這比賽真TM的假，但是不知道為什么還是想看下去。
進入正題：
1、用bootstrap首先到中文官網下載包：http://v3.bootcss.com/，版本選擇3.3.7。
2、新建文件對文件進行划分，將下載的bootstrap包放到lib文件下，lib文件存放從外部引入的類庫（如jquery、bootstrap）
3、創建index.html文件並引入bootstrap到html。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>shenma</title> <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"><!-- 引入bootstrap樣式表 --> <!-- 條件注釋，當版本小於IE9引入 --> <!--[if lt IE 9]> <script src="lib/html5shiv/html5shiv.min.js"></script> <script src="lib/respond/respond.min.js"></script> <![endif]--> <link rel="stylesheet" href="css/main.css"> </head> <body> <!--在這下面進行書寫--> <!--在dom加載完后再執行后面的script--> <!-- 引入jquery，因為bootstrap依賴jquery2.0以上版本所以需要在bootstrap之前引用 --> <script src="lib/jquery/jquery.js"></script> <!-- 引入bootstrap --> <script src="lib/bootstrap/js/bootstrap.js"></script> <!-- 引入自己的JS --> <script src="js/main.js"></script> </body> </html>
4、現在可以使用bootstrap書寫代碼了，首先介紹下container（俗稱版心）類用於固定寬度且居中的響應式布局容器。我們可以在container下包裹row，row里面嵌套col-lg-*/col-md-*/col-sm-*/col-xs-*來完成響應式格柵布局。通過媒體查詢檢測屏幕寬度調整一行（row）中展現的列（col）數。
下一篇應該會針對網頁中作為banner的長條圖來進行處理。