响应式，bootstrap框架，栅格系统 (重要)
目标
能够说出响应式开发的基本概念
了解响应式开发的原理
了解bootstrap的栅格系统的使用(重点)
能够完成微金所的头部
能够分析bootstrap导航条结构
响应式
什么是响应式布局
响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（手机、平板、pc电脑） ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
优点：
一套代码可以解决多个终端
**缺点： **
1. 需要兼容多个终端 开发效率低
2. 有很多处理兼容的代码 代码冗余较大 加载速度慢
响应式开发现状：
1. 如果公司里面已经有了PC网页 那么直接开发手机端就可以
2. 如果是一个新建站点, 并且这个网站比较简约 可以采用响应式来写
3. 国内的响应式网站很少, 国外较多, 国内一般运用在后台管理系统
4. 不是所有的网站都适合响应式 基本上是一些简约式的网站适合
响应式开发与移动web开发的比较
| 开发方式 | 移动web开发+pc开发 | 响应式开发 |
|---|---|---|
| 引用场景 | 一般已经有了PC端网站，只需要端独开发移动端网站即可 | 针对一些新建网站，并且要求适配移动端 |
| 开发 | 针对性强，开发效率高 | 兼容各种终端，效率低 |
| 适配 | 只能适配移动端或者PC端，pad上体验比较差 | 可以适配各种终端 |
| 效率 | 代码简洁，加载快 | 代码相对复杂，加载慢 |
//思考：响应式开发的原理是什么？
设备分类
| 分类 | 宽度范围 |
|---|---|
| 大屏设备 | >1200px |
| 中屏设备 | 992px~1200px |
| 小屏设备 | 768px~992px |
| 超小屏设备 | < 768px |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P3Gd0re1-1586057407675)(image/1.png)]
需求：制作一个响应式版心 (根据屏幕的变化动态发生改变)
大屏设备(>1200px) 版心：1170px 背景色：红色
中屏设备(992-1200) 版心：970px 背景色：蓝色
小屏设备(768-992) 版心：750px 背景色：黄色
超小屏设备(<768px) 版心：100% 背景色：绿色
.w {
width: 100%;
height: 200px;
margin: 0 auto;
background-color: lime;
}
/* 覆盖式的写法: 先写最大范围的 然后用小范围的覆盖大范围的 */
@media screen and (min-width: 768px) {
.w {
width: 750px;
height: 200px;
margin: 0 auto;
background-color: yellow;
}
}
@media screen and (min-width: 992px) {
.w {
width: 970px;
height: 200px;
margin: 0 auto;
background-color: blue;
}
}
@media screen and (min-width: 1200px) {
.w {
width: 1170px;
height: 200px;
margin: 0 auto;
background-color: red;
}
}
注意: 媒体查询仅仅是一个css使用的限制条件,并不会增加css的权重
弊端：现在只有一个div，要做一套响应式布局，就需要如此多的代码，非常的麻烦，因此我们会更多的借助一些响应式的框架，比如bootstrap。
bootstrap框架
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
bootstrap中文网
特点：
- 组件简洁大方、代码规范精简、界面自定义性强。
- Bootstrap是基于HTML5和CSS3开发的, js功能效果依赖于 jQuery( 第三方库, 后面讲解 )。
- Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。
优点：
- 有自己的生态圈，不断的更新迭代
- 提供了一套简洁、直观、强悍的组件
- 标准化的HTML+CSS编码规范
- 让开发更简单，提高了开发效率。
- 扩展性强，虽然界面组件样式已经定义好了，我们还可以自定义，修改默认样式。
版本：
- 2.x.x 停止维护
- 优点：兼容性好
- 缺点：代码不够简洁、功能不够完善
- 3.x.x 目前使用最多
- 优点：稳定，偏向于开发响应式布局，移动设备优先的WEB项目
- 缺点：放弃了IE67，对IE8支持但是界面效果不友好
- 4.x.x 阶段
基本模板
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>bootstrap基本模板title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<h1>你好，世界！h1>
<script src="lib/jquery/jquery-1.12.4.js">script>
<script src="lib/bootstrap/js/bootstrap.min.js">script>
body>
html>
normalize.css和传统的的reset.css有什么不同:
reset.css是将所有的边距全部设置为0 达到统一 而normalize.css是保留边距 只是将所有的边距都设置成一样
全局样式
container容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。默认带了15px的padding值。
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
div>
这两种 容器类不能互相嵌套。
栅格系统 (重要)
栅格系统，也叫网格系统
栅格系统： 是BS实现响应式的核心所在 其底层也是媒体查询
栅格系统： 不管在什么大小的容器里面，都将这个容器分为12份，在不同大小屏幕里面，占的份数不同
最终目的: 在任何大小的屏幕上 都有较好的浏览体验
// 假设我现在有12个盒子
如果是大屏幕设备, 每行放 6 个 div, 可以放两排
如果是中屏设备, 每行放 4 个 div, 可以放三排
如果是小屏设备, 每行放 3 个 div, 可以放四排
如果是超小屏设备, 每行放 2 个 div, 可以放六排
大屏 6个div 两 12份 一个div占2份 放6个 大屏上: 16.666% 浮动
中屏 4个div 三 12份 一个div占3份 放4个 中屏上: 25% 浮动
小屏 3个div 四 12份 一个div占4份 放3个 小屏上: 33.33% 浮动
超小屏 2个div 六 12份 一个div占6份 放2个 超小屏: 50% 浮动
不同大小屏幕里面，每一个盒子占多少份 (一行放多少个 然后直接拿12除以一行的个数就行了)
大屏 一个盒子占2份 .col-lg-xx
中屏 一个盒子占3份 .col-md-xx
小屏 一个盒子占4份 .col-sm-xx
超小屏 一个盒子占6份 .col-xs-xx
.row用于抵消.container容器的15px的padding值- 可以在
.row中嵌套column
栅格系统常用类（总共12列）
| 类名 | 例子 | 解释 |
|---|---|---|
| .col-xs-xx | .col-xs-6 | 在超小屏幕（及以上）生效 |
| .col-sm-xx | .col-sm-6 | 在小屏幕（及以上）生效 |
| .col-md-xx | .col-md-6 | 在中屏幕（及以上）生效 |
| .col-lg-xx | .col-lg-3 | 在大屏幕及生效，占1/4 |
【案例：响应式栅格系统】
【案例：列嵌套.html】
<div class="col-lg-4">
<div class="row">
<div class="col-lg-6">div>
<div class="col-lg-6">div>
div>
div>
【案例：列偏移.html】
<div class="row">
<div class="col-lg-3">div>
<div class="col-lg-6 col-lg-offset-3">div>
div>
响应式工具
//1. 大屏显示
//2. 中屏不显示
//3. 小屏显示
//4. 超小屏不显示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZryfGSz3-1586057407677)(image/3.png)]
推荐使用hidden相关的属性
微金所
目录结构
- wjs…项目文件夹
- js…js文件目录
- lib…第三方框架目录
- images…图片文件目录
- css…css文件目录
- fonts…字体图标目录
- favicon.ico…网站图标
- index.html…站点入口
引入字体图标
<link rel="icon" href="favicon.ico" />
页面结构
<div class="wjs-header">div>
<div class="wjs-nav">div>
<div class="wjs-banner">div>
<div class="wjs-advantage">div>
<section class="wjs-books">section>
<div class="wjs-product">div>
<div class="wjs-news">div>
<div class="wjs-partner">div>
头部区域
1. 构建响应式版心 (header > container > row > 栅格系统的盒子)
2. 利用栅格布局搭建响应式盒子模型 (大屏和中屏: 2 5 2 3)
3. 填充内部细节 (字体图标的使用 1.自己自定义的字体图标 (需要自己引入iconfont.css文件) 2. 使用BS自带的字体入标 直接调用对应的类名就可以)
4. 使用响应式工具隐藏盒子
在使用BS的过程中,发现BS提供的效果和自己想要的效果有一些偏差,可以使用自己定义的css覆盖掉bs默认的css 注意权重
组件的基本使用
组件的使用
1. 对于复杂的组件 不要直接运用 自己写一个demo专门熟悉这个组件
2. 熟悉组件里面的代码和页面模块的对应关系 (F12)
3. 将不需要的模块直接干掉
4. 将自己的内容填写到对应位置
修改导航条的组件
html:
1. 将container-fluid替换成container
2. 干掉了form模块
3. 干掉了dropdown模块
4. 替换里面的内容
5. 将 class="sr-only" aria-expanded 可以干掉 (可选)
css:
6. 将背景颜色换成白色
7. 给a标签添加上line-height: 50px;,height: 80px (一个是列表里面的 一个是brand)
8. 在brand里面添加字体图标 (给字体图标设置为中线对齐)
9. 找到active对应的那个类 改写
10. 找到hover效果的那个类 改写
11. 右侧导航在小屏下面隐藏
12. 给右边的那个按钮修改margin-top
轮播图区域改写
1. 将大图片作为一张背景图放到通栏盒子中 设置background-position: center;
2. 给盒子添加图片对应的高度
3. 在超小屏下面隐藏背景图片 (并且将高度设置为auto)
4. 添加一个img插入图片 引入小图片 这个img在大屏和中屏和小屏都是隐藏的
5. 让img图片的width保持百分百
支付交易区域
1. 构建基本的栅格布局 (中屏以上 放3个 小屏以上放2个 超小屏直接隐藏)
2. 内部使用媒体对象组件
3. 改写媒体对象组件
立即预约
1. 响应式版心里面套用左浮动盒子和右浮动盒子 (全局css样式可以直接查到)
2. 父盒子不要添加固定的高度 而是添加上下padding 这样后期缩小屏幕的时候折行不会有问题
3. 后边的盒子在超小屏幕下面隐藏