大家好，這里是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......
- github：https://github.com/Daotin/Web
- 微信公眾號：Web前端之巔
- 博客園：http://www.cnblogs.com/lvonve/
- CSDN：https://blog.csdn.net/lvonve/
在這里我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。現在就讓我們一起進入 Web 前端學習的探索之旅吧！
一、常見的響應式框架
隨着Web應用變的越來越復雜，在大量的開發過程中我們發現有許多功能模塊非常相似，比如輪播圖、分頁、選項卡、導航欄等，開發中往往會把這些具有通用性的功能模塊進行一系列封裝，使之成為一個個組件應用到項目中，可以極大的節約開發成本，將這些通用的組件縮合到一起就形成了前端框架。
常見的響應式框架有：
1、Bootstrap
簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。
來自 Twitter，粉絲眾多，是目前最受歡迎的前端框架。
2、Amaze UI
中國首個開源 HTML5 跨屏前端框架。
Amaze ~ 妹子UI，國人開發，后起之秀！
3、Framework7
Framework7 是一款免費、開源的移動HTML框架，主要用於開發混合手機App或者網頁App，某些應用場景的體驗幾乎與原生開發的 iOS 和 Android 應用一模一樣，同時也是一款不可獲取的應用原型快速開發及展示工具。
Framework7 主要的作用就是讓你有機會能夠使用 HTML，CSS 和 JavaScript 簡單明了地開發 iOS 和 Android 應用。Framework7 是完全開放的，它完全沒有限制你進行打開腦洞的創造，同時還提供了一些解決方案。
Framework7 並不支持所有平台。為了給你帶來最好的體驗感受，它只專注於 iOS 和 Google Material 設計風格。
二、bootstrap
Bootstrap是當前最流行的前端UI框架(有預制界面組件)
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式布局、移動設備優先的 WEB 項目。
Bootstrap是基於HTML5和CSS3開發的，它在jQuery的基礎上進行了更為個性化和人性化的完善，形成一套自己獨有的網站風格，並兼容大部分jQuery插件。
Bootstrap 的所有 JavaScript 插件都依賴 jQuery。
1、BootStrap的版本了解
- 2.x.x:兼容性好 / 代碼不夠簡潔，功能不夠完善
- 3.x.x:穩定性好,放棄了IE6-IE7,對IE8的支持一般 /偏向於響應式布局開發，移動設備優先的web項目開發
- 4.x.x:測試階段，偏向於響應式，移動設備
2、bootstrap 基本模板
<!--說明頁面是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>
3、bootstrap 布局容器
bootstrap 的 css 樣式中，有一個起着支撐整個頁面框架的容器，也叫布局容器，它類似於我們的版心結構。
1、.container 實現固定寬度並支持響應式布局的容器。
當屏幕寬度 > 1200，則頁面寬度固定為 1170px
當屏幕寬度 992~1200，則頁面寬度固定為 970px
當屏幕寬度 768~992，則頁面寬度固定為 750px
當屏幕寬度 < 768，則頁面寬度固定為 100%.
2、.container-fluid ：實現寬度為全屏 100% 的容器。
4、bootstrap 柵格系統
概念：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 個柵格，可能會與后面的元素重疊。（內部實現原理通過定位實現）
6、列嵌套
列嵌套就是列中還可以嵌套行，注意不能嵌套版心 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>
7、響應式工具
（無向上兼容，內部實現是一個具體的范圍，沒有波及到其他區域）
.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>