目标
1.能够说出响应式布局的基本原理
2.能够使用媒体查询完成响应式导航
3.能够使用Bootstrap的栅格系统
4.能够使用Bootstrap的响应式工具
5.能独立完成阿里百秀案例
目录:
响应式开发
bootstrap前端开发框架
bootstrap栅格系统
阿里百秀首页
1响应式开发
1.1
响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式设置,从而适配不同设备的目的
设备划分 超小屏幕(手机) 小屏设备(平板) 中等屏幕(桌面显示器) 宽屏设备(大桌面显示器)
<768px 768px~992px 992px~1200px =>1200px
1.2响应式布局容器
响应式需要一个父级为布局容器,来配合子元素实现变换效果
原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面效果
平时响应尺寸划分
768px 宽度100%
大于768px 宽度750px
大于992px 宽度970px
大于1200px 宽度1170px
一般来说我们主要考虑5种类型的设备屏幕,各自对应的分辨率通常为:
mobile portrait:竖屏移动设备,< 640px
mobile landscape:横屏移动设备,> 640px
tablet portrait:竖屏平板设备,> 768px
tablet landscape:横屏平板设备,> 1024px
laptop:PC电脑,> 1280px
@media screen and (max-width:767px) {
.container {
width: 100%;
}
li {
width: 33.33%;
}
}
/* 小屏幕下 */
@media screen and (min-width:768px) {
.container {
width: 750px;
}
}
/* 中等屏幕 */
@media screen and (min-width:992px) {
.container {
width: 970px;
}
}
/* 大屏幕 */
@media screen and (min-width:1200px) {
.container {
width: 1170px;
}
}
2.1bootstrap简介
bootstrap来自Twitter,是目前最受欢迎的前端框架,bootstrap是基于html、css、JavaScript的,它简洁灵活,使得web开发更加快捷
中文官网:http://www.bootcss.com/
官网:http://getbootstrap.com/
推荐使用:https://bootstrap.css88.com/
目前使用版本3
2.2bootsrtrap使用
bootstrap使用四部曲:1.先创建文件夹结构,2.创建html骨架结构,3.引入相关样式文件,4.书写内容
1.先创建文件夹结构
多建一个bootstrap
利用我们自己的样式覆盖原先的样式
2.3 布局容器
bootstrap需要为页面内容和栅格系统包裹一个.container容器,Bootstrap预先定义好了这个类,叫.container它提供两个作此用处的类
1.container类
响应式布局的容器,固定宽度
大屏 大于等于1200px 宽度固定为1170px
中屏 大于等于992px 宽度固定为970px
小屏 大于等于768px 宽度固定为750px
超小屏 100%
2.container-fluid类
流式布局容器 百分百宽度
占据全部视口viewport的容器
适合于单独做移动端开发
3栅格系统
3.1栅格系统
栅格系统英文为“grid systems”,也有人翻译为“网格系统”,它是指将页面布局划分为等宽的列,然后通过列数来定义模块化页面布局
bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口的尺寸的增加,系统会自动分为,最多12列
bootstrap里面的container宽度是固定的,但是不同屏幕下,container的宽度不同,我们再把container划分为12等分
3.2栅格系统使用
栅格系统用于通过一些列的行row和列colum的组合来创建页面布局,你的内容就可以放到这些创建好的布局中
超小屏幕<768px 小屏设备大于等于768px 中等屏幕 大于等于992px 宽屏设备 大于等于1200px
.container最大宽度 100% 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数 12
行必须放到container容器里面
我们实现列的平均划分 需要给列添加类前缀
xs-extra small:超小 sm-small:小 md-medium:中等 lg-large:大
列column大于12 多余的列所在的元素将被作为一个整体另起一行排列
每一列默认15px左右的padding
看呀同时为一列指定多个设备的类名,以便群不同分数 例如 class="col-md-4 col-sm-6"
如果孩子份数相加等于十二,则孩子能占满整个container宽度
小于十二会有空白
大于十二多余的那一列会另起一行
3.3列嵌套
栅格系统内置的栅格系统将内容再次嵌套,简单理解就是一个列内再分为若干分小列,我们可以新加一个.row元素和一系列.col-sm-*元素到已存在的.col-m-*元素内
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row ree">
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
3.4列偏移
使用.col-md-offset-类可以将列向右偏移,这些类实际是通过使用选择器为当前元素增加了左侧的边距(margin)
<div class="container">
<div class="row">
<div class="col-md-4 ">zuo</div>
<div class="col-md-4 col-md-offset-4">you</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">中间</div>
</div>
3.5列排序
通过使用.col-md-push-和使用.col-md-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>
3.6响应式工具
为了加快对移动设备友好的页面开发工作、利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容
类名 超小屏 小屏 中屏 大屏
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏
与之相反的是visible
4.gird布局
什么是grid
flex是轴线布局,只能指定项目针对轴线位置,可以看做一维布局,grid则是把容器划分为行和列,产生单元格,然后指定项目所在的单元格,frid比flex强大。
每个gird布局都有隐藏的网格线
间距gap
区域area 划分自己的区域
容器container
项目item
行row
列column
内容content
容器属性
1.grid-template-colums
2.grid-template-row
3.grid-row-gap 间距
4.grid-column-gap
5.grid-gap 34缩写
6.grid-template-areas 区域不需要则用点.表示 'a . c'
7.grid-auto-flow 排放方式 行和列
8.justify-items设置单元格内容的水平和垂直的对齐方式 start/end/center/stretch
9.align-items 设置单元格内容的水平和垂直的对齐方式
10place-items 89缩写
11.justify-content
12align-content
13place-content 11 12缩写
14grid-auto-columns
15.grid-auto-rows
grid-template
想要多少行或者列,就填写相应属性值得个数,不填写自动分配
项目属性
1.grid-column-start
2.grid-column-end
3.grid-row-start
4.grid-row-end
5.简写 gird-cloum:1 / 3;不是除法
gird-cloumn-start:span 3;
align-self
justify-self
nav {
width: 600px;
height: 600px;
border: 10px solid blue;
display: grid;
/* 剩余空间填充分配 */
/* grid-template-columns: repeat(auto-fill, 100px); */
/* grid-template-columns: repeat(3, 1fr);
grid-template-columns: 1fr minmax(150px 1fr); */
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px;
/* row-gap: 20px;
column-gap: 20px; */
/* gap: ; */
grid-template-areas: 'a a c' 'd e f' 'g h i' 'j';
/* grid-auto-flow: row; */
/* justify-items: center;
align-items: center; */
/* place-items: center center; */
/* align-content: center;
justify-content: space-around; */
}
/* style="grid-column-start: 1;grid-column-end: 3;" */
nav>div {
border: 1px solid red;
}