溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“前端響應式布局與Bootstrap柵格系統(tǒng)怎么應用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“前端響應式布局與Bootstrap柵格系統(tǒng)怎么應用”文章吧。
響應式開發(fā)可以使用媒體查詢針對不同寬度的設備進行布局和樣式的設置,從而適配不同設備的目的。媒體查詢就是使用 @media 查詢，它可以針對不同的屏幕尺寸定義不同的樣式。簡單來說就是同一頁面要在不同尺寸的設備顯示不同的布局排列方式。
媒體查詢@media的CSS語法 例子：
@media mediatype and|not|only (media feature) {
CSS-Code;
}不同設備一般尺寸區(qū)間如下：
| 設備類別 | 尺寸區(qū)間 | 平常設置的大小 |
| 手機 | <768px | 100% |
| 平板 | >=768px- - - < 992px | 750px |
| 桌面顯示屏（中等屏幕） | >=992px - - - < 1200px | 970px |
| 大桌面顯示器（大屏幕） | > = 1200px | 1170px |
響應式需要一個父級做為布局容器，來配合子級元素來實現(xiàn)變化效果。原理就是在不同屏幕下，通過媒體查詢來改變這個布局容器的大小，然后子元素的排列方式和大小也改變，最終達到不同尺寸屏幕下，看到不同的頁面布局和樣式。
比如有一個div盒子，在不同的屏幕尺寸大小呈現(xiàn)不同的寬度：
初始代碼如下，還沒定義寬度：
<div class="container"></div>
.container{
height: 100px;
background-color: skyblue;
margin: 0 auto;
}
.container{
height: 100px;
background-color: skyblue;
margin: 0 auto;
}
@media screen and (max-width: 767px){
.container{
width: 100%;
}
} @media screen and (min-width: 768px){
.container{
width: 750px;
}
} @media screen and (min-width: 992px){
.container{
width: 970px;
}
} @media screen and (min-width: 1200px){
.container{
width: 1170px;
}
}效果：
做一個響應式導航欄，效果如下：
代碼：
<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);
}
}自稱是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應式布局、移動設備優(yōu)先的 WEB 項目。不過這東西我認為看開發(fā)需求和場景等等而定，有時寫簡單的vue項目可能用element-ui多一些。不過肯定是都要了解的。
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標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" 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> <h2>你好，世界！</h2> <!-- 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，然后復制它的類名，也是一樣的效果：
<h2>你好，世界！</h2> <button type="button" class="btn btn-success">（成功）Success</button> <div class="btn btn-success">登錄</div>
看效果，直接出來了，都不用自己寫樣式了：
當然可以修改它的樣式，比如再定義一個自己寫類名，寫上背景顏色，覆蓋掉原來的背景色，注意權重問題就好：
<button type="button" class="btn btn-success self">（成功）Success</button>
.self{
background-color: skyblue;
}
這里對于組件就不演示更多，想要什么直接找就好，下面主要講講bootstrap的響應式布局方式~
Bootstrap需要為頁面內容和柵格系統(tǒng)包裹一個.container容器, Bootstarp預先定義好了這個類,叫.container它提供了兩個作此用處的類。
只要設置了.container類的這個盒子當屏幕尺寸變化時這個盒子就會自動變化寬度。
響應式布局的容器固定寬度大屏(>=1200px)寬度定為1170px中屏(>=992px)寬度定為970px小屏(>=768px)寬度定為750px超小屏(100%)
（1）流式布局容器百分百寬度。
（2）占據(jù)全部視口( viewport )的容器。
（3）適合于單獨做移動端開發(fā)。
按照官方的話來說，Bootstrap 提供了一套響應式、移動設備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。它包含了易于使用的預定義類，還有強大的mixin 用于生成更具語義的布局。簡單來說就像一個網格。概念枯燥難懂，還是直接看下面例子。
柵格系統(tǒng)用于通過一系列的行( row )與列( column )的組合來創(chuàng)建頁面布局,你的內容就可以放入這些創(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個：
總結：
行( row )必須放到container布局容器里面，我們實現(xiàn)列的平均劃分需要給列添加類前綴。
列( column)大于12,多余的“列(column)"所在的元素將被作為一個整體另起一行排列，每一列默認有左右15像素的padding值。
可以同時為一列指定多個設備的類名,以便劃分不同份數(shù)例如class= “col-md-4 col-sm-6”
柵格系統(tǒng)內置的柵格系統(tǒng)將內容再次嵌套。簡單理解就是一個列內再分成若干份小列。套娃。比如我們可以通過添加一個新的.row元素和一系列.col-sm–*元素到已經存在的.col-sm-*元素內。
比如給下面的第一行的第一個子盒子里面再分成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;
}看效果：
使用.col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用選擇器為當前元素增加了左側的邊距( margin )。當然什么屏幕尺寸就用什么前綴。
比如下面兩個子盒子每個只占4列，那肯定是占不滿12列的，按照規(guī)則，那行就只有8列了，且兩個盒子都靠左排列?，F(xiàn)在我想第二個盒子位置靠右側，那可以通過給它偏移解決，那我移動個12-4-4=4列，就相當于在原來共12列的行里的最右側位置了。
<div class="container"> <div class="row"> <div class="col-md-4">左</div> <div class="col-md-4 col-md-offset-4">右</div> </div> </div>
效果：
通過使用 .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>
效果：
為了加快對移動設備友好的頁面開發(fā)工作，利用媒體查詢功能并使用這些工具類可以方便的針對不同設備展示或隱藏頁面內容。簡單來說就是當在不同尺寸的設備下，一些元素要顯示或者隱藏起來，那么可以通過給元素標簽直接定義下面的類快速達到效果。
比如，下面有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>
看：
以上就是關于“前端響應式布局與Bootstrap柵格系統(tǒng)怎么應用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。
