標籤：最快 device 網頁 one href class lang charset alt
先說點題外話，如果想直接進入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的長條圖來進行處理。
用bootstrap寫一個簡單的靜態網頁
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
