响应式网页、Bootstrap、全局CSS样式
1 响应式网页
1.1 概述
- 响应式网页定义
Responsive Web Design:响应式网页设计,专为改进移动互联网浏览体验提出的概念。
基本理念:集中创建页面的图片和排版大小,智能地根据用户行为和使用的设备环境进行相应布局(自动更改布局、图片、文字效果)——一个页面兼容各种终端 - 响应式网页构成
1)不能固定宽度,必须是流式网格布局(Fluid:流式、流动式、液态);
2)可伸缩的图片和文字,随容器大小改变;
3)CSS3 Media Query能根据浏览设备的宽和高调用不同CSS
响应式布局网页问题:代码复杂度极大增加,只适用于内容不太多的页面(企业官网、门户网站)
1.2 测试响应式网页
- 浏览器设备模拟器
简单方便;测试效果有限 - 第三方工具
无需添置太多真实设备,测试方便;但测试效果有限,需进一步验证;(phonegap,Android ADT,IOS Xcode,www.browserstack.com) - 真实设备.
测试效果真实可靠,但测试任务量较大
1.3 编写响应式网页
-
允许网页宽度自动调整
在head标签中声明viewport元标签<head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0 user-scalable=no"> </head>
viewport:元标签(视口),IOS最先引入,手机中显示网页内容的虚拟窗口的大小一般远大于手机屏幕,HTML可以指定视口大小
width:视口的宽度,取值为数值或device-width;
initial-scale:初始缩放倍率
maximum-scale:允许缩放的最大倍率
minimum-scale:允许缩放的最小倍率
user-scalable:是否允许用户手动缩放;1/0/yes/no
height:视口高度,一般不指定
IOS专用属性:minimal-ui:ios ui设置在ios设备上隐藏导航栏和地址栏
一般设置视口宽度为设备宽度,不允许缩放 -
不使用绝对宽度
所有元素的宽不能指定固定值,必须使用相对宽度:width:60%或auto; -
相对大小的字体
使用font-size:rem/em -
流式布局
使用流式布局+弹性布局(float+flex):布局各个区块位置都是浮动的;搭配媒体查询技术(CSS Media Query):响应式网页必备条件,可以自动根据当前浏览器设备的不同选择执行部分CSS样式 -
图片自适应
实现图片的自动缩放:img{max-width:100%;}或者根据客户端屏幕大小加载不同尺寸的图片 -
选择加载CSS
不推荐根据浏览器不同加载不同CSS文件:<link rel="stylesheet" href="tinyScreen.css" media="screen and (max-device-width:400px)"> <link rel="stylesheet" href="smallScreen.css" media="screen and (min-width:400px) and (max-device-width:600px)">
-
CSS的@media规则
推荐根据媒体查询不同屏幕宽度选择执行CSS文件中部分CSS规则扫描二维码关注公众号,回复: 4459470 查看本文章@media screen and (min-widht:768px) and (max-diwth:991px) { 选择器样式 }
2 Bootstrap
2.1 Bootstrap
2.1.1 Bootstrap定义
简洁、直观、强悍的前端开发框架让web开发变得迅速简单
官网:htttp://getbootstrap.com
中文网站:http://www.bootcss.com
Bootstrap是最受欢迎的HTML、CSS和JS框架,用于开发响应式布局、移动设备优先的WEB项目
Bootstrap提供Sass变量和大量mixin、响应式扎个系统、可扩展的预制组件、基于jQuery的强大插件系统
2.1.2 目录说明
- css目录——用于存放Bootstrap框架使用的样式文件
bootstrap.css:框架的样式文件
bootstrap.min.css:框架的样式压缩文件
bootstrap-grid.css:框架的栅格文件
bootstrap-reboot.css:框架的引导文件 - js目录——用于存放Bootstrap框架使用的核心javascript文件
bootstrap.js:框架的核心javascript文件
bootstrap.min.js:框架的核心javascript压缩文件
按顺序导入4个文件:bootstrap.css、jquery.min.js、popper.min.js、bootstrap.min.js
2.1.2 模板
/*声明*/
<!DOCTYPE html>
<html>
<head lang="en">
/*元数据*/
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
/*样式*/
<link rel="stylesheet" href="../css/bootstrap.css"/>
/*脚本*/
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<title></title>
</head>
<body>
//容器
<div class="container">
</div>
</body>
</html>
2.1.3 相关技术
Bootstrap许多组件需要依赖JavaScript运行,即依赖jQuery、Popper.js以及开发的JavaScript插件:jquery.min.js文件,popper.min.js文件
2.3 bootstrap.css
按顺序导入4个文件:bootstrap.css-> jquery.min.js->popper.min.js->bootstrap.min.js
2.3.1 CSS Reset
有些HTML标签在浏览器有默认的样式
-html、body、h#、p、ul、li、a等;
需要使用css代码改写浏览器默认设置以保证兼容性;
2.3.2 box-sizing
box-sizing用于设置元素的框模型(盒模型)的方式,取值:
content-box:默认取值,宽度和高度指元素的内容框;
border-box:宽度高度设置元素的内边距+左右边框+内容宽高
3 全局CSS样式
3.1 全局CSS样式
Bootstrap需要使用HTML5的元素和属性;
<!DOCTYPE html>
<html lang="zh-CN"></html>
为了确保绘制和触屏缩放,在<head>之中添加viewport元数据元素
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
- 布局容器
.container用来固定宽度并支持响应式布局的容器;
.container-fluid类用于100%宽度,占据全部视口(viewport)的容器 - 按钮
按钮颜色:
.btn-success;.btn-warning;.btn-danger;.btn-info;.btn-primary;.btn-secondary;.btn-dark;.btn-ligth;.btn-link
按钮边框颜色:
btn-outline-warning黄色边框
btn-outline-danger红色边框
按钮大小:
btn-lg
btn-sm
btn-block - 图片
rounded圆角图片;
rounded-circle椭圆图片;
img-thumbnail缩略图;
img-fluid响应式图片 - 文本
字体大小:h#;
对齐:text-left、text-center、text-right、text-justify、text-nowrap;
斜体:font-italic
字体粗细:font-weight-bold
大小写:text-lowercase、text-uppercase、text-capitalize(首字母大写)
颜色:text-success、text-warning、text-error、text-info、text-primary - 列表
无序列表ul和有序列表ol
.list-unstyled去除点点
.list-inline
.list-group定义列表组
.list-group-item定义列表项
.active激活状态
.disabled禁用
list-group-item-danger列表项颜色(不列举) - 表格
基本表格.table
条纹状表格.table-striped
带边框表格.table-bordered
鼠标悬停.table-hover
响应式表格(表格父级元素).table-responsive
背景色table-danger - 辅助样式
浮动float- * -left / float--right, 表示不同的屏幕lg/md/sm;使用.clearfix解决高度坍塌问题
显示/隐藏.visible/.invisible
背景.bg-success/warning/info/dange/error/primary
边框.border-0去除边框;-top/right/bottom/left设置单边;-success/warning…边框颜色
圆角.rounded/.rounded-0圆角和去除圆角;.rounded-top/right/bottom/left
居中对齐.mx-auto
宽度.w- * ( * : 25/50/75/100 )
高度.h- * ( * : 25/50/75/100 )
外边距m-0~5,分别表示0.25/0.5/1/1.5/3rem;m-auto;单边设置mt/mr/mb/ml-1
内边距同外边距,使用p代替m;
内外边距响应式:m-*-n,m取值为m或者其单边形式, *表示xl/lq/md/sm, n:0~5
3.2 栅格系统
3.2.1 概述
Bootstrap提供一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(Viewport)的增加,系统自动分为最多12列,通过一系列行与列的组合来创建页面布局
3.2.2 栅格系统工作原理
row必须包含在容器.container(固定宽度).container-fluid(100%宽度)内;row中包含一组column存内容,提供预定义的类,设置不同尺寸
<div class="row">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
<h1>不同屏幕下不同的占比</h1>
<div class="row">
<div class="col-lg-4 col-md-2 col-sm-12">第一列</div>
<div class="col-lg-4 col-md-8 col-sm-12">第二列</div>
<div class="col-lg-4 col-md-2 col-sm-12">第三列</div>
</div>
3.2.3 栅格布局
web页面布局的三种方法:
布局方法 | table布局 | div+css布局 | Bootstrap栅格布局 |
---|---|---|---|
优点 | 简单易控制 | 语义正确,渲染效率高 | 简单易控制,语义正确,渲染效率高,支持响应式 |
缺点 | 语义错误,渲染效率低 | 控制麻烦 | 页面非常复杂就不适合使用栅格 |
栅格,每行12个单元格,元素在不同屏幕下占的格子数
栅格布局最外层使用容器.container定宽容器或.container-fluid变宽容器;容器中声明.row每行平分12个单元格;行中声明列.col(每列宽度占比n/12)
总结:不同屏幕下列的适应性问题
col-xl-* 只能在xl屏幕下有效
col-lg-* 能在xl/lg屏幕下有效
col-md-* 能在xl/lg/md屏幕下有效
col-sm-* 能在xl/lg/md/sm屏幕下有效
小分辨率往大分辨率兼容
列偏移:使用列偏移指定列及其后的列向右偏移:offset-*-n,*表示屏幕像素类型,n表示1~11;底层原理是通过添加margin-left实现偏移
3.2.3 弹性布局
使用d-*-flex、d- * -inline-flex类创建弹性容器; *代表xl/lg/md/sm
- 水平方向
.flex- * -row设置弹性子元素水平显示,默认效果;
.flex- * -row-reverse设置右对齐显示; - 垂直方向
.felx- * -column设置弹性子元素垂直方向现实;
.flex- * -column-reverse翻转子元素; - 内容排列
.justify-content-* -value用于修改主轴对齐方式,value取值:
start默认
end
center
between
around - 响应式flex类
根据不同设备设置flex类从而实现页面响应式布局:sm,md,lg或xl;
根据不同屏幕设备创建弹性盒子容器:.d-sm/md/lg/xl-flex;
根据不同屏幕设备在水平方向/垂直方向显示弹性子元素:.flex-*-row/column
3.3 表单
form标签中引用class="form-inline/form-group"来控制方向;
如果只引用form-group添加下外边距(堆叠表单);只引用form-inline变成弹性容器,默认内部项目主轴为X轴;form中引用form-inline,内部项目引用form-group,form变成弹性容器,默认内部项目主轴X轴,所有项目变成弹性容器
//内联表单
<form class="form-inline">
<div class="form-group">
</div>
样式:
form-control/form-check
form-check-inline/form-check-input
form-check-label/form-text