一、响应式开发
1、开发原理
所谓的响应式布局，就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而达到适配不同设备的目的。
我们将常用的智能设备分为：
- 小于768的为超小屏幕（手机）
- 768~992之间的为小屏设备（平板）
- 992~1200的中等屏幕（桌面显示器）
- 大于1200的宽屏设备（大桌面显示器）
2、布局容器
响应式布局需要一个父级元素作为布局容器，来配合子级元素实现响应变化效果。在不同的屏幕尺寸下，通过媒体查询来改变这个布局容器的大小。然后再改变李曼子元素的排列和大小，从而实现了在不同屏幕下，页面布局的不同。
我们通常会给布局容器一个版心，根据屏幕尺寸的不同我们通常将版心分别定为：
- 超小屏幕（手机，小于 768px）：设置宽度为 100%
- 小屏幕（平板，大于等于 768px）：设置宽度为 750px
- 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
- 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px
/* 1. 超小屏幕下 小于 768 布局容器的宽度为 100% */
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
}
/* 2. 小屏幕下 大于等于768 布局容器改为 750px */
@media screen and (min-width: 768px) {
.container {
width: 750px;
}
}
/* 3. 中等屏幕下 大于等于 992px 布局容器修改为 970px */
@media screen and (min-width: 992px) {
.container {
width: 970px;
}
}
/* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
3、案例
// 响应式导航栏
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.container {
width: 750px;
margin: 0 auto;
}
.container ul li {
float: left;
width: 93.75px;
height: 30px;
background-color: green;
}
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
.container ul li {
width: 33.33%;
}
}
</style>
<body>
<div class="container">
<ul>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
</ul>
</div>
</body>
二、bootstrap
1、概念
Bootstrap 是基于HTML、CSS 和 JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。拥有标准化的HTML + CSS 编码规范，而且拥有一套简洁直观的组件，让开发更加简单，提高了开发的效率。
2、样式库的基本使用
① 创建标准的文件架结构
② 创建 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 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="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//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="//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>
③ 引入核心样式文件
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
④ 开始绘制页面内容
可以直接用 框架定义好的样式来使用，如果不满意，也可以修改框架定义好的样式，但是要注意权重问题。
3、布局容器
bootstarp 需要把页面内容包裹在一个容器内，并提供了两个已经封装好的类，我门只需要把这个类写到最外层的盒子上，来实现容器的定义：
① .container
- 响应式布局的容器 固定宽度
- 大屏 ( >=1200px) 宽度定为 1170px
- 中屏 ( >=992px) 宽度定为 970px
- 小屏 ( >=768px) 宽度定为 750px
- 超小屏 (100%)
② container-fluid
- 流式布局容器 百分百宽度
- 占据全部视口（viewport）的容器。
4、栅格系统
① 概念
bootstarp 提供了一套响应式、移动设备优先的的流式栅格系统，默认将父元素的宽度分为12等份，即1行12列。栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局。可以通过设置子元素所占的份数来决定子元素的宽度。
如果一行的的列数超过了12，那么多余的列将会作为一个整体另起一行排列。如果列数小于12，那将占不满一行，留出空白。每一列都有左右15px的padding值。
② 初步使用
栅格系统是分为行与列的，所以首先我们要给一个元素添加类名为 row ，创建一个行。其次是设置列，但为了适应不同大小的屏幕，我们在设置元素所占列数的类名在不同屏幕的大小下是不同的。
| 超小屏幕 width<768px | 小型屏幕 width>=768px | 中等屏幕 width>=992px | 宽屏设备 width>=1200px | |
|---|---|---|---|---|
| 容器最大宽度 | 自动（100%） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
我们可以为一列指定多个在不同屏幕尺寸下的类名，让其在不同的屏幕尺寸中有不同的表现。
<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>
<!-- 如果孩子的份数相加等于12 则孩子能占满整个 的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>
<!-- 如果孩子的份数相加 小于 12 则会？ 则占不满整个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-1">4</div>
</div>
<!-- 如果孩子的份数相加 大于 12 则会？多于的那一列会 另起一行显示 -->
<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>
效果展示：
③ 栅格嵌套
我们可以将栅格系统中的摸一个列再次分为12个小列，只需要在这个列下面加一个盒子添加类名 row ，就能通过一系列 .col- 来分解该列。
<!-- 列嵌套 -->
<div class="col-sm-4">
<div class="row">
<div class="col-sm-6">a</div>
<div class="col-sm-6">b</div>
</div>
</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
效果展示：
④ 列偏移
给某一列增加 .col-特定屏幕-offset- 等类名可以将该列向右偏移，实际上是通过使用 * 选择器为当前元素增加了 margin-left 来实现的。
<!-- 列偏移 -->
<div class="container">
<div class="row">
<div class="col-md-3">左侧</div>
<!-- 偏移的份数 就是 12 - 两个盒子的份数 = 6 -->
<div class="col-md-3 col-md-offset-6">右侧</div>
</div>
<div class="row">
<!-- 如果只有一个盒子 那么就偏移 = (12 - 8) /2 -->
<div class="col-md-8 col-md-offset-2">中间盒子</div>
</div>
</div>
效果展示：
⑤ 列排序
通过使用 .col-特定屏幕-push- 和 .col-特定屏幕-pull- 类名，就可以改变列的排列顺序。push 是向右侧拉，pull 是向左侧拉。
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">左侧</div>
<div class="col-md-8 col-md-pull-4">右侧</div>
</div>
</div>
效果展示：
⑥ 响应式工具
在不同的屏幕的页面中，如果我们想要显示不同的内容，我们可通过特定的类名，来设置页面的某些内容是否显示或隐藏。
也可以直接通过 visible- 来设置某内容在哪种屏幕下显示。
<div class="container">
<div class="row">
<div class="col-xs-3">
<span class="visible-lg">我会显示哦</span>
// 在大屏中显示 其他不显示
</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3 hidden-md hidden-xs">我会变魔术哦</div>
// 在中屏 和 超小屏中 不显示 其他显示
<div class="col-xs-3">4</div>
</div>
</div>
结果展示：
扫一扫
1316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
