從零開始學 Web 之移動Web（七）Bootstrap

阿新 • • 發佈：2019-01-15

一、常見的響應式框架

隨著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>

從零開始學 Web 之移動Web（七）Bootstrap

一、常見的響應式框架

二、bootstrap

1、BootStrap的版本瞭解

2、bootstrap 基本模板

3、bootstrap 佈局容器

4、bootstrap 柵格系統

5、列排序

6、列巢狀

7、響應式工具

【高德地圖API】從零開始學高德JS API（七）——定位方式大揭祕

《從零開始學Swift》學習筆記（Day67）——Cocoa Touch設計模式及應用之MVC模式

《從零開始學Swift》學習筆記（Day60）——Core Foundation框架

從零開始學Kotlin-使用接口（7）

從零開始學習比特幣開發（七）-P2P網路建立流程之生成地址對並連線到指定地址

webpack從零開始構建專案之rem問題（三）

從零開始學習音視訊程式設計技術（七） FFMPEG Qt視訊播放器之SDL的使用

轉載：高德地圖API學習從零開始學高德JS API（一）地圖展現

《從零開始學Swift》學習筆記（Day 57）——Swift編碼規範之凝視規範：文件凝視、文檔凝視、代碼凝視、使用地標凝視

【SpringMvc】從零開始學SpringMvc之資料庫(二)

【SpringMvc】從零開始學SpringMvc之初始化(一)

【SpringMvc】從零開始學SpringMvc之實現使用者登入(三)

【SpringMvc】從零開始學SpringMvc之實現使用者管理(四)

從零開始學Java之五種內部類將執行緒隱藏類中

從零開始學C++之虛擬函式與多型（一）：虛擬函式表指標、虛解構函式、object slicing與虛擬函式、C++物件模型圖

從零開始學Java之單例模式:懶漢模式和飽漢模式

從零開始學C++之IO流類庫（三）：檔案的讀寫、二進位制檔案的讀寫、檔案隨機讀寫

從零開始學Java之出入門衛管理（二）

從零開始學Java之編寫簡單的工程

從零開始學Python3之五——模組

從零開始學 Web 之 移動Web（七）Bootstrap

一、常見的響應式框架

二、bootstrap

1、BootStrap的版本瞭解

2、bootstrap 基本模板

3、bootstrap 佈局容器

4、bootstrap 柵格系統

5、列排序

6、列巢狀

7、響應式工具

相關推薦

從零開始學 Web 之移動Web（七）Bootstrap