前端学习记录21-移动端布局-(响应式布局、Bootstrap框架)
前端学习记录21-移动端布局-响应式布局、Bootstrap框架
- 响应式布局
-
- 原理
- bootstrap开发框架(说实话也不叫框架)
-
- bootstrap使用方法
- bootstrap布局容器
- bootstrap响应式工具
- bootstrap栅格系统
-
- bootstrap栅格系统列偏移
- bootstrap栅格系统列排序
- bootstrap栅格系统列嵌套
响应式布局
响应式开发是使用媒体查询
针对不同的宽度设备内进行布局和样式的设置，从而适配不同的设备
在bootstrap中的设备划分
超小屏幕 <768px
小平设备 >=768 ~ <992px
中等屏幕 >=992px ~ <1200px
宽屏设备 >=1200px
原理
响应式需要一个父级作为布局容器，来配合子级元素实现变化效果
原理就是在不同屏幕下，通过媒体查询改变这个布局容器的大小，再改变里面子元素的排列方式和大小
从而实现不同屏幕下，看到的不同页面布局和样式变化
bootstrap响应式的尺寸划分
超小屏幕 宽度设为100%
小屏幕 宽度设为750px
中等屏幕 宽度设为970px
大屏幕 宽度设为1170px
bootstrap开发框架(说实话也不叫框架)
优点：
标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断更新迭代
开发更简单，提高了开发效率
缺点：实际不算框架，算ui库
bootstrap使用方法
1.创建文件夹结构
2.创建html结构
3.引入相关样式文件
4.书写内容
<head>
<meta charset="UTF-8">
要求当前网页使用IE浏览器最高版本的内核来渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">这里引入的文件可选很多
<title>Documenttitle>
head>
bootstrap布局容器
bootstrap需要为页面内容和栅格系统包裹一个.contanier容器,bootstrap预先定义好了这个类
叫.container它提供了两个作用此处的类。
1.container类
响应式布局容器 固定宽度
大屏 1170px
中屏 970px
小屏 750px
超小屏 100%
写了这个类 不需要写媒体查询
注意:这个container有左右内边距15px
2.container-fluid类
流式布局容器 百分之百宽度
占据全部视口的容器
适合于单独做移动端开发
这个类还是有左右内边距15px
bootstrap响应式工具
为了加快移动设备友好的页面开发工作，利用媒体查询功能，
并且使用这些工具类方便针对不同设备展示或隐藏内容
.hidden-xs 隐藏超小屏 其他可见
.hidden-sm 隐藏小屏 其他可见
.hidden-md 隐藏中屏 其他可见
.hidden-lg 隐藏大屏 其他可见
与其相反的是 visible 只在某个屏幕显示
bootstrap栅格系统
将页面布局划分为等宽的列 然后通过列数的定义来模块化页面布局
bootstarp提供了一套响应式、移动设备优先的流式栅格系统，
随着屏幕或视口尺寸的增加，系统会自动分为最多12列
bootstrap里面container宽度是固定的，但是不同屏幕下，container的宽度不同
划分为12等份，里面内容也会自适应
| 栅格选项参数 | ||||
|---|---|---|---|---|
| .container最大宽度 | 100% | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列数 | 12 | |||
| 注意事项 | 可为同一列指定多个类，从而控制不同屏幕的显示 每一列有左右15px的padding 如果孩子份数相加等于12份 孩子能占满整个container的宽度 如果孩子份数相加小于12份 则占不满整个container的宽度 会有空白的情况 如果孩子份数相加大于12份 多出来的那个列会另起一行显示 |
|||
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4div>
div>
div>
bootstrap栅格系统列偏移
使用.col-md-offset-*类 可以将列向右偏移
这些类实际是通过*选择器为当前元素增加了左侧的边距
<div class="container">
<div class="row">
<div class="col-md-4">左侧div>
<div class="col-md-4 col-md-offset-4">右侧div>
div>
<div class="row">
<div class="col-md-8 col-md-offset-2">中间div>
div>
div>
bootstrap栅格系统列排序
使用.col-md-push-* 和.col-md-pull-*类 可改变列排序
把右边的盒子pull过来 把左边的盒子push过去
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">左侧div>
<div class="col-md-7 col-md-offset-1 col-md-pull-5">右侧div>
div>
div>
bootstrap栅格系统列嵌套
栅格系统内置的栅格系统内容再次嵌套，简单理解就是一个列再分成若干小份
可以通过添加一个新的.row元素和一系列的.col-sm-*元素到已存在的.col-sm-*
想要外边距需要在 每个盒子中嵌套一个小盒子
列嵌套最好加一个 .row 这样可以去掉父元素的padding 而且高度自动和父级一样高
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-6">adiv>
<div class="col-md-6">bdiv>
div>
div>
<div class="col-md-4">2div>
<div class="col-md-4">3div>
div>
div>