Bootstrap响应式布局介绍

一.响应式布局

1.什么是响应式网页

2.响应式网页必须做到的几件事

1.布局，使用流式布局(默认文档流+浮动)+弹性布局+栅格布局

2.文字和图片大小随着容器大小改变

3.媒体查询技术(css3)

代码复杂程度几何性的增加

复杂网页，不适合使用响应式布局

3.如何测试响应式网页

①使用真实设备

好处：真实可靠

缺点：成本高，测试任务量巨大

②使用第三方模拟软件测试

好处：方便，快捷

缺点：测试效果有限，有待进一步验证

③使用chrome自带的模拟器测试

好处：简单方便

坏处：测试效果十分有限

4.编写响应式布局(重点*****************)

①手机适配

视口的设置，如果项目需要在移动端运行，需要设置视口

<meta name="viewport" content="width=device-width,

initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

width=device-width 设置视口宽度等于设备宽度

initial-scale=1.0,  设置视口宽度初始能不能缩放  1.0代表不能

maximum-scale=1.0,  设置视口最大缩放比例   1.0最大1倍

user-scalable=0 设置是否允许用户缩放视口   0不允许

视口最简洁的写法

<meta name="viewport" content="width=device-width,

initial-scale=1">

②所有的内容/文字/图片都使用相对尺寸(尽量)，少使用绝对值

③流式布局+弹性布局+媒体查询(栅格布局) 完成响应式布局

④媒体查询

CSS3 Media Query 做响应式的必备技术

Media：媒体，浏览网页的设备

设备：screen(pc/pad/phone)

TV/print

根据浏览网页的设备不同(尺寸，方向，硬件，解析度等)，有选择的，执行一部分css样式，忽略其他css样式

二.BootStrap

1.如何使用boot

2.全局css

3.组件+js插件

4.定制sass

5.boot项目

https://www.bootcss.com/

1.如何使用boot

<link rel="stylesheet" href="bootstrap.css"/>
<script src="jquery.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>

2.全局css样式

container 定宽容器，每种不同的分辨率下，

定义了写死的max-width

同时，有左右15px内边距，水平居中

container-fluid 变宽容器，根据不同分辨率的屏幕，

宽度永远是屏幕的100%

boot支持4种屏幕  xl/lg/md/sm   不支持xs

boot中1个rem是16px。

boot的css reset使用的是normalize.css方案

①按钮相关的class

.btn 基本类 定义了行内块，字号，文本对齐，边框，过渡等

按钮颜色

.btn-danger 红色

.btn-success 绿色

.btn-warning 黄色

.btn-info     藏青

.btn-primary 蓝色

.btn-secondary 灰色

.btn-dark     深色

.btn-light     浅色

不同边框的按钮

. btn-outline-danger/warning/info......

不同按钮大小

.btn-sm

.btn-lg

.btn-block

. btn-link

②图片相关

.rounded         添加圆角 0.25rem

.rounded-circle   圆形

.img-thumbnail   添加内边距和边框

.img-fluid         响应式图片，图片可以缩放，

但是最大不能超过原始大小

③文字相关的class

.text-danger/warning/info.....文本颜色

.h1~.h6    文本字号和加粗

.text-uppercase/lowercase/capitalize 文本大小写，首字母大写

.text-left/right/center 文本对齐

.text-*-left/right/center  *:sm/md/lg 媒体查询

.text-justify 两端对齐，注意，没有媒体查询

④列表相关

ul  .list-unstyled  去点，左内边距清0

.list-group    列表组

li   .list-group-item 列表项 ，边框，首元素和尾元素的圆角

颜色

.list-group-item-danger/warning.....

激活项 .active

禁用项 .disabled

⑤table相关的class

.table 对table本身和table的后代布局

.table-bordered 为table本身和后代添加边框

.table-danger/warning/success...表格颜色

.table-hover 带悬停效果的表格

.table-striped 隔行变色

.table-responsive-*  *：sm/md/lg/xl

响应式布局的表格，写在table的父元素上

3.辅助类

①边框

.border-0  去掉边框

.border-top/right/bottom/left-0  去掉某一个方向的边框

基本类 .border 灰色实线边框

.border-top/right/bottom/left 单边的灰色实线边框

边框颜色

.border-danger/warning/success.....

②浮动

.float-left/right/none

响应式浮动

.float-*-left/right/none  *:sm/md/lg/xl

.clearfix 解决高度坍塌，写在父元素上

③显示

.visible    visibility:visible

.invisible  visibility:hidden;

④背景颜色

.bg-danger/warning/success....

⑤圆角

.rounded/.rounded-0

.rounded-top/right/bottom/left 设置某个方向的两个圆角

⑥尺寸

w-25/50/75/100     width:25%/50%/75/100%

其它宽度需要自己定义

h-25/50/75/100 同上

mw-100/mh-100  max-width:100%;max-height:100%;

⑦内外边距

m/mt/mr/mb/ml/mx/my-*-auto/0/1/2/3/4/5 外边距

0:0

1:0.25rem

2:0.5rem

3:1rem

4:1.5rem

5:3rem

p/pt/pr/pb/pl/px/py-*-0/1/2/3/4/5 内边距

*：sm/md/lg/xl 响应式的内外边距