一揍很、移動(dòng)端web開發(fā)
1.1、響應(yīng)式開發(fā)原理
就是使用媒體查詢針對(duì)不同寬度的設(shè)備進(jìn)行布局和樣式的設(shè)置万伤，從而適配不同設(shè)備的目的窒悔。
設(shè)備的劃分情況：
- 小于768的為超小屏幕（手機(jī)）
- 768 ~ 992 之間的為小屏設(shè)備（平板）
- 992 ~ 1200 之間的為中等屏幕（桌面顯示器）
- 大于1200的為寬屏設(shè)備（大桌面顯示器）
1.2、響應(yīng)式布局容器
響應(yīng)式需要一個(gè)父級(jí)作為布局容器敌买，來配合子級(jí)元素來實(shí)現(xiàn)變化效果简珠。
原理就是在不同屏幕下，通過媒體查詢來改變這個(gè)布局容器的大小虹钮， 再改變里面子元素的排列方式和大小聋庵，從而實(shí)現(xiàn)不同屏幕下，看到不同的頁面布局和樣式變化芙粱。
父容器版心的尺寸劃分
- 超小屏幕（手機(jī)祭玉，小于768px）：設(shè)置寬度為100%
- 小屏幕（平板，大于等于768px）：設(shè)置寬度為750px
- 中等屏幕（桌面顯示器宅倒，大于等于992px）：寬度設(shè)置為970px
- 大屏幕（大桌面顯示器攘宙，大于等于1200px）：寬度設(shè)置為1170px
但是我們也可以根據(jù)實(shí)際情況自己定義劃分
二屯耸、bootstrap的布局
2.1、bootstrap簡介
bootstrap來自Twitter（推特）蹭劈，是目前最受歡迎的前端框架疗绣。bootstrap是基于HTML、CSS和JavaScript的铺韧，它簡潔靈活多矮，使得web開發(fā)更加快捷。
中文網(wǎng) 官網(wǎng) 推薦網(wǎng)站
框架：顧名思義就是一套架構(gòu)哈打，它有一套比較完整的網(wǎng)頁功能解決方案塔逃，而且控制權(quán)在框架本身，有預(yù)制樣式庫料仗、組件和插件湾盗。使用者要按照框架所規(guī)定的某種規(guī)范進(jìn)行開發(fā)。
2.2立轧、bootstrap優(yōu)點(diǎn)
- 標(biāo)準(zhǔn)化的html+css編碼規(guī)范
- 提供了一套簡潔格粪、直觀、強(qiáng)悍的組件
- 有自己的生態(tài)圈氛改，不斷的更新迭代
- 讓開發(fā)更簡單帐萎，提高了開發(fā)的效率
2.3、版本簡介
- 2.x.x：停止維護(hù)胜卤，兼容性好疆导，代碼不夠簡潔，功能不夠完善葛躏。
- 3.x.x：目前使用最多澈段，但是放棄了IE6-IE7。對(duì)IE8支持紫新，但是界面效果不好均蜜，偏向用于開發(fā)響應(yīng)式布局李剖、移動(dòng)設(shè)備優(yōu)先的web項(xiàng)目芒率。
- 4.x.x：最新版，目前還不是很流行篙顺。
2.4偶芍、bootstrap基本使用
在現(xiàn)階段，我們還沒有接觸JS相關(guān)課程德玫，所以我們只考慮使用它的樣式庫匪蟀。
Bootstrap使用四步曲：
-
創(chuàng)建文件夾結(jié)構(gòu)1.png
2.創(chuàng)建HTML骨架結(jié)構(gòu)
<!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 href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好材彪，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
- 引入相關(guān)樣式文件
<!-- Bootstrap 核心樣式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
- 書寫內(nèi)容
- 直接拿bootstrap預(yù)先定義好的樣式來使用
- 修改bootstrap原來的樣式，注重權(quán)重問題
- 學(xué)好bootstrap的關(guān)鍵在于知道它定義了那些樣式段化，以及這些樣式能實(shí)現(xiàn)什么樣的效果
2.5嘁捷、bootstrap布局容器
bootstrap需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個(gè) .container或者.container-fluid容器，它提供了兩個(gè)作此用處的類显熏。
.container
- 響應(yīng)式布局的容器 固定寬度
- 大屏（>= 1200px）寬度定為 1170px
- 中屏（>=992px）寬度定為 970px
- 小屏（>=768px）寬度定為 750px
- 超小屏（100%）
.container-fluid
- 流式布局容器 百分百寬度
- 占據(jù)全部視口（viewport）的容器
2.6雄嚣、bootstrap柵格系統(tǒng)
bootstrap提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)喘蟆，隨著屏幕或視口（viewport）尺寸的增加缓升，系統(tǒng)會(huì)自動(dòng)分為最多12列。柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局蕴轨，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中港谊。
image.png
- 按照不同屏幕劃分為 1~12等份
- 行（row）可以去除父容器作用15px的邊距
- xs-extra small：超小橙弱；sm-small：蟹怙薄；md-medium：中等膘螟；lg-large：大成福；
- 列（column）大于12，多余的“ 列（column）”所在的元素將被作為一個(gè)整體荆残，另起一行排列奴艾；
- 每一列默認(rèn)有左右15像素的padding
- 可以同時(shí)為一列指定多個(gè)設(shè)備的類名，以便劃分不同份數(shù)内斯。例如：
class="col-md-4 col-sm-6"
柵格嵌套
柵格系統(tǒng)內(nèi)置的柵格系統(tǒng)將內(nèi)容再次嵌套蕴潦。簡單理解就是一個(gè)列內(nèi)再分成 若干份小列。我們可以通過添加一個(gè)新的.row元素和一系列.col-sm-*元素到已經(jīng)存在的.col-sm-*元素內(nèi)俘闯。
<!-- 列嵌套 -->
<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-*類可以將列向右側(cè)偏移潭苞。這些類實(shí)際是通過使用 * 選擇器為當(dāng)前元素增加了左側(cè)的邊距（margin）。
<!-- 列偏移 -->
<div class="row">
<div class="col-lg-4">1</div>
<div class="col-lg-4 col-lg-offset-4">2</div>
</div>
列排序
通過使用.col-md-push-*和.col-md-pull-*類就可以很容易的改變列（column）的順序真朗。
<!-- 列排序 -->
<div class="row">
<div class="col-lg-4 col-lg-push-8">左側(cè)</div>
<div class="col-lg-8 col-lg-pull-4">右側(cè)</div>
</div>
響應(yīng)式工具
為了加快對(duì)移動(dòng)設(shè)備友好的頁面開發(fā)工作此疹，利用媒體查詢功能，并使用這些工具類可以方便的針對(duì)不同設(shè)備展示或隱藏頁面內(nèi)容遮婶。
2.jpg
2.7蝗碎、練習(xí)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>柵格布局</title>
<!-- Bootstrap 核心樣式 -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
[class^="col"] {
border: 1px solid #ccc;
}
.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>
<!-- 如果孩子的份數(shù)相加等于12 則孩子能占滿整個(gè)的container的寬度 -->
<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>
<!-- 如果孩子的份數(shù)相加小于12 則占不滿整個(gè)container的寬度，會(huì)有空白 -->
<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>
<!-- 如果孩子的份數(shù)相加大于12 則多余的那一列會(huì)另起一行顯示 -->
<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>
演示效果
-
超大屏
image.png -
中屏
image.png -
小屏
image.png -
超小屏
image.png
