响应式开发
响应式开发原理
使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目度。
响应式需要一个父级作为布局容器,来配合子级元素来实现效果变化。就是在不同的屏幕下,通过配体查询来改变这个布局容器的大小,再改变子元素的排列方式呵呵大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。
常用的尺寸
- 手机:设置宽度为100%
- 平板:设置宽度为750px
- 桌面显示器:设置宽度为970px
- 大桌面显示器:设置宽度为1170px
Bootstrap
bootstrap中文网:https://www.bootcss.com/
本文章的bootstrap介绍的是bootstrap4版本
Bootstrap简介
Bootstrap来自Twitter(推特),是一个前端框架,是基于html、css和JavaScript开发的,它简介灵活,使得web开发更加快捷
优点:
- 标准的html+css编码规范
- 提供了一套简洁、直观、强悍的组件
- 有自己的生态圈,不断的更新迭代
- 让开发更加简单,提高开发的效率
基础模板
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<!-- 视口的设置:视口的宽度和设备一致,默认的缩放比例和pc端一致 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 要求当前页面使用ie浏览器的最高版本的内核来渲染 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
布局容器
bootstrap需要为页面内容和栅格系统包裹一个.container容器,bootstrap预先定义好了这个类(因此不需要想之前一样再去写那些媒体查询了),叫.container,它提供了两个作此用处的类
container类(响应式开发使用)
- 响应式布局的容器固定宽度
- 大屏( >=1200px)宽度定为1170px
- 中屏(>=992px)宽度定为970px
- 小屏(>=768px)宽度定为750px
- 超小屏(100%)
container-fluid类(使用移动端开发可以考虑使用)
- 流式布局容器 百分百宽度
- 占据全部视口(viewport)的容器
- 适合单独做移动开发
Bootstrap栅格系统
栅格系统,它是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。
bootstrap里面的container宽度死固定的,但是不同屏幕下,container的宽度不同,我们再把container划分为12等份。
栅格选项参数
栅格系统用于通过一些列的行(row)与列(column)的组合来创建页面布局
注意:
- 列数最好相加为12,若大于12则多与的列会另一行显示
- 行(row)必须放到container布局容器中
- 每一列默认有15px的padding
- 可以同时为一列指定多个设备的类名,以便划分不同分时,例如
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
代码示例:
实现效果:
在大屏下每行四个,在中屏下每行3个,在小屏下每行2个,在超小屏下每行1个
css代码:
<style type="text/css">
[class^="col"]{
border: 2px solid #008000;
}
</style>
html代码:
<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>
</div>
列嵌套
注意:列嵌套和row更配哦,我们在列嵌套加一行row,可以取消父元素的padding值,而且高度自动和父级一样高
代码示例:
- css样式:
[class^="col"] {
border: 2px solid #008000;
}
.bg div {
background-color: #7FFF00;
border: 2px solid black;
}
<!-- 列嵌套 -->
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="row bg">
<div class="col-lg-6">a</div>
<div class="col-lg-6">b</div>
</div>
</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>
</div>
- 效果展示
列偏移
使用offset-md-份数 来实现列向右偏移。这个类的实现其实是通过为当前元素添加左侧的外边距来实现的。
代码示例:
<div class="col-md-4 offset-md-4"></div>
列排序
通过order-(1-12)来进行顺序的排列,也能用.order-first and .order-last表示第一个和最后一个
代码示例:
<div class="row box">
<div class="col-md-4 order-3">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
效果图:
显示与隐藏
代码示例:
<div class="col-md-4 d-none d-md-block">2</div>
字体图标
font-awesome中文网:http://www.fontawesome.com.cn/
在bootstrap4中,去除了内置的字体图标,但是可以引用外部网站的字体图标。而我所用的则是font-awesome,去其官网下载,进行引用css即可。
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />