響應式佈局與bootstrap框架

阿新 • • 發佈：2018-12-10

網頁佈局方式

1、固定寬度佈局：為網頁設定一個固定的寬度，通常以px做為長度單位，常見於PC端網頁。

2、流式佈局：為網頁設定一個相對的寬度，通常以百分比做為長度單位。

3、柵格化佈局：將網頁寬度人為的劃分成均等的長度，然後排版佈局時則以這些均等的長度做為度量單位，通常利用百分比做為長度單位來劃分成均等的長度。

4、響應式佈局：通過檢測裝置資訊，決定網頁佈局方式，即使用者如果採用不同的裝置訪問同一個網頁，有可能會看到不一樣的內容，一般情況下是檢測裝置螢幕的寬度來實現。

注：以上幾種佈局方式並不是獨立存在的，實際開發過程中往往是相互結合使用的。

響應式佈局

Responsive design，意在實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。螢幕尺寸不一樣展示給使用者的網頁內容也不一樣，我們利用媒體查詢可以檢測到螢幕的尺寸（主要檢測寬度），並設定不同的CSS樣式，就可以實現響應式的佈局。

我們利用響應式佈局可以滿足不同尺寸的終端裝置非常完美的展現網頁內容，使得使用者體驗得到了很大的提升，但是為了實現這一目的我們不得不利用媒體查詢寫很多冗餘的程式碼，使整體網頁的體積變大，應用在移動裝置上就會帶來嚴重的效能問題。

響應式佈局常用於企業的官網、部落格、新聞資訊型別網站，這些網站以瀏覽內容為主，沒有複雜的互動。

響應式開發

什麼是響應式開發

在移動互聯日益成熟的時候，桌面瀏覽器上開發的網頁已經不能滿足移動端的裝置的展示和閱讀
之前，通常的做法是對移動端單獨開發一套特定的版本
但是，如果移動終端裝置起來越多的時候賦發成本太大，是因為需要做所有螢幕的適配
響應式開發的目的就是:一個網站能夠相容多種終端

在新建的網站上一般都會使用響應式開發
移動web開發和響應式開發是必須具備的技能
演示響應者頁面

響應式開發的原理：媒體查詢：

查詢媒介，查詢到當前螢幕(媒介媒體)的寬度，針對不同的螢幕寬度設定不同的樣式來適應不同螢幕。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。簡單說，你可以設定不同螢幕下面的不同的樣式，達到適配不同的螢幕的目的。

實現方式：通過查詢screen的寬度來指定某個寬度區間的網頁佈局。

超小螢幕（移動裝置） w<768px
小屏裝置 768px-992px 768 <= w <992

中等螢幕 992px-1200px 992 =< w <1200
寬屏裝置 1200px以上 w>=1200

CSS 語法

@media mediatype and|not|only (media feature) {

    CSS-Code;

}

也可以針對不同的媒體使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

媒體型別

值描述

all 用於所有裝置
print 用於印表機和列印預覽
screen 用於電腦螢幕，平板電腦，智慧手機等。
speech 應用於螢幕閱讀器等發聲裝置

媒體功能

值描述

device-height 定義輸出裝置的螢幕可見高度。
device-width 定義輸出裝置的螢幕可見寬度。
max-device-height 定義輸出裝置的螢幕可見的最大高度。
max-device-width 定義輸出裝置的螢幕最大可見寬度。
min-device-width 定義輸出裝置的螢幕最小可見寬度。
min-device-height 定義輸出裝置的螢幕的最小可見高度。
max-height 定義輸出裝置中的頁面最大可見區域高度。
max-width 定義輸出裝置中的頁面最大可見區域寬度。
min-height 定義輸出裝置中的頁面最小可見區域高度。
min-width 定義輸出裝置中的頁面最小可見區域寬度。

簡單案例說明：控制不同螢幕尺寸下的螢幕背景色

<style>
    .container{
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*媒體查詢：注意and後面空格的新增*/
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
        .container{
            width:100%;
            background-color: green;
        }
    }
    /*pad: w >= 768  && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
        .container{
            width:750px;
            background-color: blue;
        }
    }
    /*中等螢幕   w >= 992  && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .container{
            width:970px;
            background-color: pink;
        }
    }
</style>

CSS框架

隨著Web應用變的越來越複雜，在大量的開發過程中我們發現有許多功能模組非常相似，比如輪播圖、分頁、選項卡、導航欄等，開發中往往會把這些具有通用性的功能模組進行一系列封裝，使之成為一個個元件應用到專案中，可以極大的節約開發成本，將這些通用的元件縮合到一起就形成了前端框架。

Bootstrap框架：提高web開發效率

Bootstrap簡介：當前最流行的前端UI框架(有預製介面元件), Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動裝置優先的 WEB 專案

Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷
Bootstrap是基於HTML5和CSS3開發的，它在jQuery的基礎上進行了更為個性化和人性化的完善，形成一套自己獨有的網站風格，併兼容大部分jQuery外掛

為什麼使用Bootstrap:

有自己的生態圈，不斷的更新迭代
提供一套簡潔，直觀，強悍的元件
標準化的html+css編碼規範
讓開發更簡單，提高了開發效率
可以進行自定義擴充套件

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>

Bootstarp全域性css樣式

HTML5 文件型別

<!DOCTYPE html>

<html lang="zh-CN">

 ...

</html>

移動裝置優先
Normalize.css:為了增強跨瀏覽器表現的一致性，使用了 Normalize.css

BootStrap版心容器—佈局容器.

分類：

.container 類用於固定寬度並支援響應式佈局的容器。
.container-fluid 類用於 100% 寬度，佔據全部視口（viewport）的容器。

針對.container,當螢幕寬度>992px的時候，佈局容器寬度為1170px
否則，當寬度>768px的時候，佈局容器寬度為970px
當寬度<768px的時候，佈局容器寬度為100%(750px)

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）”所在的元素將被作為一個整體另起一行排列。

例項：從堆疊到水平排列: 使用單一的一組 .col-md-* 柵格類，就可以建立一個基本的柵格系統，在手機和平板裝置上一開始是堆疊在一起的（超小螢幕到小螢幕這一範圍），在桌面（中等）螢幕裝置上變為水平排列。所有“列（column）必須放在 ” .row 內。

程式碼：

<div class="row">
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
</div>
------------------------------------------------
<div class="row">
   <div class="col-md-8">.col-md-8</div>
   <div class="col-md-4">.col-md-4</div>
</div>
------------------------------------------------
<div class="row">
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4">.col-md-4</div>
</div>
------------------------------------------------
<div class="row">
   <div class="col-md-6">.col-md-6</div>
   <div class="col-md-6">.col-md-6</div>
</div>

簡單說：柵格系統就是規範了你的column佔據的寬度，只不過這個寬度是bootstrap事先規範好了。
柵格系統的意義：移動裝置和桌面螢幕：它可以規範在不同尺寸的螢幕下，當前的列佔據的寬度。或者說一行可以放置幾個列。

程式碼：

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
     <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 </div>
 <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
     <div class="col-xs-6">.col-xs-6</div>
     <div class="col-xs-6">.col-xs-6</div>
</div>

細節：

柵格系統是往上相容的：意味著小螢幕上的效果在大螢幕上也是可以正常顯示的人，但是大螢幕上的設定在小螢幕上卻無法正常顯示。
Row可以再次巢狀在列中。如果不能填滿整列，則預設從左排列，如果超出，則換行展示

柵格系統擴充套件說明：

巢狀列

程式碼：

<div class='container'>
    <div class='row'>
            <div class='col-md-2'>
                   <div class='row'>   
                           <div class='col-lg-6'></div>
                           <div class='col-lg-6'></div>
                    </div>  
            </div>
    </div>
</div>

列偏移

說明：使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。
注意：如果偏移前面的列，那麼會將當前列後面所有的列都往後偏移
程式碼：

<div class="container">
    <div class="row">
        <!--設定列偏移，只在lg螢幕下才會有效果-->
        <div class="col-lg-2">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2  col-lg-offset-5">3</div>
    </div>
</div>

排序

後推：push
前拉：pull
程式碼

<div class="container">
    <div class="row">
        <!--設定列排序，只在lg螢幕下才會有效果，如果push或者pull的列數沒有計算好，那麼有可能造成重疊-->
        <div class="col-lg-2 col-lg-push-10">1</div>
        <div class="col-lg-10 col-lg-pull-2">2</div>
    </div>
</div>

BootStrap文件檢視：可以利用bootstrap提供好的一些元件或者js效果來幫助我們快速的完成頁面的開發，提高開發的效果。

LESS:LESS 是動態的樣式表語言，通過簡潔明瞭的語法定義，使編寫 CSS 的工作變得非常簡單，本質上，LESS 包含一套自定義的語法及一個解析器。

安裝Node.js

1、安裝Nodejs環境 Node Package Manager (驗證 node -v npm -v) npm:node packge manager

2、開啟控制檯（cmd），執行npm install -g less (驗證 lessc -v) node packet manager

3、命令列編譯 lessc path/xxx.less path/xxx.css

編譯

瀏覽器只能識別CSS，LESS只是用來提升CSS可維護性的一個工具，所最終需要將LESS編譯成CSS，然而通過命令列編譯效率比較低下，一般都會藉助於編輯器來完成編譯，以sublime_text為例，sublime_text預設並不支援LESS的編譯操作，需要安裝外掛實現。

1、執行npm install -g less-plugin-clean-css（使用sublime_text才用）

2、ctrl+shit+p開啟命令面板

3、輸入install package然後回車

4、安裝 LESS、lessc、Less2Css三個外掛

5、alt+s快捷鍵即可實現編譯

語法

1、變數

格式：@變數名: 值，定義完成後可以重複使用

@baseColor:#e92323;
a{
  color: @baseColor;
}
div{
  border: 1px solid @baseColor;
}

2、混合

我們可以像使用函式一樣來使用CSS

/*相當於函式封裝*/
.addRadius{
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
 }
/*定義帶參的函式*/
.addRadius(@r){
  border-radius: @r;
  -webkit-border-radius: @r;
  -moz-border-radius: @r;
}
/*可以定義帶預設值的引數的函式*/
.addRadius(@r:5px){
  border-radius: @r;
  -webkit-border-radius: @r;
  -moz-border-radius: @r;
}
div{
  width: 200px;
  height: 200px;
  /*.addRadius;*/
  /*相當於呼叫帶參的函式*/
  //.addRadius(4px)
  .addRadius(10px);
}

3、巢狀

巢狀可以非常方便的管理我們的CSS層級關係

.header{
　　heught:40px;
　　nav{
　　　　　　overflow:hidden;
　　　　　　a{
　　　　　　　　display:block;
　　　　　　　　width:100px;
　　　　　　　　height:40px;
　　　　　　　　float:left;
　　　　　　}
　　　　}
　　}

瀏覽器中使用

瞭解了LESS基本語法後，可以用LESS寫編寫CSS程式碼了，但是需要實時的將LESS編譯成CSS瀏覽器才能識別，利用編輯器能夠編譯，但是效率相對較低。

我們可以引入一個less.js檔案，實現實時的解析，而不必每次修改都要編譯，最後完成所有開發任務後，再通過編輯器編譯成css檔案。

1、下載然後引入less.js

2、引入xx.less檔案，如： <link rel="stylesheet/less" type="text/css" href="styles.less" />

注意：rel屬性必須指定成stylesheet/less，並且styles.less要先於less.js引入。

必須以伺服器方式訪問，webstrom自帶伺服器功能也可以使用ghostlab除錯工具的伺服器。

<!--說明頁面是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框架

安裝Node.js

編譯

語法

瀏覽器中使用

響應式佈局與bootstrap框架

前端進階: 響應式開發與常用框架 [MP4]

前端進階響應式開發與常用框架

【css】移動端響應式佈局與響應式字型大小

Bootstrap框架和響應式佈局

layui框架的響應式佈局

Bootstrap樣式外掛/響應式佈局/旅遊網案例

bootstrap—響應式佈局程式碼

Bootstrap裡container的響應式佈局的解釋

Bootstrap響應式佈局原理

關於響應式佈局的總結px,em與rem

淺談響應式開發與自適應佈局！

Bootstrap 手機螢幕自適應的響應式佈局開關

【必看】CSS實現響應式佈局的方法與media的使用教程

Bootstrap禁用響應式佈局

bootstrap響應式佈局的控制原理

@media與響應式佈局

（10）響應式宣言、響應式系統與響應式編程——響應式Spring的道法術器

響應式佈局——CSS Media Query

web前端之響應式佈局，你必須要知道的

響應式佈局與bootstrap框架

網頁佈局方式

響應式佈局

CSS框架

安裝Node.js

編譯

語法

瀏覽器中使用

相關推薦