第五章 前端開發學習——Boostrap
第五章 前端開發學習——Boostrap
一、Bootstrap基礎
二、Bootstrap布局
三、Bootstrap組件
四、Bootstrap插件
一、Bootstrap基礎
什麽是Bootstrap（what）：
由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架 簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。
Bootstrap版本：
Bootstrap2、Bootstrap3、Bootstrap4
Bootstrap下載：（前往官網自行下載）
-
-
Bootstrap LESS源碼 （LESS是CSS預處理器）
-
Bootstrap SASS源碼（SASS也是CSS預處理）
Bootstrap CDN服務：
<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可選的Bootstrap主題文件（一般不用引入） --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。務必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
目錄結構：
生產環境版：
導入步驟：
①Bootstrap的js特效是基於jQuery寫的，在導入Bootstrap前，必須先導入jQuery庫。
②導入css樣式
二、Bootstrap布局
1.響應式布局
A）手機屏幕的分辨率
-
-
手機瀏覽器 為了讓 沒有做響應式處理的網頁能夠正常顯示， 自動進行縮放。視口的大小通常會設置為 980px
B）媒體查詢
根據多種媒體可能寫多種media對應的css樣式
@media (min-width:) { 選擇器 { } 選擇器 { } }
<style> body { margin:0; } /*默認 <768px 手機 */ .container { margin:0 auto; width:100%; height:400px; text-align: center; background: pink; } /*媒體查詢*/ /* >= 768 < 992 小屏幕 平板 */ @media (min-width:768px) { .container { width:750px; } .row { } } /* >=992 <1200 中等屏幕 */ @media (min-width:992px) { .container { width: 970px; } } /*>=1200 大屏幕*/ @media (min-width:1200px) { .container { width: 1170px; } } </style>
媒體特效：
min-width
min-height
max-width
max-height
width
height
.........
C）移動設備優先
為了確保適當的繪制和觸屏縮放，需要在 <head> 之中添加 viewport 元數據標簽。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移動設備瀏覽器上，通過為視口（viewport）設置 meta 屬性為 user-scalable=no 可以禁用其縮放（zooming）功能。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感覺。註意，這種方式我們並不推薦所有網站使用，還是要看你自己的情況而定！
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
user-scalable=no 不允許縮放
initial-scale=1 縮放比例
maximum-scale=1最大縮放比例
minimum-scale=1 最小縮放比例
2.柵格系統
A）布局容器
Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。我們提供了兩個作此用處的類。註意，由於 padding 等屬性的原因，這兩種 容器類不能互相嵌套。
.container 類用於固定寬度並支持響應式布局的容器。
<div class="container"> ... </div>
.container-fluid 類用於 100% 寬度，占據全部視口（viewport）的容器。
<div class="container-fluid"> ... </div>
B）柵格系統簡介
Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。下面就介紹一下 Bootstrap 柵格系統的工作原理：
- “行（row）”必須包含在
.container（固定寬度）或.container-fluid（100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。 - 通過“行（row）”在水平方向創建一組“列（column）”。
- 你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作為行（row）”的直接子元素。
- 類似
.row和.col-xs-4這種預定義的類，可以用來快速創建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的布局。 - 通過為“列（column）”設置
padding屬性，從而創建列與列之間的間隔（gutter）。通過為.row元素設置負值margin從而抵消掉為.container元素設置的padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。 - 負值的 margin就是下面的示例為什麽是向外突出的原因。在柵格列中的內容排成一行。
- 柵格系統中的列是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個
.col-xs-4來創建。 - 如果一“行（row）”中包含了的“列（column）”大於 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。
- 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何
.col-md-*柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何.col-lg-*不存在， 也影響大屏幕設備。
C）柵格參數
三、Bootstrap組件
四、Bootstrap插件
第五章 前端開發學習——Boostrap