響應式布局與bootstrap框架

本文轉載自查看原文 2017-05-17 00:48 52367 響應式布局/ bootstrap

網頁布局方式

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 響應式布局與bootstrap框架 BootStrap 響應式布局響應式布局及bootstrap（實例） Bootstrap如何禁止響應式布局 bootstrap響應式布局原理 Bootstrap實戰 - 響應式布局響應式布局框架bootstrap（世界上最流行的css框架） Bootstrap4響應式布局之柵格系統響應式布局和BootStrap 全局CSS樣式響應式布局---3. Bootstrap柵格系統