一、常見的響應式架構大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......
- github：github.com/Daotin/Web
- 公眾號：Web前端之巔
- 部落格園：http://www.cnblogs.com/lvonve/
- CSDN：blog.csdn.net/lvonve/
在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。現在就讓我們一起進入 Web 前端學習的探索之旅吧！
隨著Web應用變的越來越複雜，在大量的開發過程中我們發現有許多功能模組非常相似，比如輪播圖、分頁、選項卡、導覽列等，開發中往往會把這些具有通用性的功能模組進行一系列封裝，使之成為一個個組件應用到項目中，可以極大的節約開發成本，將這些通用的組件縮合到一起就形成了前端架構。
常見的響應式架構有：
1、Bootstrap
官網：http://www.bootcss.com/
簡潔、直觀、強悍的前端開發架構，讓web開發更迅速、簡單。
來自 Twitter，粉絲眾多，是目前最受歡迎的前端架構。
2、Amaze UI
官網：http://amazeui.org/
中國首個開源 HTML5 跨屏前端架構。
Amaze ~ 妹子UI，國人開發，後起之秀！
3、Framework7
官網：http://www.framework7.cn/
Framework7 是一款免費、開源的移動HTML架構，主要用於開發混合手機App或者網頁App，某些應用情境的體驗幾乎與原生開發的 iOS 和 Android 應用一模一樣，同時也是一款不可擷取的應用原型快速開發及展示工具。
Framework7 主要的作用就是讓你有機會能夠使用 HTML，CSS 和 JavaScript 簡單明了地開發 iOS 和 Android 應用。Framework7 是完全開放的，它完全沒有限制你進行開啟腦洞的創造，同時還提供了一些解決方案。
Framework7 並不支援所有平台。為了給你帶來最好的體驗感受，它只專註於 iOS 和 Google Material 設計風格。
二、bootstrapBootstrap是當前最流行的前端UI架構(有預製介面組件)
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 架構，用於開發響應式布局、行動裝置優先的 WEB 項目。
Bootstrap是基於HTML5和CSS3開發的，它在jQuery的基礎上進行了更為個人化和人性化的完善，形成一套自己專屬的網站風格，併兼容大部分jQuery外掛程式。
1、BootStrap的版本瞭解Bootstrap 的所有 JavaScript 外掛程式都依賴 jQuery。
<!--說明頁面是html5頁面--><!DOCTYPE html><!--頁面使用的語言環境--><html lang="zh-CN"><head> <!--指定當前頁面的字元編碼--> <meta charset="utf-8"> <!--如果是IE，會使用最新的渲染引擎進行渲染--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--標準的視口設定--> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0"> <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap核心樣式檔案 --> <link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries: 這兩個檔案的引入是為了支援IE8下面的html5元素和媒體查詢：因為在IE8下面預設不支援HTML5和媒體查詢，所以需要引入兩個外掛程式--> <!-- WARNING: Respond.js doesn't work if you view the page via file:// 如果通過file://來查看檔案，那麼respond.js檔案不能正常工作，說明必須在http://形式下訪問才有用--> <!--html5shiv.min.js：為了在IE8下面支援HTML標籤 respond.min.js：為了在IE8下面支援媒體查詢--> <!--[if lt IE 9]> <!--只有IE9之前才會載入這兩個檔案 lt:less than--> <script src="../lib/html5shiv/html5shiv.min.js"></script> <script src="../lib/respond.js/respond.js"></script> <![endif]--></head><body><h1>你好，世界！</h1><!-- jQuery (necessary for Bootstrap's JavaScript plugins) bootstrap是依賴jquery的--><script src="../lib/jquery/jquery.js"></script><!-- Include all compiled plugins (below), or include individual files as needed bootstarp核心js檔案--><script src="../lib/bootstrap/js/bootstrap.min.js"></script></body></html>bootstrap 的 css 樣式中，有一個起著支撐整個頁面架構的容器，也叫版面配置容器，它類似於我們的版心結構。
1、.container 實現固定寬度並支援響應式布局的容器。
當螢幕寬度 > 1200，則頁面寬度固定為 1170px當螢幕寬度 992~1200，則頁面寬度固定為 970px當螢幕寬度 768~992，則頁面寬度固定為 750px當螢幕寬度 < 768，則頁面寬度固定為 100%.2、.container-fluid ：實現寬度為全屏 100% 的容器。
概念：Bootstrap 提供了一套響應式、行動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會預設分為12列。
柵格系統用於通過一系列的行（row）與列（column）的組合來建立頁面配置，你的內容就可以放入這些建立好的布局中。
“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作為行（row）”的直接子項目。你可以使用類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速建立柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來建立語義化的布局。
通過為“列（column）”設定 padding 屬性，從而建立列與列之間的間隔（gutter）。通過為 .row 元素設定負值 margin 從而抵消掉為 .container 元素設定的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
柵格系統中的列是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個 .col-xs-4 來建立。
如果一“行（row）”中包含了的“列（column）”大於 12，多餘的“列（column）”所在的元素將被作為一個整體另起一行排列。
樣本：
<div class="row"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div></div>解釋：上面四個div，如果在超小螢幕上就 100%顯示（佔12柵格）；在小螢幕上，每個div佔50%顯示；在中等螢幕上，每個div佔25%顯示；在大螢幕上，每個div佔33.33%顯示。
柵格參數：
.col-xs-：超小螢幕 手機 (<768px)
.col-sm-: 小螢幕 平板 (≥768px)
.col-md-: 中等螢幕 案頭顯示器 (≥992px)
.col-lg-: 大螢幕 大案頭顯示器 (≥1200px)
注意：
1.柵格系統是往上相容的：意味著小螢幕上的效果在大螢幕上也是可以正常顯示的人，但是大螢幕上的設定在小螢幕上卻無法正常顯示。
2.Row可以再次嵌套在列中。如果不能填滿整列，則預設從左排列，如果超出，則換行展示。
5、列排序col-xs-offset-n：往右位移 n 個柵格，但是會影響後面所有元素也位移 n 個柵格。（內部通過 margin-left 實現的）col-xs-push/pull-n：push 往右推，pull 往左拉。往右位移 n 個柵格，可能會與後面的元素重疊。（內部實現原理通過定位實現）列嵌套就是列中還可以嵌套行，注意不能嵌套版心 container 和 container-fluid。
因為：
如果在外層沒有再包含container,那麼嵌套列的寬度就是參參照當前所在的柵格；
如果外層添加了container,那麼參照就是核心樣式檔案所設定的容器寬度
<div class="container"> <div class="row"> <div class="col-xs-1">1</div> <div class="col-xs-1">2</div> <div class="col-xs-6"> <!-- 1.如果在外層沒有再包含container,那麼嵌套列的寬度就是參參照當前所在的柵格 2.如果外層添加了container,那麼參照就是核心樣式檔案所設定的容器寬度--> <!--<div class="container">--> <div class="row"> <div class="col-xs-6">3</div> <!--這裡的6占的是直接父div的一半，而不是container的一半--> <div class="col-xs-6">4</div> </div> <!--</div>--> </div> <div class="col-xs-1">4</div> <div class="col-xs-1">5</div> <div class="col-xs-1">6</div> <div class="col-xs-1">7</div> </div></div>（無向上相容，內部實現是一個具體的範圍，沒有波及到其他地區）
.hidden-xs ：在超小螢幕下不可見
.hidden-sm ：在小螢幕下不可見
.hidden-md ：在中等螢幕下不可見
.hidden-lg ：在大螢幕下不可見
樣本：
<div class="container"> <div class="row"> <div class="col-xs-1 hidden-sm">1</div> <!--在小螢幕下不可見--> <div class="col-xs-1 hidden-xs">2</div> <!--在超小螢幕下不可見--> <div class="col-xs-6 hidden-lg"> <!--在大螢幕下不可見--> <div class="col-xs-1">4</div> <div class="col-xs-1">5</div> <div class="col-xs-1">6</div> <div class="col-xs-1">7</div> </div></div>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
