一.响应式布局
1.什么是响应式布局
Responsive web page 响应式/自适应网页 可以根据浏览设备不同(pc,pad,phone) |
2.响应式网页必须做下面几件事
①布局,不能固定元素宽度,必须是流式布局(默认文档流+浮动) ②文字和图片大小随容器的大小改变 ③媒体查询技术 响应式网页存在的问题:代码复杂程度几何性的增加 复杂玩网页,不适合使用响应式 |
3.如何测试响应式网页
①使用真实设备(好处:真实可靠,缺点:成本高,测试任务巨大) ②使用第三方模拟软件测试(好处:不需要太多真实设备测试方便,缺点:测试效果有限,有待进一步验证) ③使用chrome等浏览器自带的模拟软件(好处:简单方便,缺点:测试效果十分有限,需要进一步验证) |
4.编写响应式布局(重点****)
1.手机适配,设置视口,在meta中声明viewport元标签 在 content中编写参数: width=device-width,设置视口宽度为设备宽度 initial-scale=1.0,设置视口宽度能否缩放,1.0 不能缩放 maximum-scale=1.0,允许缩放的最大倍率 user-scalable=0,是否允许用户手动缩放 ,0 不能 最简洁的写法: <meat name="viewport" content="width=device-width,initial-scale=1"> |
|
2.所有的内容/文字/图片/都使用相对尺寸,不能使用绝对值 |
|
3.流式布局+弹性布局+媒体查询 完成响应式布局 |
|
4.媒体查询 ,css3中 Media Query,做响应式必备技术
语法总结: @media screen and (min-width:768px) and (max-width:991px){ } |
二:BootStrap
boot给我们封装好很多的样式,以类名的形式让我们调用 但是在项目中,对于很多样式我们还是需要手写样式和媒体查询 |
BootStrap内容分为5部分 1.如何使用boot 2.全局css 3.组建 4.js插件 5. sass 定制 6.boot项目 |
1.如何使用boot
<meta name="viewport" content="width=device-width,initial-scale=1"/> 设置视口 <link rel="stylesheet" href="../css/bootstrap.css"> 导入css文件 <script src="../js/jquery.min.js"></script> 导入js文件(顺序有要求 query-popper-bootstrap) <script src="../js/popper.min.js"></script> <script src="../js/bootstrap.min.js"></script> |
2.全局CSS
container:定宽容器,每种不同分辨率下,给了写死的max-width值,
boot支持4种分辨率: xl-lg-md-sm (超大屏,大屏,中屏,小屏)
boot 的默认字号大小是1rem, 1rem=16px
container-fluid:变宽容器,根据不同的设备分辨率,宽度为他的100%
①.按钮相关的class
.btn 基本类,所有的按钮,都需要添加class.btn
按钮颜色 |
不同边框的按钮 |
||
btn-success |
绿色 |
btn-outline-success |
绿色边框 |
btn-danger |
红色 |
btn-outline-danger |
红色边框 |
btn-warning |
黄色 |
btn-outline-warning |
黄色边框 |
btn-primary |
主要的 蓝色 |
btn-outline-primary |
主要的 蓝色边框 |
btn-secondary |
次要 灰色 |
btn-outline-secondary |
次要 灰色边框 |
btn-info |
信息 青色 |
btn-outline-info |
信息 青色biank |
btn-dark |
深色 |
btn-outline-dark |
深色边框 |
btn-light |
浅色 |
btn-outline-light |
浅色biank |
btn-link |
链接 |
|
|
按钮的大小 |
|
btn-sm |
小按钮 |
btn-lg |
大按钮 |
btn-block |
块级按钮 |
②.图片相关
rounded |
圆角 0.25rem |
rounded-circle |
圆形--50%圆角 |
img-thumbnail |
缩略图,有一圈白色边(padding) |
img-fluid |
响应式图片,图片会缩放,但不会超过原始大小 |
③.文字相关
.h1~.h6 |
字号大小,同h1~h6标签 |
text-danger/warning/success/info.... |
字体颜色 |
text-uppercase/lowercase/capitalize |
所有字母大写,小写,首字母大写 |
font-weight-bold/light/normal |
字体加粗,细,正常 |
text-left/right/center/justify |
文字水平对齐方式 |
text-*-left/center.right |
响应式 *:sm/md/lg/xl(小/中/大/超大) |
④.列表相关
list-unstyled |
去掉点,左内边距清0 |
ul.list-group>li.list-group-item |
创建列表组和列表项 |
.list-group-item.active |
激活项 |
.list-group-item disabled |
禁用项 |
list-group-item-danger/warning/info...... |
列表项颜色 |
⑤.table相关的样式
.table (基本类) |
对table本身和table的后代布局 |
.table-bordered |
一个有边框的表格.为自己和后代添加边框 |
table-danger/warning/success/info... |
表格颜色 |
table-striped |
隔行变色 |
table-hover |
带鼠标悬停效果的表格 |
table-responsive-xl/lg/md/sm |
响应式表格 写在table的父元素上 |
⑥.辅助类(所有的辅助类)
1.边框
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
2.浮动
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
3.显示 visible/invisible 显示/隐藏 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
4.背景颜色 bg-danger/warning/success/primary..... |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
5.圆角
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
6.内外边距
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
7.尺寸
|
⑦.栅格布局
1.页面中的布局方式(一般三种)
table布局 |
div+css |
Boot中的栅格布局 |
简单,易控制 |
语义正确,渲染效率高 |
简单,易控制,语义正确,渲染效率高,支持响应式 |
语义错误,渲染效率低 |
控制起来很麻烦 |
不适用于复杂的页面 |
2.栅格的使用
1.必须要放在.container或者.container-fluid中 2.每一行都是一个row(弹性,主轴是x,可以换行,左右-15px外边距) 3.每一个col自带15px内边距 |
3.响应式栅格布局
col-*-n *:xl/lg/ms/sm 在不同的屏幕下执行不同的列数 |
4.不同屏幕尺寸,向上兼容
只写小屏,在小屏,中屏,大屏,超大屏,都会应用 只写中屏,在中屏,大屏,超大屏中应用,小屏不会 只写大屏,在大屏,超大屏中应用, |
5. 使用.col类
使用.col类,不添加数字时,自动平均分配占地宽度, 每个col平均分配空间,col个数超过12个也平均分配 使用场合:在一行内,元素需要横向显示,元素个数不能被12整除 |
6.列偏移
offset-*-n 源码就是在操作左外边距margin-left *:xl/lg/md/sm n:0~11 |
7.栅格嵌套
在一个.col中再写一个row |
⑧弹性布局
d-block/inline/inline-block/none diaplay的取值 d-*-block/inline….. 响应式 *: xl/lg/md/sm |
- 主轴方向
flex-row/column/row-reverse/column-reverse 响应式设置 flex-*-row/column/row-reverse/column-reverse *:xl/lg/md/sm |
2.交查轴方向
justify-content-start/center/end/between/around 响应式设置 justify-content-*-start/center/end/between/around *:xl/lg/md/sm |
⑨表单
1.表单元素的排列方向
form-group 堆叠表单,内部控件垂直显示 form-inline 内联表单,内部控件横向显示(弹性,x轴主轴) |
2.表单控件元素样式
form-control 对于text和password文本框的基本类 块级,w-100%,字体,背景颜色,边框,圆角,过渡 |
col-from-label 设置文本框上下内边距 col-form-label-lg 上下内边距大 col-form-label-sm 上下内边距小 |
checkbox的基本类 form-check 相对定位,让子元素以父级定位 form-check-input 绝对定位 要配合父级元素的form-check使用 |
form-text 块级,有上下外边距 |
Tips:form-inline可以代替row ,form-inline没有-15px外边距