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

時間 2019-11-09

標籤開始 web 移動 bootstrap 欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......css

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的探索之旅吧！html

1、常見的響應式框架

隨着Web應用變的愈來愈複雜，在大量的開發過程當中咱們發現有許多功能模塊很是類似，好比輪播圖、分頁、選項卡、導航欄等，開發中每每會把這些具備通用性的功能模塊進行一系列封裝，使之成爲一個個組件應用到項目中，能夠極大的節約開發成本，將這些通用的組件縮合到一塊兒就造成了前端框架。前端

常見的響應式框架有：html5

一、Bootstrapjquery

官網：http://www.bootcss.com/git

簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。github

來自 Twitter，粉絲衆多，是目前最受歡迎的前端框架。web

二、Amaze UIbootstrap

官網：http://amazeui.org/前端框架

中國首個開源 HTML5 跨屏前端框架。

Amaze ~ 妹子UI，國人開發，後起之秀！

三、Framework7

官網：http://www.framework7.cn/

Framework7 是一款免費、開源的移動HTML框架，主要用於開發混合手機App或者網頁App，某些應用場景的體驗幾乎與原生開發的 iOS 和 Android 應用如出一轍，同時也是一款不可獲取的應用原型快速開發及展現工具。

Framework7 主要的做用就是讓你有機會可以使用 HTML，CSS 和 JavaScript 簡單明瞭地開發 iOS 和 Android 應用。Framework7 是徹底開放的，它徹底沒有限制你進行打開腦洞的創造，同時還提供了一些解決方案。

Framework7 並不支持全部平臺。爲了給你帶來最好的體驗感覺，它只專一於 iOS 和 Google Material 設計風格。

2、bootstrap

Bootstrap是當前最流行的前端UI框架(有預製界面組件)

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。

Bootstrap是基於HTML5和CSS3開發的，它在jQuery的基礎上進行了更爲個性化和人性化的完善，造成一套本身獨有的網站風格，併兼容大部分jQuery插件。

Bootstrap 的全部 JavaScript 插件都依賴 jQuery。

一、BootStrap的版本瞭解

2.x.x:兼容性好 / 代碼不夠簡潔，功能不夠完善
3.x.x:穩定性好,放棄了IE6-IE7,對IE8的支持通常 /偏向於響應式佈局開發，移動設備優先的web項目開發
4.x.x:測試階段，偏向於響應式，移動設備

二、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>

三、bootstrap 佈局容器

bootstrap 的 css 樣式中，有一個起着支撐整個頁面框架的容器，也叫佈局容器，它相似於咱們的版心結構。

一、.container 實現固定寬度並支持響應式佈局的容器。

當屏幕寬度 > 1200，則頁面寬度固定爲 1170px
當屏幕寬度 992~1200，則頁面寬度固定爲 970px
當屏幕寬度 768~992，則頁面寬度固定爲 750px
當屏幕寬度 < 768，則頁面寬度固定爲 100%.

二、.container-fluid ：實現寬度爲全屏 100% 的容器。

四、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能夠再次嵌套在列中。若是不能填滿整列，則默認從左排列，若是超出，則換行展現。

五、列排序

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>