當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端响应式布局与Bootstrap栅格系统快速了解与应用

發布時間：2023/12/10 HTML 50 豆豆

生活随笔收集整理的這篇文章主要介紹了前端响应式布局与Bootstrap栅格系统快速了解与应用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一.響應式開發快速了解：

??你好呀~(????)ﾉ，不知道你看到這篇文章的時候是幾點了，不過我現在是深夜00:15分。每次到這個時間我反倒有了種安心的感覺，沒有消息沒有通知沒有什么會打擾我。我喜歡夜晚這種靜謐的感覺，特別是夏天的夜。出去抬頭還能看到一閃一閃星星，我也喜歡星星。今天倒是沒有什么特別的要分享的，那就分享一些前端基礎的響應式布局的知識把。

1.1 響應式開發原理：

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

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

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

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

不同設備一般尺寸區間如下：

設備類別尺寸區間平常設置的大小

手機	<768px	100%
平板	>=768px - - - < 992px	750px
桌面顯示屏（中等屏幕）	>=992px - - - < 1200px	970px
大桌面顯示器（大屏幕）	> = 1200px	1170px

1.2響應式布局容器：

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

1.3媒體查詢小案例：

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

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

<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 框架，用于開發響應式布局、移動設備優先的 WEB 項目。不過這東西我認為看開發需求和場景等等而定，有時寫簡單的vue項目可能用element-ui多一些。不過肯定是都要了解的。
?官方使用文檔為：https://v3.bootcss.com/

2.2 快速上手：

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

首先引入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"><title>Bootstrap 101 Template</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> </head><body><h1>你好，世界！</h1><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"crossorigin="anonymous"></script><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>

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

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

<button type="button" class="btn btn-success self">（成功）Success</button> .self{background-color: skyblue;}

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

2.3 布局容器：

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

1. container類

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

響應式布局的容器固定寬度

大屏(>=1200px)	寬度定為1170px
中屏(>=992px)	寬度定為970px
小屏(>=768px)	寬度定為750px
超小屏	(100%)

2. container-fluid類

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

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

（3）適合于單獨做移動端開發。

2.4 bootstrap柵格系統：

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

2.5 柵格選項參數：

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

不同設備的類前綴寫法：

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

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

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

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

效果如下：

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

效果如下：

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

效果：

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

當屏幕尺寸為大時效果：

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

總結：

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

2.6 列嵌套：

?柵格系統內置的柵格系統將內容再次嵌套。簡單理解就是一個列內再分成若干份小列。套娃。比如我們可以通過添加一個新的.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;}

看效果：

2.7 列偏移：

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

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

效果：

2.7 列排序：

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

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

效果：

2.8 響應式工具：

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

比如，下面有3個子盒子，當屏幕變為中等屏幕和小屏幕時，讓第一個子盒子隱藏：

看：

2.9 持續更新，建議收藏~

三.總結：

下次見啦~

其它文章：
~關注我看更多簡單創意特效：
文字煙霧效果 html+css+js
環繞倒影加載特效 html+css
氣泡浮動背景特效 html+css
簡約時鐘特效 html+css+js
賽博朋克風格按鈕 html+css
仿網易云官網輪播圖 html+css+js
水波加載動畫 html+css
導航欄滾動漸變效果 html+css+js
書本翻頁 html+css
3D立體相冊 html+css
霓虹燈繪畫板效果 html+css+js
記一些css屬性總結（一）
Sass總結筆記
…等等
進我主頁看更多~

總結

以上是生活随笔為你收集整理的前端响应式布局与Bootstrap栅格系统快速了解与应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： loadrunner controlle
下一篇：前端插件介绍