響應式佈局與bootstrap框架

時間 2021-04-12 標籤 css html 前端 html5 node jquery web npm bootstrap 移動web開發

原文css

網頁佈局方式

一、固定寬度佈局：爲網頁設置一個固定的寬度，一般以px作爲長度單位，常見於PC端網頁。html

二、流式佈局：爲網頁設置一個相對的寬度，一般以百分比作爲長度單位。前端

三、柵格化佈局：將網頁寬度人爲的劃分紅均等的長度，而後排版佈局時則以這些均等的長度作爲度量單位，一般利用百分比作爲長度單位來劃分紅均等的長度。html5

四、響應式佈局：經過檢測設備信息，決定網頁佈局方式，即用戶若是採用不一樣的設備訪問同一個網頁，有可能會看到不同的內容，通常狀況下是檢測設備屏幕的寬度來實現。node

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

響應式佈局

Responsive design，意在實現不一樣屏幕分辨率的終端上瀏覽網頁的不一樣展現方式。經過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。屏幕尺寸不同展現給用戶的網頁內容也不同，咱們利用媒體查詢能夠檢測到屏幕的尺寸（主要檢測寬度），並設置不一樣的CSS樣式，就能夠實現響應式的佈局。web

咱們利用響應式佈局能夠知足不一樣尺寸的終端設備很是完美的展示網頁內容，使得用戶體驗獲得了很大的提高，可是爲了實現這一目的咱們不得不利用媒體查詢寫不少冗餘的代碼，使總體網頁的體積變大，應用在移動設備上就會帶來嚴重的性能問題。npm

響應式佈局經常使用於企業的官網、博客、新聞資訊類型網站，這些網站以瀏覽內容爲主，沒有複雜的交互。bootstrap

響應式開發移動web開發

什麼是響應式開發

在移動互聯日益成熟的時候，桌面瀏覽器上開發的網頁已經不能知足移動端的設備的展現和閱讀
以前，一般的作法是對移動端單獨開發一套特定的版本
可是，若是移動終端設備起來越多的時候賦發成本太大，是由於須要作全部屏幕的適配
響應式開發的目的就是:一個網站可以兼容多種終端
在新建的網站上通常都會使用響應式開發
移動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

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

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

三、命令行編譯 lessc path/xxx.less path/xxx.css

編譯

瀏覽器只能識別CSS，LESS只是用來提高CSS可維護性的一個工具，所最終須要將LESS編譯成CSS，然而經過命令行編譯效率比較低下，通常都會藉助於編輯器來完成編譯，以sublime_text爲例，sublime_text默認並不支持LESS的編譯操做，須要安裝插件實現。

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

二、ctrl+shit+p打開命令面板

三、輸入install package而後回車

四、安裝 LESS、lessc、Less2Css三個插件

五、alt+s快捷鍵便可實現編譯

語法

一、變量

格式：@變量名: 值，定義完成後能夠重複使用

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

二、混合

咱們能夠像使用函數同樣來使用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);
}

三、嵌套

嵌套能夠很是方便的管理咱們的CSS層級關係

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

瀏覽器中使用

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

咱們能夠引入一個less.js文件，實現實時的解析，而沒必要每次修改都要編譯，最後完成全部開發任務後，再經過編輯器編譯成css文件。

一、下載而後引入less.js

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