欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

帶你快速上手前端響應式布局與Bootstrap柵格系統(tǒng)

 更新時間：2023年03月28日 14:00:42   作者：北極光之夜。  
這篇文章帶你快速上手前端響應式布局與Bootstrap柵格系統(tǒng),響應式布局主要是針對各種不同尺寸的屏幕兼容性問題,需要的朋友可以參考下

一.響應式開發(fā)快速了解：

1.1 響應式開發(fā)原理：

  響應式開發(fā)可以使用媒體查詢針對不同寬度的設備進行布局和樣式的設置,從而適配不同設備的目的。媒體查詢就是使用 @media 查詢，它可以針對不同的屏幕尺寸定義不同的樣式。簡單來說就是同一頁面要在不同尺寸的設備顯示不同的布局排列方式。

媒體查詢@media的CSS語法 例子：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

media官方使用文檔鏈接：https://www.runoob.com/cssref/css3-pr-mediaquery.html

不同設備一般尺寸區(qū)間如下：

設備類別尺寸區(qū)間平常設置的大小
手機<768px100%
平板>=768px- - - < 992px750px
桌面顯示屏（中等屏幕）>=992px - - - < 1200px970px
大桌面顯示器（大屏幕）> = 1200px1170px

1.2響應式布局容器：

  響應式需要一個父級做為布局容器，來配合子級元素來實現(xiàn)變化效果。原理就是在不同屏幕下，通過媒體查詢來改變這個布局容器的大小，然后子元素的排列方式和大小也改變，最終達到不同尺寸屏幕下，看到不同的頁面布局和樣式。

1.3媒體查詢小案例：

首先，media官方使用文檔鏈接：https://www.runoob.com/cssref/css3-pr-mediaquery.html

比如有一個div盒子，在不同的屏幕尺寸大小呈現(xiàn)不同的寬度：
初始代碼如下，還沒定義寬度：

<div class="container"></div>

.container{
            height: 100px;
            background-color: skyblue;
            margin: 0 auto;
        }

在這里插入圖片描述

（1）手機屏幕下，小于768px時設置100%寬：

  .container{
            height: 100px;
            background-color: skyblue;
            margin: 0 auto;
        }
        @media screen and (max-width: 767px){
           .container{
               width: 100%;
           }
        }

（2）平板屏幕下，設置750px寬：

  @media screen and (min-width: 768px){
           .container{
               width: 750px;
           }
        }

（3）中等屏幕下，設置970px寬：

  @media screen and (min-width: 992px){
           .container{
               width: 970px;
           }
        }

（4）大屏幕下，設置1170px寬：

 @media screen and (min-width: 1200px){
           .container{
               width: 1170px;
           }
        }

效果：

在這里插入圖片描述

1.4響應式布局小案例：

做一個響應式導航欄，效果如下：

在這里插入圖片描述

代碼：

 <ul>
            <li>導航</li>
            <li>導航</li>
            <li>導航</li>
            <li>導航</li>
            <li>導航</li>
            <li>導航</li>
            <li>導航</li>
            <li>導航</li>
        </ul>

      *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 750px;
            background-color: skyblue;
            margin: 0 auto;
        }
        .container ul li{
            width: calc(750px / 8);
            height: 30px;
            background-color: rgb(21, 240, 192);
            float: left;
            list-style: none;
        }
        @media screen and (max-width:767px){
            .container{
                width: 100%;
            }
            .container ul li{
                width: calc(100% / 3);
            }
        }

二.Bootstrap快速了解與應用：

2.1 簡介：

 Bootstrap 自稱是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應式布局、移動設備優(yōu)先的 WEB 項目。不過這東西我認為看開發(fā)需求和場景等等而定，有時寫簡單的vue項目可能用element-ui多一些。不過肯定是都要了解的。
 官方使用文檔為：https://v3.bootcss.com/

2.2 快速上手：

Bootstrap里有很多現(xiàn)成封裝好的組件，可以直接復制拿來使用。

首先引入bootstrap，我這里直接在html單頁面通過鏈接引入即可。也可以通過npm下載或者下載包等等方式引入，這些可以查看官方文檔。官方給的html單頁面基本模板如下，可去官方文檔查看：

<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet"  rel="external nofollow" 
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：通過 file:// 協(xié)議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</body>

</html>

在這里插入圖片描述

 比如我去官方文檔找一個好看的按鈕復制：

在這里插入圖片描述

 它的樣式主要是通過類名定義的，所以也可以自己定義一個div，然后復制它的類名，也是一樣的效果：

    <h1>你好，世界！</h1>
    <button type="button" class="btn btn-success">（成功）Success</button>
    <div class="btn btn-success">登錄</div>

看效果，直接出來了，都不用自己寫樣式了：

在這里插入圖片描述

 當然可以修改它的樣式，比如再定義一個自己寫類名，寫上背景顏色，覆蓋掉原來的背景色，注意權(quán)重問題就好：

<button type="button" class="btn btn-success self">（成功）Success</button>

 .self{
             background-color: skyblue;
         }

在這里插入圖片描述

這里對于組件就不演示更多，想要什么直接找就好，下面主要講講bootstrap的響應式布局方式~

2.3 布局容器：

 Bootstrap需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個.container容器, Bootstarp預先定義好了這個類,叫.container它提供了兩個作此用處的類。

1. container類

只要設置了.container類的這個盒子當屏幕尺寸變化時這個盒子就會自動變化寬度。

響應式布局的容器固定寬度大屏(>=1200px)寬度定為1170px中屏(>=992px)寬度定為970px小屏(>=768px)寬度定為750px超小屏(100%)

2. container-fluid類

（1）流式布局容器百分百寬度。

（2）占據(jù)全部視口( viewport )的容器。

（3）適合于單獨做移動端開發(fā)。

2.4 bootstrap柵格系統(tǒng)：

 按照官方的話來說，Bootstrap 提供了一套響應式、移動設備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。它包含了易于使用的預定義類，還有強大的mixin 用于生成更具語義的布局。簡單來說就像一個網(wǎng)格。概念枯燥難懂，還是直接看下面例子。

2.5 柵格選項參數(shù)：

  柵格系統(tǒng)用于通過一系列的行( row )與列( column )的組合來創(chuàng)建頁面布局,你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。

不同設備的類前綴寫法：

在這里插入圖片描述

 比如，我在一個.container父盒子里定義了四個子盒子，我想要它們四個子盒子在一行上平均分配父盒子的空間排列，又因為.container會自動最多分配為12列，那么每個子盒子不就是占3列么。當然，這四個子盒子還要用一個盒子包裹它們，這個盒子代表一行，通過定義類名.row實現(xiàn)，系統(tǒng)會自動識別。

通過在每個子盒子標簽里定義 類前綴+占的列數(shù) 來實現(xiàn)效果，如下，在大屏幕下，類前綴為col-lg-：

  <div class="container">
      <div class="row">
        <div class="col-lg-3">1</div>
        <div class="col-lg-3">2</div>
        <div class="col-lg-3">3</div>
        <div class="col-lg-3">4</div>
      </div>
    </div>

效果如下，我加了個邊框的樣式更直觀先：

在這里插入圖片描述

如果第一個盒子想要占的多，那它的col-log-可以寫大點，如：

  <div class="container">
      <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-1">3</div>
        <div class="col-lg-3">4</div>
      </div>
    </div>

效果如下：

在這里插入圖片描述

如果全部子盒子加起來不夠12列咋辦，那么.container整體就不會分為12列，有多少就多少，給個對比：

<div class="container">
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-1">3</div>
            <div class="col-lg-3">4</div>
        </div>
        <div class="row">
            <div class="col-lg-3">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-1">3</div>
            <div class="col-lg-3">4</div>
        </div>
    </div>

效果如下：

在這里插入圖片描述

如果如果全部子盒子加起來超過12列咋辦，多的會另起一行顯示：

<div class="container">
    <div class="row">
        <div class="col-lg-3">1</div>
        <div class="col-lg-6">2</div>
        <div class="col-lg-1">3</div>
        <div class="col-lg-6">4</div>
    </div>
</div>

效果：

在這里插入圖片描述

上面這些都是定義在大屏幕的排列方式，如果我想當變成中等屏幕尺寸時每行只顯示3個子盒子那該咋辦呢？可以同時為一列指定多個設備的類名,以便劃分不同份數(shù)例如class= “col-md-4 col-sm-6”。

所以，如下：

<div class="container">
    <div class="row">
            <div class="col-lg-3 col-md-4">1</div>
            <div class="col-lg-3 col-md-4">2</div>
            <div class="col-lg-3 col-md-4">3</div>
            <div class="col-lg-3 col-md-4">4</div>
    </div>
</div>

當屏幕尺寸為大時效果：

在這里插入圖片描述

當屏幕尺寸為中等時效果,看，變了，每行3個：

在這里插入圖片描述

總結(jié)：

行( row )必須放到container布局容器里面，我們實現(xiàn)列的平均劃分需要給列添加類前綴。
列( column)大于12,多余的“列(column)"所在的元素將被作為一個整體另起一行排列，每一列默認有左右15像素的padding值。
可以同時為一列指定多個設備的類名,以便劃分不同份數(shù)例如class= “col-md-4 col-sm-6”

2.6 列嵌套：

 柵格系統(tǒng)內(nèi)置的柵格系統(tǒng)將內(nèi)容再次嵌套。簡單理解就是一個列內(nèi)再分成若干份小列。套娃。比如我們可以通過添加一個新的.row元素和一系列.col-sm–*元素到已經(jīng)存在的.col-sm-*元素內(nèi)。

比如給下面的第一行的第一個子盒子里面再分成12列，里面有兩個子子盒子，各占6列：

  <div class="container">
        <div class="row">
           <div class="col-md-4">
              <div class="row">
                <div class="col-md-6">1.1</div>
                <div class="col-md-6">1.2</div>
              </div>
           </div>
           <div class="col-md-4">2</div>
           <div class="col-md-4">3</div>
        </div>
    </div>

  .row div{
             height: 66px;
             border: 1px solid gray;
         }

看效果：

在這里插入圖片描述

2.7 列偏移：

 使用.col-md-offset-* 類可以將列向右側(cè)偏移。這些類實際是通過使用選擇器為當前元素增加了左側(cè)的邊距( margin )。當然什么屏幕尺寸就用什么前綴。

 比如下面兩個子盒子每個只占4列，那肯定是占不滿12列的，按照規(guī)則，那行就只有8列了，且兩個盒子都靠左排列。現(xiàn)在我想第二個盒子位置靠右側(cè)，那可以通過給它偏移解決，那我移動個12-4-4=4列，就相當于在原來共12列的行里的最右側(cè)位置了。

<div class="container">
        <div class="row">
             <div class="col-md-4">左</div>
             <div class="col-md-4 col-md-offset-4">右</div>
        </div>
    </div>

效果：

在這里插入圖片描述

2.7 列排序：

 通過使用 .col-md-push-* （往右推）和 .col-md-pull-*（往左拉） 類就可以很容易的改變列（column）的順序。當然什么屏幕尺寸就用什么類前綴。

 比如下面有左右兩個盒子，我想把原本右邊的盒子放到左邊，左邊的盒子放到右邊。

 <div class="container">
        <div class="row">
             <div class="col-md-5 col-md-push-7">左</div>
             <div class="col-md-7 col-md-pull-5">右</div>
        </div>
    </div>

效果：

在這里插入圖片描述

2.8 響應式工具：

 為了加快對移動設備友好的頁面開發(fā)工作，利用媒體查詢功能并使用這些工具類可以方便的針對不同設備展示或隱藏頁面內(nèi)容。簡單來說就是當在不同尺寸的設備下，一些元素要顯示或者隱藏起來，那么可以通過給元素標簽直接定義下面的類快速達到效果。

在這里插入圖片描述

比如，下面有3個子盒子，當屏幕變?yōu)橹械绕聊缓托∑聊粫r，讓第一個子盒子隱藏：

  <div class="container">
        <div class="row">
             <div class="col-xs-4 hidden-md hidden-sm">1</div>
             <div class="col-xs-4">2</div>
             <div class="col-xs-4">3</div>
        </div>
    </div>

看：

在這里插入圖片描述

到此這篇關(guān)于帶你快速上手前端響應式布局與Bootstrap柵格系統(tǒng)的文章就介紹到這了,更多相關(guān)響應式布局與Bootstrap柵格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論