一.响应式布局 (css3 2010年提出)
1.什么是响应式网页
Responsive web page 响应式网页
可以根据浏览设备的不同（屏幕尺寸，横向屏幕，纵向屏幕，解析度），自动的改变布局，图片，文字效果
不会影响用户体验
2.初学者写响应式必须做到几件事情
①布局，不能固定元素的宽度，必须是流式布局(默认文档流+浮动+弹性)
②文本和图片大小随着容器的大小改变（相对单位）
③使用媒体查询技术
响应式网页，代码量复杂程度几何形的增加
特别复杂的页面，不适合使用响应式
3.如何测试写好的响应式网页
①使用真实设备测试
测试效果真实有效
成本高，测试任务量巨大
②使用第三方的模拟器
不需要太多的真实设备，测试很方便
测试效果有限，需要进一步验证
③使用chrome自带的模拟器
简单方便
bug比较，屏幕尺寸不准确，测试效果十分有限
4.编写响应式
为了让页面在移动设备上正常显示，不影响用户体验
针对移动设备（pad phone print）
1.移动设备配置，视口
<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不能缩放
user-scalable=0 不允许用户手动缩放
最简方式
<meta name="viewport" content="width=device-width, initial-scale=1">
当页面不在移动设备上显示时，视口写不写没有效果
2.所有的内容，图片，文本，初学者都使用相对尺寸，不要用绝对尺寸
3.流式布局(默认文档流+浮动)+弹性布局+媒体查询完成响应式布局（初学者最好别用定位）
4.媒体查询，是css3提供的技术 media query,做响应式的必备技术
Media:媒体，指的是硬件设备
硬件设备 screen(pc/pad/phone)
TV
print
我们关注的设备，还有屏幕尺寸
超大屏 xl screen>=1200px 转换成css的方式 min-width:1200px
大屏 lg 992<=screen<1200px min-width:992 and max-width:1199.99px
中屏 md 768<=screen<992px
小屏 sm 576<=screen<768px
超小屏 xs screen<576px
@media (min-width:576px) {
#parent>div{
flex: 0 0 50%;
}
}
@media (min-width:768px) {
#parent>div{
flex: 0 0 33.33%;
}
}
@media (min-width:992px) {
#parent>div{
flex: 0 0 25%;
}
}
@media (min-width:1200px) {
#parent>div{
flex: 0 0 20%;
}
}
二.Bootstrap
boot其中关于弹性，栅格的部分，项目中经常使用
关于背景，组件，颜色等样式，很多项目经理不愿意用
boot封装了很多很多的样式，能够让我们快速开发，但是boot把样式固化了
一般10w级以下的项目，使用boot非常非常优秀
1.起步，如何使用boot
一定注意正确的路径和导入顺序
设置视口
<meta name="viewport" content="width=device-width, initial-scale=1">
严格按照顺序导入css和3个js文件
<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>
所有的html元素写在container中
<div class="container">
</div>
2. 全局css样式
Boot封装的响应式只支持4个屏幕，sm/md/lg/xl,没有超小屏
①容器
.container 在4种屏幕下，都定死了宽度，叫做定宽容器
.container-fluid 宽度永远是body的100%。body宽度变化，.container-fluid也变化
变宽容器
两种都有左右15px内边距，左右auto的外边距
②按钮相关的class
btn 基本类，所有按钮都必须添加的类， 行内块，文本，边框，内边距，过渡，伪类
设置按钮颜色
btn-danger/warning/success/info/primary/secondary/dark/light
镂空按钮
btn-outline-danger/warning/success/info/primary/secondary/dark/light
按钮的尺寸
大按钮 btn-lg
小按钮 btn-sm
块级按钮 btn-block
链接 btn-link
③图片相关的class
boot4把boot3提供的图片类优化了
rounded 圆角0.25rem
rounded-circle 50%圆角
img-thumbnail 边框，内边距，背景色白的缩略图
img-fluid 响应式图片，可以改变大小，但是最大宽度不能超过图片原始尺寸
④文本相关
text-danger/warning/info......
text-muted 文本颜色灰色
text-lowercase/uppercase/ capitalize 小写/大写/首字母大写
font-weight-bold/light/normal 字体粗/细/普通
.h1~~.h6字号大小
水平对齐方式，封装了响应式
text-*-left/center/right *:sm/md/lg/xl 向上兼容
text-justify 两端对齐，没有封装响应式
⑤列表相关的样式
boot把列表封装成了列表组，如果不需要使用列表组，就不用这组样式
list-unstyled 去点，去除左内边距
ul.list-group 弹性，y轴主轴
>li.list-group-item 内边距，边框，背景，第一个li有左上右上圆角，最后一个li有左下右下圆角
定义列表项的颜色 list-group-item-warning/danger......
激活项 active
禁用项 disabled
⑥表格相关
table 基本类 对table本身和后代元素进行布局
table-bordered 设置table本身和td、th的边框
table-danger/warning/info.... 表格的背景颜色
table-striped 隔行变色，奇数行添加了一层黑纱rgba(0,0,0, 0.05)
table-hover 鼠标悬停时，给当前行添加一层黑纱
3.辅助类
①边框
border 基本类，设置4个方向，颜色很浅的边框
border-top/right/bottom/left 单独设置某一个方向的边框
border-0 清除边框
border-top/right/bottom/left-0 清除某一个方向的边框
border-dark/danger/warning/info..... 边框颜色
②浮动
float-*-left/right/none *:sm/md/lg/xl
clearfix 解决高度坍塌
③背景色
bg-danger/warning/success.....
④圆角
rounded 0.25rem的圆角
rounded-circle 50%的圆角
rounded-0
rounded-top/right/bottom/left
⑤尺寸
w/h-25/50/75/100
⑥内外边距
m/mt/mr/mb/ml/mx/my-*-0/1/2/3/4/5/auto 245个
p/pt/pr/pb/pl/px/py-*-0/1/2/3/4/5 210个
*:sm/md/lg/xl
0:0
1: 0.25rem
2: 0.5rem
3: 1rem
4: 1.5rem
5: 3rem
4.栅格布局
1.栅格的使用
把布局看做一行(.row)，每一行有12列，内部元素占多少列来进行控制(.col-1到.col-12)
.row 弹性，主轴x轴，可换行，左右-15px外边距
>.col-n n:1~12
所有的col都带有左右+15px内边距
col-*-1/2/3/4/5/6/7/8/9/10/11/12 *:sm/md/lg/xl
col-n 使用flex-basis设置每一个项目宽度，源码 flex:0 0 n/12;
no-gutters 与.row写在一个元素中
会清除row的左右-15px外边距
和清除所有col的左右+15px内边距
2.不带数字的col类
会把整个row进行平均分配
甚至一行能够超过12个
3.列偏移
offset-*-1/2/3/4/5/6/7/8/9/10/11 没有12
*:sm/md/lg/xl
源码就是在设置左外边距：margin-left:n/12;
4.弹性
栅格对弹性布局做了很好的封装
d-*-none/block/inline/inline-block/table/flex/inline-flex
*:sm/md/lg/xl
flex-*-row/row-reverse/column/column-reverse 主轴方向
flex-*-wrap/nowrap 是否换行
justify-content-*-start/end/center/around/between 项目在主轴上的排列方式
align-items-*-start/end/center/baseline项目在交叉轴上的排列方式
弹性和栅格的关系
.row 的源码，要求弹性，x轴主轴，主轴起点在左侧，可换行
我们只要写出上述样式，就可以不用写row直接使用col
5.表单元素
boot对于表单元素的封装，很差（所有的浏览器，对表单元素的兼容都不好）
form-inline 内联表单，水平方向排列的表单
form-group 垂直方向排列的表单
form-control 所有文本框的基本类，但是项目中一般都要重写
内边距，边框，阴影，过渡，字号，placeholder的样式
col-form-label-sm/lg 调整文本框的大小
三.组件和插件（只有一组需要背，其它的只要查阅笔记能写出来，就可以）
boot把页面中很多js特效，封装成了组件，让程序员快速开发
不需要我们写js，使用自动属性来调用事件
1，哪个元素激活的事件
事件激活后影响的是哪个元素（影响的目标）
1.按钮组
结构
div.btn-group/.btn-group-vertical 水平按钮组和垂直按钮组
>.btn
2.下拉菜单
结构
div. dropdown 相对定位
>btn. dropdown-toggle 在最后添加一个向下的箭头提示
+ul.dropdown-menu display:none
>li>a
事件：
1在按钮上写自定义属性来激活事件 data-toggle="dropdown"
2 事件目标，由于btn和ul有一个共同结构父级，不需要手动绑定目标
3.信息提示框
结构
div.alert 相对定位，边框，圆角，内边距
.alert-success/warning...提示框有颜色
. alert-dismissible 让内部的小x颜色同父元素定义的字体颜色
>span.close 配合之前的. alert-dismissible 设置小叉叉的颜色
事件：
1，在x上写自定义属性data-dismiss="alert"
不需要指定目标
4.导航
1.水平导航
ul.nav 弹性，x轴主轴，可换行，左内边距清0，去点
. nav-justified 与子元素.nav-item配合 让所有的li等宽
>li.nav-item 配合不同的父元素，显示不同的样式
>a.nav-link 块级，内边距，几个伪类的样式
2.选项卡导航
结构
ul.nav.nav-tabs 下边框，同时让a标签hover时，有边框
>li.nav-item
>a.nav-link
.active a标签被选中时，出现被选中的效果
div. tab-content 没有任何样式
> div.tab-pane 内容隐藏
.active 内容显示
事件
1，给发生事件的元素 a标签写data-toggle="tab"
2，,事件目标需要绑定id,对应的div要添加id，把id值放入对应的a标签的href，做绑定
3.胶囊导航
结构
ul.nav.nav-pills
>li.nav-item
>a.nav-link.active a标签被选中时，出现被选中的效果
div. tab-content 没有任何样式
> div.tab-pane tab-content>tab-pane 隐藏
.active 显示
事件
1,发生事件的元素 a标签data-toggle="pill"
2,事件目标需要绑定id,对应的div要添加id，把id值放入对应的a标签的href，做绑定
5.响应式的导航栏
div.navbar 弹性，x轴主轴，可换行，交叉轴居中，主轴两端对齐
. navbar-expand 作为ul.navbar-nav的祖先元素
让ul.navbar-nav的主轴变为x轴
. navbar-expand-* *：sm/md/lg/xl
让li在某个屏幕以上横向显示 主轴为row
在某个屏幕以下纵向显示，主轴为column
>ul.navbar-nav 弹性，y轴主轴，去点，去左内边距
>li.nav-item
>a.nav-link
6.折叠
结构
button
div. collapse display:none
事件
发生事件的元素 button data-toggle="collapse"
事件影响的目标 data-target="#d1" d1为div的id
7.卡片
div.card 弹性，y轴
>div.card-header
+div.body
+div.footer
8.手风琴效果(card+折叠)
div#p1
>div.card
>div.card-header>a data-toggle="collapse" href="#d1"
+div.collapse#d1 data-parent="#p1"
>div.card-body
data-parent="#p1" 在p1这个元素的内部，一次只能打开一个collapse
例子：
<div id="p1">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#d1">一</a>
</div>
<div class="collapse" id="d1" data-parent="#p1">
<div class="card-body">
1111111111111
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#d2">二</a>
</div>
<div class="collapse" id="d2" data-parent="#p1">
<div class="card-body">
22222222222222
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#d3">三</a>
</div>
<div class="collapse" id="d3" data-parent="#p1">
<div class="card-body">
333333333333333333333
</div>
</div>
</div>
</div>
9.折叠导航栏
div.navbar
.navbar-dark 本身对此div没有任何修饰，需要自己加背景色
让div内部 a.navbar-brand a.link 按钮，变为白色
.navbar-expand-md 让内部按钮在md以上隐藏，md以下显示
让li在md以上横向，在md以下纵向
让折叠div在md以上显示，在md以下隐藏
>a.navbar-brand 商标
+button.navbar-toggler 内边距，字号，行高，背景颜色，边框，圆角
>span. navbar-toggler-icon 画出三条线，颜色取决于父级div.navbar-dark
+div.collapse 隐藏
. navbar-collapse 配合父元素 .navbar-expand-md
让当前div在md以上显示，在md以下隐藏
>ul.navbar-nav
>li.nav-item
>a.nav-link div. navbar-dark 让a标签变为白色
例子：
<div class="navbar navbar-expand-lg navbar-dark bg-dark">
<a href="#" class="navbar-brand">Bootstrap中文网</a>
<button data-target="#d1" data-toggle="collapse" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<div id="d1" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Bootstrap3中文文档</a></li>
<li class="nav-item"><a class="nav-link" href="#">Bootstrap4中文文档</a></li>
<li class="nav-item"><a class="nav-link" href="#">Sass教程</a></li>
<li class="nav-item"><a class="nav-link" href="#">less教程</a></li>
<li class="nav-item"><a class="nav-link" href="#">SassjQuery API</a></li>
<li class="nav-item"><a class="nav-link" href="#">网站实例</a></li>
<li class="nav-item"><a class="nav-link" href="#">关于</a></li>
</ul>
</div>
</div>
10.媒体对象
div.media 弹性，x轴，起点对齐
>img
+div.media-body
11.焦点轮播图（display:none在切换）
div.carousel#demo 相对定位
第一部分,轮播图片
div.carousel-inner w-100 溢出隐藏
>div.carousel-item w-100 隐藏
.active 显示
>img
事件，要写在最外层div重加data-ride="carousel"
第二部分，轮播指示器
ul.carousel-indicators 绝对定位，弹性
>li
事件，在li上写 data-target="#demo" data-slide-to="0" （0，1，2对应前面图片）
需要重写样式：
.carousel-indicators li {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #fff;
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.carousel-indicators .active {
background-color: #0aa1ed;
}
第三部分，左右箭头
a.carousel-control-next/pre
>span.carousel-control-next/pre-icon
事件，在a上写data-slide="next/prev" href="#demo"
需要重写样式：
.carousel-control-next,
.carousel-control-prev {
width: 4%;
height: 20%;
background-color: #aaa;
border-radius: 0.25rem;
top: 40%;
}
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<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>
<style type="text/css">
.carousel-indicators li {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #fff;
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.carousel-indicators .active {
background-color: #0aa1ed;
}
.carousel-control-next,
.carousel-control-prev {
width: 4%;
height: 20%;
background-color: #aaa;
border-radius: 0.25rem;
top: 40%;
}
</style>
</head>
<body>
<div class="container">
<div id="demo" class="carousel" data-ride="carousel">
<!-- 1 轮播的图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="img/banner1.png">
</div>
<div class="carousel-item">
<img class="w-100" src="img/banner2.png">
</div>
<div class="carousel-item">
<img class="w-100" src="img/banner3.png">
</div>
<div class="carousel-item">
<img class="w-100" src="img/banner4.png">
</div>
</div>
<!-- 2 轮播指示器 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
<li data-target="#demo" data-slide-to="3"></li>
</ul>
<!-- 3 左右箭头 -->
<a data-slide="next" href="#demo" class="carousel-control-next">
<span class="carousel-control-next-icon"></span>
</a>
<a data-slide="prev" href="#demo" class="carousel-control-prev">
<span class="carousel-control-prev-icon"></span>
</a>
</div>
</div>
</body>
</html>
12.模态框
<button data-target="#d1" data-toggle="modal" class="btn btn-info">打开模态框</button>
<div id="d1" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5>请输入您的姓名,测试另一半姓名</h5>
</div>
<div class="modal-body">
<input type="text" class="form-control">
</div>
<div class="modal-footer">
<a data-dismiss="modal" href="#" class="btn btn-danger">关闭</a>
</div>
</div>
</div>
</div>
四.其它常用组件
1.徽章
看做特别小的按钮
badge 基本类 非常小的内边，字体，行高
badge-success 徽章的颜色
badge-pill 胶囊徽章
2.巨幕
jumbotron 巨大的内边距，灰色背景，圆角
3.分页
ul.pagination 弹性，x轴主轴
>li.page-item 让第一个li和最后一个li中的a标签添加圆角
.active 选中
.disabled 禁用
>a.page-link 块级，字号，行高，背景，伪类的样式
4.面包屑导航
早期，要求有层进关系的导航才能使用面包屑导航
现在没有要求了。
只要li之间有文本字符，都可以用面包屑导航
ul.breadcrumb
>li.breadcrumb-item
>a
重写li的连接符号
.breadcrumb-item + .breadcrumb-item::before{
content:">";
}
5.进度条
div. progress 进度条的槽
>div. progress-bar 添加宽度，设置进度条的进度
. progress-bar-striped 带条纹的进度条
. progress-bar-animated 带动画的进度条
三. SCSS
BOOT中3个必须掌握的知识点(媒体查询，栅格，scss)
一.scss是什么
1.css的缺点
css语法不够强大，没有合理样式复用机制，难以维护
动态样式语言，赋予css新的特性，从而特高样式的重用性和可维护性
常见的动态样式语言
1.scss/sass （scss兼容sass,scss的语法更接近css语法）
scss的语法，就是js和css语法的合体
boot4使用scss完成
2.stylus
3.less boot3使用less完成
2.scss是什么
scss是一款强化css的辅助工具
它的语法和css及其类似
在css的基础上添加了变量，混合，嵌套，导入，函数，指令等高级功能
让css的编写更加的强大与优雅
3.scss使用原理
一个独立的文件.scss文件，运行在后台，需要转换成对应的css文件，把css文件通过响应专递给前台，由浏览器运行css文件
二.scss的使用
1.转换为css
文件编译和监听
- 使用终端或vscode终端在要编译的文件夹下打开，注意路径
- 文件夹监听`sass --watch scss:css`
- 文件监听`sass --watch 1.scss:1.css`
- 可以使用简写`sass -w scss:css`
2.变量
使用$声明，使用：赋值
变量名的命名规则基本同css的选择器
数字，字母，_ , -
不能以数字开头，
见名知意
scss中，数值可以保存为变量
颜色
字符串
样式属性
变量可以引用其他变量
变量有作用域
$my_width:1px;
$my_red:#f10215;
$str:"阿萨斯";
$border_style:solid;
$my_border:$my_width $border_style $my_red;
#d1 {
width: $my_width;
border: $my_border;
}
3.嵌套
1.元素的嵌套
#content{
color:#111;
div{
color:#222;
p{
color:#333;
span{color:#444;}
}
}
}
会生成
#content{}
#content div{}
#content div p{}
#content div p span{}
2.伪类的嵌套
.btn{
color:#000000;
&:hover{color:#fff;}
}
必须添加占位符&符号，不然会按照后代选择器的格式，多一个空格
3.群组的嵌套
#content,.nav,div{
a{color:red;}
}
生成
#content a, .nav a, div a { color: red; }
4.属性的嵌套，违反了css的优化原则
div{
border:{style:solid;color:#f00;width:10px};
}
转换成
div {
border-style: solid;
border-color: #f00;
border-width: 10px; }
4.导入
以下划线开头的scss文件，被称为局部scss文件
局部scss不会生成对应的css文件
不以下划线开头的scss文件，称为全局scss文件
全局scss文件会生成对应的css文件
一般在全局scss中，导入很多局部scss
这样全局scss在生成css文件的时候，会在本css文件中把被导入的局部scss代码也生成
被导入文件中声明的变量，可以在导入的scss中使用
@import “完整的全局scss名称”；
@import “局部scss文件掐头去尾”
@import “2.scss”;
@import “11”;
5.混合器
把多行样式代码封装进一个混合器
哪里需要使用这些代码，就在哪里调用混合器
定义无参的混合器
@mixin 名称{多行css代码}
调用混合器
div{
@include 名称；
}
带参数的混合器
@mixin my_bg($d,$c1,$c2) {
background:-webkit-linear-gradient($d,$c1,$c2);
background:-o-linear-gradient($d,$c1,$c2);
background:-moz-linear-gradient($d,$c1,$c2);
background:-ms-linear-gradient($d,$c1,$c2);
}
div{@include my_bg(top,#000,#fff);}
p{@include my_bg(bottom,#f00,#00f);}
6.继承
一个选择器可以使用另一个选择器的所有样式
@extend 选择器1；
结果是，当前选择器和选择器1，变成了群组选择器，共用了选择器1的样式
三.运算（+，-，*，/, %）
由于scss中乘法和取余，跟js一样
我们只讲+，- ，/
scss中的元素，绝对单位之间可以自动转换
而相对单位是不能转换的
1.加法
数字的加法
字符串连接
用带双引号的字符串，拼接不带双引号的，结果带双引号
用不带双引号的字符串，拼接带双引号的，结果不带双引号
总结，结果与前面的字符串结构相同
2.减法
由于变量名称的原因，导致减法出现了bug
变量名称中可以使用-，那么sass判断不出-到底是属于变量名还是减法
解决方案，减号前后添加空格
3.除法
scss中 /有两个作用，一个除法，一个是分割符
scss中，把以下情况看作为除法
1.除号两端有变量或者方法返回值
2.用小括号包裹表达式时
3.除法运算式，是其它算数运算式的一部分
4.scss中字符串的插值操作
字符串中使用#{变量，运算式}来做插值
content:"liangliang ate #{50+60} baozis";
5.颜色的运算
颜色是分段运算的，红+红 绿+绿 蓝+蓝
最大值是ff，不会超出
#112233+#223344=#335577
rgb(11,22,33)+rgb(22,33,44)=rgb(33,55,77)
rgba的运算，必须alpha相等，才能计算
扫一扫
252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
