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

HTML

移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)

發布時間：2024/7/5 HTML 25 豆豆

生活随笔收集整理的這篇文章主要介紹了移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

移動端WEB開發之響應式布局

1.1 響應式開發原理

就是使用媒體查詢針對不同寬度的設備進行布局和樣式的設置，從而適配不同設備的目的。

設備的劃分情況：

<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><title></title><style type="text/css">.container {height: 150px;background-color: pink;margin: 0 auto;}/* 1.超小屏幕下,小于768px 布局容器的寬度為100% */@media screen and (max-width:767px) {.container {width: 100%;}}/* 2. 小屏幕下,大于等于768px 布局容器的寬度為750px */@media screen and (min-width:768px) {.container {width: 750px;}}/* 3. 中等屏幕下,大于等于992px 布局容器的寬度為970px */@media screen and (min-width:992px) {.container {width: 970px;}}/* 4. 大屏幕下,大于等于1200px 布局容器的寬度為1170px */@media screen and (min-width:1200px) {.container {width: 1170px;}}</style></head><body><div class="container"></div></body> </html>

1.2 響應式布局容器

響應式需要一個父級做為布局容器，來配合子級元素來實現變化效果。

原理就是在不同屏幕下，通過媒體查詢來改變這個布局容器的大小，再改變里面子元素的排列方式和大小，從而實現不同屏幕下，看到不同的頁面布局和樣式變化。

父容器版心的尺寸劃分:

超小屏幕（手機，小于 768px）：設置寬度為 100%
小屏幕（平板，大于等于 768px）：設置寬度為 750px
中等屏幕（桌面顯示器，大于等于 992px）：寬度設置為 970px
大屏幕（大桌面顯示器，大于等于 1200px）：寬度設置為 1170px

但是我們也可以根據實際情況自己定義劃分

響應式導航案例：
需求分析:
① 當我們屏幕大于等于768像素，我們給container寬度為750px，因為里面子盒子需要浮動，所以container需要清除浮動。
② container里面包含8個小li 盒子，每個盒子的寬度定為 93.75px，高度為 30px，浮動一行顯示。
③ 當我們屏幕縮放，寬度小于768像素的時候， container盒子寬度修改為 100% 寬度。
④ container里面的8個小li，寬度修改為 33.33%，這樣一行就只能顯示3個小li ，剩余下行顯示。

<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>響應式導航</title><style type="text/css">* {margin: 0;padding: 0;}.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}ul {list-style: none;}.container {width: 750px;margin: 0 auto;}.container ul li {float: left;width: 93.75px;height: 30px;background-color: green;text-align: center;}@media screen and (max-width:767px) {.container {width: 100%;}.container ul li {width: 33.33%;}}</style></head><body><div class="container"><ul class="clearfix"><li>導航欄1</li><li>導航欄2</li><li>導航欄3</li><li>導航欄4</li><li>導航欄5</li><li>導航欄6</li><li>導航欄7</li><li>導航欄8</li></ul></div></body> </html>

2.0 bootstrap的介紹

2.1Bootstrap簡介

Bootstrap 來自 Twitter（推特），是目前最受歡迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。

中文網] http://www.bootcss.com/
官網 http://getbootstrap.com/
推薦網站 https://v3.bootcss.com/

框架：顧名思義就是一套架構，它有一套比較完整的網頁功能解決方案，而且控制權在框架本身，有預制樣式庫、組件和插件。使用者要按照框架所規定的某種規范進行開發。

2.2 bootstrap優點

標準化的html+css編碼規范
提供了一套簡潔、直觀、強悍的組件
有自己的生態圈，不斷的更新迭代
讓開發更簡單，提高了開發的效率

2.3 版本簡介

2.x.x：停止維護,兼容性好,代碼不夠簡潔，功能不夠完善。

3.x.x：目前使用最多,穩定,但是放棄了IE6-IE7。對 IE8 支持但是界面效果不好,偏向用于開發響應式布局、移動設備優先的WEB 項目。

4.x.x：最新版，目前還不是很流行

2.4bootstrap基本使用

在現階段我們還沒有接觸JS相關課程，所以我們只考慮使用它的樣式庫。
控制權在框架本身，使用者要按照框架所規定的某種規范進行開發。

Bootstrap 使用四步曲：

創建文件夾結構

?

創建 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 href="css/bootstrap.min.css" rel="stylesheet"></head><body><h1>你好，世界！</h1><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="js/bootstrap.min.js"></script></body> </html>

引入相關樣式文件

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

書寫內容

直接拿Bootstrap 預先定義好的樣式來使用

修改Bootstrap 原來的樣式，注意權重問題

學好Bootstrap 的關鍵在于知道它定義了哪些樣式，以及這些樣式能實現什么樣的效果

<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><title></title></head><body>123<h1>你好，世界！</h1><button type="button" class="btn btn-success">（成功）Success</button><button type="button" class="btn btn-danger">失敗</button><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script></body> </html>

2.5 bootstrap布局容器

Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 或者**.container-fluid** 容器，它提供了兩個作此用處的類。

.container

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

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

.container-fluid

流式布局容器百分百寬度

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

2.6 bootstrap柵格系統

Bootstrap提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。

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

柵格選項參數
柵格系統用于通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。

按照不同屏幕劃分為1~12 等份
行（row）可以去除父容器作用15px的邊距
行（row）必須放到container布局容器里面
我們實現列的平均劃分需要給列添加類前綴
xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
列（column）大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列
每一列默認有左右15像素的 padding
可以同時為一列指定多個設備的類名，以便劃分不同份數例如 class=“col-md-4 col-sm-6”

代碼演示：

<!DOCTYPE html> <html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><title></title><style type="text/css">[class^="col"] {border: 1px solid #ccc;}</style></head><body><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 class="row"><div class="col-lg-6">1</div><div class="col-lg-2">2</div><div class="col-lg-2">3</div><div class="col-lg-2">4</div></div><div class="row"><div class="col-lg-6">1</div><div class="col-lg-2">2</div><div class="col-lg-2">3</div><div class="col-lg-1">4</div></div><div class="row"><div class="col-lg-6">1</div><div class="col-lg-2">2</div><div class="col-lg-2">3</div><div class="col-lg-3">4</div></div></div></body> </html>

<!DOCTYPE html> <html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><title></title><style type="text/css">[class^="col"] {border: 1px solid #ccc;}.container .row:nth-child(1) {background-color: pink;}</style></head><body><div class="container"><div class="row"><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" >1</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div></div><div class="row"><div class="col-lg-6">1</div><div class="col-lg-2">2</div><div class="col-lg-2">3</div><div class="col-lg-2">4</div></div><div class="row"><div class="col-lg-6">1</div><div class="col-lg-2">2</div><div class="col-lg-2">3</div><div class="col-lg-1">4</div></div><div class="row"><div class="col-lg-6">1</div><div class="col-lg-2">2</div><div class="col-lg-2">3</div><div class="col-lg-3">4</div></div></div></body> </html>

2. 柵格嵌套

柵格系統內置的柵格系統將內容再次嵌套。簡單理解就是一個列內再分成若干份小列。我們可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-*元素內。
我們列嵌套最好加1個行row這樣可以取消父元素的padding值而且高度自動和父級一樣高

<div class="col-sm-4"><div class="row"><div class="col-sm-6">小列</div><div class="col-sm-6">小列</div></div> </div>

代碼演示：

列偏移

使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）。

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

代碼演示：

4. 列排序

通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序。

<div class="row"><div class="col-lg-4 col-lg-push-8">左側</div><div class="col-lg-8 col-lg-pull-4">右側</div></div>

代碼演示：

5. 響應式工具

為了加快對移動設備友好的頁面開發工作，利用媒體查詢功能，并使用這些工具類可以方便的針對不同設備展示或隱藏頁面內容。

與之相反的，是visible-xs 、visible-sm 、visible-md、 visible-lg是顯示某個頁面內容
代碼演示：

2.7 bootstrap js插件的使用
詳細內容請看 jQuery學習筆記系列（三）

3.0 阿里百秀案例制作

3.1 技術選型

方案：我們采取響應式頁面開發方案

技術：bootstrap框架

設計圖：本設計圖采用 1280px 設計尺寸

項目結構搭建

Bootstrap 使用四步曲：

創建文件夾結構

創建 html 骨架結構

引入相關樣式文件

書寫內容

container寬度修改

因為本效果圖采取 1280的寬度，而Bootstrap 里面 container寬度最大為 1170px，因此我們需要手動改下container寬度

/* 利用媒體查詢修改 container寬度適合效果圖寬度 */@media (min-width: 1280px) { .container { width: 1280px; } }

總結

以上是生活随笔為你收集整理的移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： ES6（三）——Set、WeakSet、
下一篇：二十八、PHP框架Laravel学习笔记