一:响应式开发
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。
屏幕划分 | 尺寸区间 | 平时设置 |
---|---|---|
超小屏幕(手机) | <768px | 100% |
小屏设备(平板) | >=768px~ < 992px | 750px |
中等屏幕((桌面显示器) | >= 992px~ <1200px | 970px |
宽屏设备(大桌面显示器) | >= 1200px | 1170px |
1.1:响应式布局容器
响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。
媒体查询——>布局容器大小——>子元素的排列的大小
不同屏幕不同样式
二:Bootstrap框架
概念(百度):提供了html+css编码规范;提供了一套简洁、直观、强悍的组件;有自己的生态圈,不断的更新迭代;让开发更简单,提高了开发的效率
快速开发:Bootstrap前端开发框架
移动端,响应式
下载bootstrap
1:
2:
3:
4:
【叽叽哇哇】bootstrap肯定有其他的功能,但我还不会,以后再补充
2.1:bootstrap的使用
- 创建文件夹结构
- 创建html骨架,引入文件(bootstrap的,css的,其他等等需要引入的)(官网有代码,也可去那里复制)
<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 rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
- 书写内容
直接拿Bootstrap 预先定义好的样式来使用
修改Bootstrap 原来的样式,注意权重问题
学好Bootstrap 的关键在于知道它定义了哪些样式,以及这些样式能实现什么样的效果
2.2:布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器,它提供了两个作此用处的类。
- container类
·响应式布局的容器固定宽度
·大屏( >=1200px)宽度定为1170px
·中屏(>=992px)宽度定为970px
·小屏(>=768px)宽度定为750px
·超小屏(100%) - container-fluid类
·流式布局容器百分百宽度
·占据全部视口(viewport)的容器。
·适合单独做移动开发
2.3:栅格系统:系统将页面划分成等宽的列
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列
① 行(row)列(column)
超小屏幕(手机) <768px | 小屏设备(平板) >=768px | 中等屏幕(桌面显示器)>=992px | 宽屏设备(大桌面显示器)>=1200px | |
---|---|---|---|---|
xs-extra small | sm-small | md-medium | lg-large | |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
-
每一列默认有左右15px的padding
-
列大于12,多余的列所在的元素将被作为一个整体,另起一行排列
-
列大于12,少的列所在的元素,有空白
-
可以同时为一列指定多个设备的类名,以便划分不同份数
<div class="col-sm-1 col-md-8">3</div>
- 样式向上兼容
② 列嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。
【叽叽歪歪】列嵌套加个行,去掉父元素的padding值,而且高度自动和父级一样高
③ 列偏移
使用 .col-md-offset-类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距(margin)。
- 代码
- 运行结果
- 【叨叨草图】
只可以向右,并且会有影响
④ 列排序
通过使用 .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>
2.4:响应式布局
类名 | 超小 | 小 | 中 | 大 |
---|---|---|---|---|
.hidden-xs | × | √ | √ | √ |
.hidden-sm | √ | × | √ | √ |
.hidden-md | √ | √ | × | √ |
.hidden-lg | √ | √ | √ | × |
- √ 可见 × 不可见
- visible-xs,visible-sm,visible-md,visible-lg刚好与上面的相反
【叨叨】移动布局 over ❀