帶你快速上手前端響應(yīng)式布局與Bootstrap柵格系統(tǒng)
一.響應(yīng)式開(kāi)發(fā)快速了解：
1.1 響應(yīng)式開(kāi)發(fā)原理：
響應(yīng)式開(kāi)發(fā)可以使用媒體查詢針對(duì)不同寬度的設(shè)備進(jìn)行布局和樣式的設(shè)置,從而適配不同設(shè)備的目的。媒體查詢就是使用 @media 查詢，它可以針對(duì)不同的屏幕尺寸定義不同的樣式。簡(jiǎn)單來(lái)說(shuō)就是同一頁(yè)面要在不同尺寸的設(shè)備顯示不同的布局排列方式。
媒體查詢@media的CSS語(yǔ)法 例子：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
media官方使用文檔鏈接：https://www.runoob.com/cssref/css3-pr-mediaquery.html
不同設(shè)備一般尺寸區(qū)間如下：
| 設(shè)備類別 | 尺寸區(qū)間 | 平常設(shè)置的大小 |
| 手機(jī) | <768px | 100% |
| 平板 | >=768px- - - < 992px | 750px |
| 桌面顯示屏（中等屏幕） | >=992px - - - < 1200px | 970px |
| 大桌面顯示器（大屏幕） | > = 1200px | 1170px |
1.2響應(yīng)式布局容器：
響應(yīng)式需要一個(gè)父級(jí)做為布局容器，來(lái)配合子級(jí)元素來(lái)實(shí)現(xiàn)變化效果。原理就是在不同屏幕下，通過(guò)媒體查詢來(lái)改變這個(gè)布局容器的大小，然后子元素的排列方式和大小也改變，最終達(dá)到不同尺寸屏幕下，看到不同的頁(yè)面布局和樣式。
1.3媒體查詢小案例：
首先，media官方使用文檔鏈接：https://www.runoob.com/cssref/css3-pr-mediaquery.html
比如有一個(gè)div盒子，在不同的屏幕尺寸大小呈現(xiàn)不同的寬度：
初始代碼如下，還沒(méi)定義寬度：
<div class="container"></div>
.container{
height: 100px;
background-color: skyblue;
margin: 0 auto;
}
（1）手機(jī)屏幕下，小于768px時(shí)設(shè)置100%寬：
.container{
height: 100px;
background-color: skyblue;
margin: 0 auto;
}
@media screen and (max-width: 767px){
.container{
width: 100%;
}
}
（2）平板屏幕下，設(shè)置750px寬：
@media screen and (min-width: 768px){
.container{
width: 750px;
}
}
（3）中等屏幕下，設(shè)置970px寬：
@media screen and (min-width: 992px){
.container{
width: 970px;
}
}
（4）大屏幕下，設(shè)置1170px寬：
@media screen and (min-width: 1200px){
.container{
width: 1170px;
}
}
效果：
1.4響應(yīng)式布局小案例：
做一個(gè)響應(yīng)式導(dǎo)航欄，效果如下：
代碼：
<ul>
<li>導(dǎo)航</li>
<li>導(dǎo)航</li>
<li>導(dǎo)航</li>
<li>導(dǎo)航</li>
<li>導(dǎo)航</li>
<li>導(dǎo)航</li>
<li>導(dǎo)航</li>
<li>導(dǎo)航</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快速了解與應(yīng)用：
2.1 簡(jiǎn)介：
Bootstrap 自稱是最受歡迎的 HTML、CSS 和 JS 框架，用于開(kāi)發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。不過(guò)這東西我認(rèn)為看開(kāi)發(fā)需求和場(chǎng)景等等而定，有時(shí)寫簡(jiǎn)單的vue項(xiàng)目可能用element-ui多一些。不過(guò)肯定是都要了解的。
官方使用文檔為：https://v3.bootcss.com/
2.2 快速上手：
Bootstrap里有很多現(xiàn)成封裝好的組件，可以直接復(fù)制拿來(lái)使用。
首先引入bootstrap，我這里直接在html單頁(yè)面通過(guò)鏈接引入即可。也可以通過(guò)npm下載或者下載包等等方式引入，這些可以查看官方文檔。官方給的html單頁(yè)面基本模板如下，可去官方文檔查看：
<!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個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(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）功能 -->
<!-- 警告：通過(guò) file:// 協(xié)議（就是直接將 html 頁(yè)面拖拽到瀏覽器中）訪問(wèn)頁(yè)面時(shí) 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ù)需要只加載單個(gè)插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
</body>
</html>
比如我去官方文檔找一個(gè)好看的按鈕復(fù)制：
它的樣式主要是通過(guò)類名定義的，所以也可以自己定義一個(gè)div，然后復(fù)制它的類名，也是一樣的效果：
<h1>你好，世界！</h1>
<button type="button" class="btn btn-success">（成功）Success</button>
<div class="btn btn-success">登錄</div>
看效果，直接出來(lái)了，都不用自己寫樣式了：
當(dāng)然可以修改它的樣式，比如再定義一個(gè)自己寫類名，寫上背景顏色，覆蓋掉原來(lái)的背景色，注意權(quán)重問(wèn)題就好：
<button type="button" class="btn btn-success self">（成功）Success</button>
.self{
background-color: skyblue;
}
這里對(duì)于組件就不演示更多，想要什么直接找就好，下面主要講講bootstrap的響應(yīng)式布局方式~
2.3 布局容器：
Bootstrap需要為頁(yè)面內(nèi)容和柵格系統(tǒng)包裹一個(gè).container容器, Bootstarp預(yù)先定義好了這個(gè)類,叫.container它提供了兩個(gè)作此用處的類。
1. container類
只要設(shè)置了.container類的這個(gè)盒子當(dāng)屏幕尺寸變化時(shí)這個(gè)盒子就會(huì)自動(dòng)變化寬度。
響應(yīng)式布局的容器固定寬度大屏(>=1200px)寬度定為1170px中屏(>=992px)寬度定為970px小屏(>=768px)寬度定為750px超小屏(100%)
2. container-fluid類
（1）流式布局容器百分百寬度。
（2）占據(jù)全部視口( viewport )的容器。
（3）適合于單獨(dú)做移動(dòng)端開(kāi)發(fā)。
2.4 bootstrap柵格系統(tǒng)：
按照官方的話來(lái)說(shuō)，Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。它包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin 用于生成更具語(yǔ)義的布局。簡(jiǎn)單來(lái)說(shuō)就像一個(gè)網(wǎng)格。概念枯燥難懂，還是直接看下面例子。
2.5 柵格選項(xiàng)參數(shù)：
柵格系統(tǒng)用于通過(guò)一系列的行( row )與列( column )的組合來(lái)創(chuàng)建頁(yè)面布局,你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。
不同設(shè)備的類前綴寫法：
比如，我在一個(gè).container父盒子里定義了四個(gè)子盒子，我想要它們四個(gè)子盒子在一行上平均分配父盒子的空間排列，又因?yàn)?container會(huì)自動(dòng)最多分配為12列，那么每個(gè)子盒子不就是占3列么。當(dāng)然，這四個(gè)子盒子還要用一個(gè)盒子包裹它們，這個(gè)盒子代表一行，通過(guò)定義類名.row實(shí)現(xiàn)，系統(tǒng)會(huì)自動(dòng)識(shí)別。
通過(guò)在每個(gè)子盒子標(biāo)簽里定義 類前綴+占的列數(shù) 來(lái)實(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>
效果如下，我加了個(gè)邊框的樣式更直觀先：
如果第一個(gè)盒子想要占的多，那它的col-log-可以寫大點(diǎn)，如：
<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>
效果如下：
如果全部子盒子加起來(lái)不夠12列咋辦，那么.container整體就不會(huì)分為12列，有多少就多少，給個(gè)對(duì)比：
<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>
效果如下：
如果如果全部子盒子加起來(lái)超過(guò)12列咋辦，多的會(huì)另起一行顯示：
<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>
效果：
上面這些都是定義在大屏幕的排列方式，如果我想當(dāng)變成中等屏幕尺寸時(shí)每行只顯示3個(gè)子盒子那該咋辦呢？可以同時(shí)為一列指定多個(gè)設(shè)備的類名,以便劃分不同份數(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>
當(dāng)屏幕尺寸為大時(shí)效果：
當(dāng)屏幕尺寸為中等時(shí)效果,看，變了，每行3個(gè)：
總結(jié)：
行( row )必須放到container布局容器里面，我們實(shí)現(xiàn)列的平均劃分需要給列添加類前綴。
列( column)大于12,多余的“列(column)"所在的元素將被作為一個(gè)整體另起一行排列，每一列默認(rèn)有左右15像素的padding值。
可以同時(shí)為一列指定多個(gè)設(shè)備的類名,以便劃分不同份數(shù)例如class= “col-md-4 col-sm-6”
2.6 列嵌套：
柵格系統(tǒng)內(nèi)置的柵格系統(tǒng)將內(nèi)容再次嵌套。簡(jiǎn)單理解就是一個(gè)列內(nèi)再分成若干份小列。套娃。比如我們可以通過(guò)添加一個(gè)新的.row元素和一系列.col-sm–*元素到已經(jīng)存在的.col-sm-*元素內(nèi)。
比如給下面的第一行的第一個(gè)子盒子里面再分成12列，里面有兩個(gè)子子盒子，各占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è)偏移。這些類實(shí)際是通過(guò)使用選擇器為當(dāng)前元素增加了左側(cè)的邊距( margin )。當(dāng)然什么屏幕尺寸就用什么前綴。
比如下面兩個(gè)子盒子每個(gè)只占4列，那肯定是占不滿12列的，按照規(guī)則，那行就只有8列了，且兩個(gè)盒子都靠左排列。現(xiàn)在我想第二個(gè)盒子位置靠右側(cè)，那可以通過(guò)給它偏移解決，那我移動(dòng)個(gè)12-4-4=4列，就相當(dāng)于在原來(lái)共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 列排序：
通過(guò)使用 .col-md-push-* （往右推）和 .col-md-pull-*（往左拉） 類就可以很容易的改變列（column）的順序。當(dāng)然什么屏幕尺寸就用什么類前綴。
比如下面有左右兩個(gè)盒子，我想把原本右邊的盒子放到左邊，左邊的盒子放到右邊。
<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 響應(yīng)式工具：
為了加快對(duì)移動(dòng)設(shè)備友好的頁(yè)面開(kāi)發(fā)工作，利用媒體查詢功能并使用這些工具類可以方便的針對(duì)不同設(shè)備展示或隱藏頁(yè)面內(nèi)容。簡(jiǎn)單來(lái)說(shuō)就是當(dāng)在不同尺寸的設(shè)備下，一些元素要顯示或者隱藏起來(lái)，那么可以通過(guò)給元素標(biāo)簽直接定義下面的類快速達(dá)到效果。
比如，下面有3個(gè)子盒子，當(dāng)屏幕變?yōu)橹械绕聊缓托∑聊粫r(shí)，讓第一個(gè)子盒子隱藏：
<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)于帶你快速上手前端響應(yīng)式布局與Bootstrap柵格系統(tǒng)的文章就介紹到這了,更多相關(guān)響應(yīng)式布局與Bootstrap柵格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
一段js 左右懸浮廣告特效代碼，js制作web網(wǎng)頁(yè)左右懸浮廣告特效，左右懸浮廣告通常也稱為對(duì)聯(lián)廣告，需要的朋友參考下2014-12-12
代碼非常簡(jiǎn)潔且兼容多瀏覽器的拖動(dòng)層實(shí)現(xiàn)代碼
代碼非常簡(jiǎn)潔且兼容多瀏覽器的拖動(dòng)層的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-01-01
多功能Tips，帶小三角的文字提示，可關(guān)閉，有兩套顏色方案可選擇，可按你的要求將顯示框定義顯示在四個(gè)方向，放大或縮小瀏覽器窗口，不會(huì)有絲毫偏差。2010-10-10
js 頁(yè)面左右兩側(cè)居中廣告代碼,里面的代碼還不錯(cuò)2012-03-03
漂亮的鼠標(biāo)提示，帶人性化缺口，在測(cè)試時(shí)候大家可改變?yōu)g覽器窗口大小，可以看到缺口會(huì)根據(jù)網(wǎng)頁(yè)的大小智能改變方向，以確保提示位置的正確性，其實(shí)由此大家可以學(xué)習(xí)到更多的JavaScript與CSs代碼知識(shí)。2010-11-11
jQuery彈出隱藏層的窗口特效，缺少了幾個(gè)小圖片，這個(gè)自己制作幾個(gè)補(bǔ)上去吧，這不是關(guān)鍵的東西。2011-08-08
javascript實(shí)現(xiàn)的在當(dāng)前窗口中漂浮框的代碼
javascript實(shí)現(xiàn)的在當(dāng)前窗口中漂浮框的代碼，代碼中有注釋，需要學(xué)習(xí)的朋友可以參考下。2010-03-03
js最簡(jiǎn)單的拖拽效果實(shí)現(xiàn)代碼
說(shuō)到拖拽功能，現(xiàn)在各大，中，小型網(wǎng)站都基本上有類似的東西，特別是對(duì)彈出層拖拽，更是常見(jiàn)的一塌糊涂。。。2010-09-09
JS實(shí)現(xiàn)用鍵盤控制DIV上下左右+放大縮小與變色
用鍵盤控制DIV，紅色方塊為鍵盤操作區(qū)域，您可以進(jìn)行如下操作:左右控制;背景變?yōu)榫G色;背景變?yōu)辄S色;背景變?yōu)樗{(lán)色放大或縮小2012-12-12
js點(diǎn)擊彈出div層實(shí)現(xiàn)可拖曳的彈窗效果
點(diǎn)擊文字，彈出一個(gè)窗口，其實(shí)是一個(gè)彈出層，這個(gè)彈出層可以隨鼠標(biāo)拖曳，很炫的哦，另外，示例演示了用本方法彈出文字層和彈出圖片層的具體代碼，請(qǐng)根據(jù)選擇使用哦，感興趣的朋友可以研究下2012-12-12