响应式 BootStrap 媒体查询栅格组件 scss

索引

响应式布局
响应式布局必须保证几件事
编写响应式网页
@media 媒体查询
响应式案例
BootStrap 使用
按钮相关样式
图片文字相关样式
响应式的文本对齐
Boot向上兼容
列表相关样式
浮动高度坍塌
内外边距背景显示尺寸圆角
栅格布局
栅格中的col类
列偏移
栅格嵌套
弹性布局栅格的灵活应用
响应式栅格布局
响应式栅格布局下的盒子
no-gutters
商城盒子布局
表单
组件
按钮组
信息提示框
导航
响应式导航栏
折叠效果
卡片
手风琴效果
折叠导航栏
媒体对象
焦点轮播图
模态框
小按钮巨幕分页条
面包屑导航进度条
boot定制
scss的使用

响应式布局

Responsive web page 响应式/自适应网页(css3 2010提出)
可以根据浏览设备(不要说浏览器大小)不同(pc,pad,phone)
而自动改变布局,图片,文本效果,不影响用户体验

响应式布局必须保证几件事

1.布局的时候,不能使用固定值宽度,(缩小会溢出)
必须是流式布局(默认文档流+浮动)+弹性
2.文字和图片大小随着容器大小改变(相对单位% rem(跟px一样都是css单位))
3.使用css3提供的媒体查询技术
注意:代码复杂的页面,不适合使用响应式布局(eg: jd)

编写响应式网页

移动端适配(移动端运行,一定要写)<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倍,不放大不缩小
maximum-scale=1.0, 允许视口最大放大到1倍
user-scalable=0 是否允许用户缩放视口 0,不允许
简洁的写法<meta name="viewport" content="width=device-width, initial-scale=1">
所有的内容/文字/图片尽量使用相对尺寸(rem %) ,不使用绝对值
流式布局+弹性布局+媒体查询,完成响应式布局 , 能不用定位就不用了

@media 媒体查询

CSS3 Media Query,做响应式布局的必备技术
Media 媒体,特指浏览网页的设备设备就是条件,符合这个条件,就执行这部分样式,忽略其他样式
条件包括两部分 : ①浏览器网页的硬件 screen(pc/pad/phone) , TV , Print
②尺寸: 超大屏幕(xl)width>=1200px , 大屏幕(lg)992px<width<=1199px, 小屏(sm)576<=width<=767
Media Query:根据当前浏览页面的设备不同(尺寸,硬件,方向,解析度),有选择则性的,执行一部分css,忽略掉
css样式
语法 @media sreen and 尺寸{ 样式 }
尺寸 width>=1200 , xl 超大
992<=width<=1199 , lg 大屏 -------@media screen and (min-width:992px) and (max-width:1199px){css样式}
768<=width<=991 , md 中屏幕 -----@media screen and (min-width:768px) and (max-width:991px){css样式}
576<=width<=767 , sm 小屏---------@media screen and (min-width:576px) and (max-width:767px){css样式}
width<=575 , xs 超小
简写方式 : @media 尺寸{ 样式 }

<style>@media screen and (min-width:992px) and (max-width:1199px){#d1{/*这个样式的执行依赖于上面条件的成立*/background:#000;font:50px chiller;color:#f00;}}@media screen and (min-width:768px) and (max-width:991px){#d1{background:#0ff;font:36px jokerman;color:#f0f;}}@media screen and (min-width:576px) and (max-width:767px){#d1{background:#ff0;font:12px 'mv boli';color:#069;}}
</style>
<body><div id="d1">Lorem*2000</div>
</body>

使用chrome自带的模拟软件测试响应式网页

响应式案例

一媒体查询写法

<head><meta charset="utf-8"><style>*{margin:0;padding:0;box-sizing:border-box;}div{border:1px solid #000}#left,#center,#right{float:left;}#parent:after{content:"";display:block;clear:both;}li{border:3px solid purple;}@media (min-width:992px){#left,#right{width:20%;}#center{width:60%;}#center>.imgs>img{width:25%;padding:2px;}}@media (min-width:768px) and (max-width:991px){#left{width:30%;}#center{width:70%;}#right{display:none;}#center>.imgs>img{width:25%;padding:2px;}}@media (max-width:767px){#left,#center,#right{width:100%;}#center>.imgs>img{width:50%;padding:2px;}}</style>
</head>
<body><div id="content"><div id="left"><ul><li><a href="">豆蔻年华</a></li><li><a href="">花样年华</a></li><li><a href="">而立之年</a></li><li><a href="">激情岁月</a></li></ul></div><div id="center"><div class="imgs"><img src="1.jpg" alt=""><img src="2.jpg" alt=""><img src="3.jpg" alt=""><img src="4.jpg" alt=""></div><p>Lorem </p></div><div id="right"><p>Lorem </p></div></div>
</body>

二响应式栅格写法

三响应式栅格最简化

<head><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="container"><div class="row border border-dark"><div class="col-lg-3 col-md-4 col-sm-12 border border-danger"><p>left </p></div><div class="col-lg-6 col-md-8 col-sm-12 border-danger border"><div class="row"><img class="p-1 col-md-3 col-sm-6" src="2.jpg" alt=""/><img class="p-1 col-md-3 col-sm-6" src="2.jpg" alt=""/><img class="p-1 col-md-3 col-sm-6" src="2.jpg" alt=""/><img class="p-1 col-md-3 col-sm-6" src="2.jpg" alt=""/></div><p>center</p></div><div class="col-lg-3 d-md-none d-lg-block col-sm-12 border-danger border" ><p>right</p></div></div>
</div>
</body>

BootStrap 使用

https://www.bootcss.com
https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html
boot使用类选择器,为我们封装好了很多样式 , 我们只需要使用class调用就可以了, 但是,有很多封装的样式,不符合现实的需求 , 需要我们重写样式
Boot内容 1.如何使用boot 2.全局css样式 3.组件和插件 4.定制scss/sass 5.项目

①视口 <meta name="viewport" content="width=device-width, initial-scale=1">
②按照顺序导入4个boot文件 , 一般地 bootstrap.css文件写入css文件夹中 , jquery.min.js , popper.min.js , bootstrap.min.js 等写入js文件夹中 <link rel="stylesheet" href="css/bootstrap.css"> , <script src="js/query.min.js"></script>

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

全局css样式
容器
.container 定宽容器,在不同屏幕尺寸下,最大宽度固定.水平居中,内边距
.container-fluid 变宽容器,永远是body的宽度100%

③body中添加容器div.container
注意: 所有boot代码在容器中编写 , boot支持4个屏幕 xl-lg-md-sm 不支持超小xs ,boot默认1rem=16px;
.

<head>① <meta name="viewport" content="width=device-width, initial-scale=1">②<link rel="stylesheet" href="bootstrap.css"><!-- <script src="js/jquery.min.js"></script><script src="js/popper.min.js"></script><script src="js/bootstrap.min.js"></script> -->
</head>
<body>③<div class="container"><a class="btn btn-light" href="">Lorem</a>
</div>
</body>

按钮相关样式

btn 基本类行内块,字体,对齐,字号,圆角,过渡,阴影
按钮颜色

btn-颜色	样式
btn-success	成功绿色
btn-danger	危险红色
btn-warning	警告黄色
btn-info	信息藏青色
btn-primary	主要的蓝色
btn-secondary	次要的灰色
btn-dark	深色
btn-light	浅色
class=“btn btn-danger”	颜色样式前要加btn使用

<div class="container"><h2>代表指定意义的文本颜色</h2><p class="text-muted">柔和的文本。</p><p class="text-primary">重要的文本。</p><p class="text-success">执行成功的文本。</p><p class="text-info">代表一些提示信息的文本。</p><p class="text-warning">警告文本。</p><p class="text-danger">危险操作文本。</p><p class="text-secondary">副标题。</p><p class="text-dark">深灰色文字。</p><p class="text-light">浅灰色文本（白色背景上看不清楚）。</p><p class="text-white">白色文本（白色背景上看不清楚）。</p>
</div>

<div class="container"><h2>背景颜色</h2><p class="bg-primary text-white">重要的背景颜色。</p><p class="bg-success text-white">执行成功背景颜色。</p><p class="bg-info text-white">信息提示背景颜色。</p><p class="bg-warning text-white">警告背景颜色</p><p class="bg-danger text-white">危险背景颜色。</p><p class="bg-secondary text-white">副标题背景颜色。</p><p class="bg-dark text-white">深灰背景颜色。</p><p class="bg-light text-dark">浅灰背景颜色。</p>
</div>

只带边框的按钮btn-outline-danger/warning....
不同按钮大小btn-lg/sm 改变内边距和字号大小
链接按钮btn-link
块级按钮btn-block

图片文字相关样式

rounded 圆角0.25rem 4px
rounded-circle 圆角50%
img-thumbnail 缩略图,有内边框边框的图片
img-fluid 响应式图片,图片可以缩放,但是最大不超过本身默认尺寸

text-danger/warning/info/....字体颜色
text-muted 灰色字体
text-capitalize/uppercase/lowercase 首字母大写/全大写/全小写
.h1/.h2/.h3/.h4/.h5/.h6 设置字号大小font-weight-bold/light/normal

响应式的文本对齐

text-xl/lg/md/sm-left/center/right响应式的文本对齐,封装媒体查询
但是text-justify没有封装响应式

Boot向上兼容

@media (min-width: 1200px) { .text-xl-justify{text-align: justify !important;}}
@media (min-width: 992px) { .text-lg-justify{text-align: justify !important;}}
@media (min-width: 768px) { .text-md-justify{text-align: justify !important;}}
@media (min-width: 576px) { .text-sm-justify{text-align: justify !important;}}

---------------------------------------------------------------------BootStrap中的源码----------------------------------------------------------------------------------
class="text-lg-center text-md-left text-sm-right" ×注意: boot封装的媒体查询,有向上兼容的问题 , 是由于源码中上面部分决定的
sm 在sm/md/lg/xl下生效
md 在md/lg/xl下生效
lg 在lg/xl下生效
xl 在xl下生效

列表相关样式

基本类给到需要样式的布局标签的class里调用Boot样式
列表
list-unstyled 去点,清除左内边距
ul.list-group li.list-group-item 创建列表组和列表项
li.list-group-item-danger/warning......列表项颜色
active/disabled激活/禁用项

<head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="container"><ul class="list-unstyled list-group"><li class="list-group-item list-group-item-danger">Lorem</li><li class="list-group-item ist-group-item-success active">Lorem</li><li class="list-group-itemlist-group-item-warning">Lorem</li><li class="list-group-itemlist-group-item-info disabled">Lorem</li><li class="list-group-itemlist-group-item-secondary">Lorem</li></ul>
</div>
</body>

表格
table 基本类,对表格和后代进行布局
table-bordered 为表格和后代添加边框
table-info/danger.... 为表格添加颜色
table-striped 隔行变色
table-hover 鼠标悬停变色

<div class="container"><table class="table table-bordered table-danger table-hover table-striped"><tr><th>Lorem</th><th>Lorem</th><th>Lorem</th></tr><tr><td>Lorem</td><td>Lorem</td><td>Lorem</td></tr></table>
</div>

边框
border 基本类,设置4个方向边框 , border-top/right/bottom/left 基本类,设置一个方向的边框
border-0 清除4个方向边框 , border-top/right/bottom/left-0 清除一个方向的边框
border-danger/warning/info... 边框颜色

<div class="container"><div class="border border-danger bg-info h3 text-center w-50 text-uppercase rounded m-0">Lorem </div>         <div class="border border-danger clearfix"><span class="border border-info float-lg-right float-md-left float-sm-none">Lorem </span><span class="border border-info float-lg-right float-md-left float-sm-none">Lorem </span></div><div class="border border-top-0 border-danger bg-warning">Lorem </div>
</div>

浮动高度坍塌

浮动 float-xl/lg/md/sm-left/right/none
解决高度坍塌给父元素class里添加 clearfix

内外边距背景显示尺寸圆角

背景颜色 bg-danger/info......
显示 visible 显示 invisible 隐藏
内外边距
m/mt/mr/mb/ml/mx/my-xl/lg/md/sm-0/1/2/3/4/5/auto 外边距/上/右/下/左外边距/左右外边距/上下外边距
p/pt/pr/pb/pl/px/py-xl/lg/md/sm-0/1/2/3/4/5 内边距/上/右/下/左内边距/左右内边距/上下内边距
padding没有auto

取值	rem(css单位)
0	0rem
1	0.25rem
2	0.5rem
3	1rem
4	1.5rem
5	3rem

尺寸
w-25/50/75/100 代表宽25%/50%/75%/100% , Boot就封装了这四个
h-25/50/75/100 代表高25%/50%/75%/100%
mw-100 max-width:100% , mh-100 max-height:100%
圆角
rounded 0.25rem的四个角
rounded-top/right/bottom/left 分别设置两个角
rounded-0 清除圆角

栅格布局

12是最小公约数最多的数字,
①使用栅格,容易控制, .row>col-1/2/3/4/5/6/7/8/9/10/11/12 row给到父元素class ,col给到子元素class取值1~ 12(col-1 ~ col-12)代表1/12~12/12
②响应式栅格.row>col-xl/lg/md/sm-1/2/3/4/5/6/7/8/9/10/11/12
③使用栅格需求
1.必须写在.container或者.container-fluid中(.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。)
2.每一行都是一个.row(弹性,主轴x轴横向,可换行,左右-15px外边距)(清0)
3.在一行使用col-n来定义占几份(左右自带+15px内边距)(清0)
no-gutters 写在 row的div,把row的mx-0,把col的px-0

<head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="bootstrap.css"><style>.container div{border:2px solid #f00;}</style>
</head>
<body>
<div class="container"><h4>1:4:1</h4><div class="row"><div class="col-2">col-2</div><div class="col-8">col-8</div><div class="col-2">col-2</div></div><h4>1:1:1:1</h4><div class="row"><div class="col-3">col-3</div><div class="col-3">col-3</div><div class="col-3">col-3</div><div class="col-3">col-3</div></div>/* 挤下来 */<div class="row"><div class="col-1">col-1</div><div class="col-2">col-2</div><div class="col-3">col-3</div><div class="col-4">col-4</div><div class="col-5">col-5</div></div>
</div>
</body>

boot的响应式向上兼容的问题

栅格中的col类

只写.col 不写数字,自动处理布局,每一个col平均分配,设置col的个数能超过12个

列偏移

offset-1/2/3/4/5/6/7/8/9/10/11 底层是margin-left,有响应式offset-xl/lg/md/sm-1/2/3/4/5/6/7/8/9/10/11

偏移列通过 offset-- 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

例如：.offset-md-4 是把.col-md-4 往右移了四列格。

<head><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="bootstrap.css"><style>div{border:1px solid #f00;}</style>
</head>
<body>
<div class="container"><!-- 第一行,标题--><div class="row"><div class="col-12"><h1>Bootstrap<span class="font-weight-normal font-italic">CSS</span><span class="font-weight-normal">Type</span></h1></div></div><!-- 第二行,搜索框--><div class="row"><div class="col-3 offset-9"><input type="text" class="form-control"/></div></div><!-- 第三行,主体--><div class="row"><div class="col-3"><ul class="list-unstyled"><li><a href="">12312321</a></li><li><a href="">12312321</a></li><li><a href="">12312321</a></li><li><a href="">12312321</a></li><li><a href="">12312321</a></li></ul></div><div class="col-6"><div>Lorem ipsum dolor sit amet,</div><table class="table table-striped"><tr><td>1111</td><td>2222</td><td>2222</td><td>3333</td></tr><tr><td>1111</td><td>2222</td><td>2222</td><td>3333</td></tr></table></div><div class="col-3"><h3>课程介绍</h3><ul class="list-unstyled"><li><a href="">12121</a></li><li><a href="">12121</a></li></ul><p>Lorem ipsum dolor sit amet,</p></div></div><!-- 第四行,版权--><div class="row"><div class="col-12"><p class="text-center">版权</p></div></div>
</div>
</body>

栅格嵌套

.row的直接子元素只能是col , 需要在col中,再写上.row>.col 就是.row>.col>.row>.col格式

弹性布局栅格的灵活应用

弹性布局 d-xl/lg/md/sm-flex/none/block/inline/inline-block/table d是display
所有弹性容器,主轴为x轴(可以换行)的,都可以替代栅格的.row , 换句话来说
一个容器,是弹性容器,主轴是x轴,可以换行,这个容器,就可以当做row来使用

<div class="container"><h3>弹性布局</h3><div class="justify-content-sm-around border border-primary d-flex flex-lg-row flex-md-column flex-sm-column-reverse"><div class="bg-info">itme1</div><div class="bg-danger">itme2</div><div class="bg-warning">itme3</div></div>
</div>

主轴方向 flex-xl/lg/md/sm-row/row-reverse/column/column-reverse
主轴对齐方式 justify-content-xl/lg/md/sm-around/between/start/center/end

响应式栅格布局

<head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="bootstrap.css"><style>.container div{border:2px solid #f00;}.my_div{height:200px;backgrounod:#0ff;border:2px solid #000;}</style>
</head>
<body>
<div class="container"><!-- lg-1:1:1:1 md-1:1 sm-1  --><div class="row"><div class="my_div col-lg-3 col-md-6 col-sm-12"></div><div class="my_div col-lg-3 col-md-6 col-sm-12"></div><div class="my_div col-lg-3 col-md-6 col-sm-12"></div><div class="my_div col-lg-3 col-md-6 col-sm-12"></div></div>
</div>
</body>

响应式栅格布局下的盒子

<head><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="bootstrap.css"><style>/*上面两个盒子的高度*/.th{height:377px}/*下面面四个盒子的高度*/.bh{height:233px}</style>
</head>
<body>
<div class="container"> /* row里添加no-gutters取代分别在row里添加mx-0和在col里添加px-0 */<div class="row mx-0">/*中屏以上7/12  小屏12/12  清除左右内边距*/<div class="col-md-7 col-sm-12 px-0">/*颜色 高度 中屏以上右外边距为1,下外边距为1*/<div class="bg-info th mr-md-1 mb-1"></div></div><div class="col-md-5 col-sm-12 px-0"><div class="bg-info th mb-1"></div></div><div class="col-md-5  col-sm-12 px-0"><div class="bg-info bh mr-md-1 mb-sm-1 mb-md-0"></div></div><div class="col-md-7  col-sm-12 px-0"><ul class="list-unstyled row mx-0"><li class="col-4 px-0"><div class="bg-info bh mr-1"></div></li><li class="col-4 px-0"><div class="bg-info bh mr-1"></div></li><li class="col-4 px-0"><div class="bg-info bh"></div></li></ul></div></div>
</div>
</body>

no-gutters

row里添加no-gutters取代上述代码分别在row里添加mx-0和在col里添加px-0

<head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="bootstrap.css"><style>.top_height{height:377px;background:#006699;}.bottom_height{height:233px;background:#006699;}</style>
</head>
<body>
<div class="container"><div class="row no-gutters"><div class="col-md-7 col-sm-12"><div class="top_height mr-md-1 mb-1"></div></div><div class="col-md-5 col-sm-12"><div class="top_height mb-1"></div></div><div class="col-md-5 col-sm-12"><div class="bottom_height mr-md-1mb-sm-1 mb-md-0"></div></div><div class="col-md-7 col-sm-12 "><div class="row no-gutters"><div class="col-4"><div class="bottom_height mr-1"></div></div><div class="col-4"><div class="bottom_height mr-1"></div></div><div class="col-4"><div class="bottom_height"></div></div></div></div></div>
</div>
</body>

商城盒子布局

<!doctype html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="bootstrap.css"><style>.top_height{height:377px;background:#e8e8e8;}.bottom_height{height:233px;background:#e8e8e8;}.w-35{width:35%}.text-small{font-size:0.8rem;}.img1_position{margin-top:-200px;margin-right:24px;transition:1s;}.img1_position:hover{transform:scale(1.1);}@media (min-width: 576px) {.img2_position{margin-top:-318px;margin-right:84px;transition:transform 1s;}}@media  (min-width:992px) {.img2_position{margin-top:-269px;margin-right:24px;transition:transform 1s;}}.img2_position:hover{transform:scale(1.1);}</style>
</head>
<body>
<div class="container"><div class="row no-gutters"><div class="col-lg-7 col-sm-12"><div class="top_height mr-lg-1 mb-1"><table></table><div class="w-35 mt-5 ml-5"><h4>Apple MacBook Air系列</h4><p class="text-small text-muted">酷睿双核i5处理器|256GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存</p><p class="h5 font-weight-normal text-primary">￥6988.00</p><a class="btn btn-primary" href="">查看详情</a></div><img class="float-right img1_position" src="study_computer_img1.png" alt=""/></div></div><div class="col-lg-5 col-sm-12"><div class="top_height mb-1"><table></table><div class="w-50 mt-5 ml-lg-4 ml-sm-5"><h4>小米Air 金属超轻薄</h4><p class="text-small text-muted">酷睿双核i5处理器|512GB SSD|2GB内存|英特尔HD独立显卡</p><p class="h5 font-weight-normal text-primary">￥3488.00</p><a class="btn btn-primary" href="">查看详情</a></div></div><img class="img2_position float-right" src="study_computer_img2.png" alt=""/></div><div class="col-lg-5 col-sm-12"><div class="bottom_height mr-lg-1 mb-sm-1 mr-lg-0"></div></div><div class="col-lg-7 col-sm-12"><div class="row no-gutters"><div class="col-4"><div class="bottom_height mr-1"></div></div><div class="col-4"><div class="bottom_height mr-1"></div></div><div class="col-4"><div class="bottom_height"></div></div></div></div></div>
</div>
</body>
</html>

<head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="bootstrap.css"><style>.my_small{font:12px;}</style>
</head>
<body>
<div class="container"><ul class="bg-light d-flex list-unstyled justify-content-around py-5"><li><img src="icon1.png"/><p class="text-center my_small text-muted">品质保障</p></li><li><img src="icon1.png"/><p class="text-center my_small text-muted">私人定制</p></li><li><img src="icon1.png"/><p class="text-center my_small text-muted">专属特权</p></li><li><img src="icon1.png"/><p class="text-center my_small text-muted">品质保障</p></li></ul>
</div>
</body>

表单

①表单元素的排列方向 : form-group 堆叠表单,垂直方向排列
form-inline 内联表单,水平方向排列(弹性布局,row warp主轴x轴)
②表单元素的样式
对文本框的设置
form-control 所有文本/密码框的基本类块级 w100 字号背景边框圆角过渡 focus
col-form-label/-lg/-sm 设置文本到边框的距离 (文本框的大小, 源码中由内边距字体大小不同撑开)
对checkbox的布局
父级.form-check 相对定位
子元素checkbox写form-check-input 绝对定位 (定位多选框的位置)<input type="checkbox" class="form-check-input" >
.form-text 块级,上外边距4px

<head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="container"><form action="" class="form-group"><div class="d-flex flex-row flex-wrap"><div class="col-2">用户名</div><div class="col-7"><input type="text" class="form-control"/></div><div class="col-3">用户名包含字母数字3~8位置</div></div><div class="row justify-content-center"><a href="" class="btn btn-success">注册</a><a href="" class="btn btn-danger">取消</a></div></form>
</div>
</body>

组件

页面中一些特殊的效果,被boot封装,之前要是js编写,现在直接调用boot提供自己的属性,就可以生效
boot组件的事件,是通过自定义属性和值来调用的
1.在调用事件的元素上,写自定属性
2.事件发生之后,事件目标
下拉菜单
组件结构
①div.dropdown 相对定位
②>button.dropdown-toggle 添加向下的三角(dropdown-toggle 不需要三角可以不添加)
③ul.dropdown-menu 绝对定位,d-none(display:none;)
激活组件事件的元素是 button 添加自定义属性 data-toggle=“dropdown”
事件激活后影响的元素是 ul 不需要写指向目标的代码,因为他们被 div.dropdown 包裹

<div class="container"><h3>下拉菜单</h3>① <div class="dropdown">② <button data-toggle="dropdown" class="btn btn-danger dropdown-toggle">下拉菜单</button>③ <ul class="dropdown-menu"><li>百达翡丽</li><li>江诗丹顿</li><li>恩佐</li></ul></div>
</div>

按钮组

div.btn-group-vertical 垂直按钮组 .btn-group水平按钮组.btn , btn-group-sm/lg 设置按钮组的大小
垂直按钮组

<h1>按钮组</h1><div class="btn-group-vertical btn-group-sm">/* btn-group 加上按钮连上了没有缝隙,结合处的圆角都清了, btn-group-vertical是竖着的按钮组*/<button class="btn btn-danger">小鸡炖蘑菇</button><button class="btn btn-warning">铁锅炖大鹅</button><button class="btn btn-info">猪肉炖粉条</button></div>

信息提示框

结构 div.alert alert-danger/warning..... alert-dismissible alert 是基本类 alert-danger/warning背景颜色
alert-dismissible改变内部小叉叉的颜色
span.close 右浮动与父元素alert-dismissible配合,给写的小叉叉(× × )样式
事件span.data-dismiss="alert" 父子元素包含关系不用写目标

<h3>信息提示框</h3>
<div class="alert alert-info alert-dismissible"><span data-dismiss="alert" class="close">&times;</span>鲲之大,一锅炖不下. <br/>鹏之大,需要两个烧烤架.
</div>

导航 ul>li>a , 导航栏 div>ul>li>a
①水平导航
ul.nav 提供弹性/x轴/wrap 可以设置.nav-justified
li.nav-item 与父元素 .nav-justified 配合,让每一项等宽显示
a.nav-link 设置了块级, hover去下划线
ul.nav设置了弹性,所以关于弹性的类都可以使用

<h3>水平导航</h3>
<ul class="nav nav-justified"><li class="nav-item"><a class="nav-link" href="">秒杀</a></li><li class="nav-item"><a class="nav-link" href="">PLUS</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>

②选项卡导航
结构
上部分,选项卡部分
ul.nav .nav-tabs .nav-tabs让每个选项卡有hover边框
li.nav-item
a.nav-link.active .active 让选项卡是选中状态
下部分,内容
div.tab-content
div.tab-pane
.tab-content >.tab-pane{display:none;} 隐藏
.tab-content > .active{display:block} 显示
事件
激活事件的元素 a标签的自定义属性 a data-toggle="tab" 每一个a标签都要写
事件激活的目标目标 div 添加 id , 在 a标签的 href属性中绑定对应的id a href="#目标id"

<h3>选项卡导航</h3>
<!-- 选项卡-->
<ul class="nav nav-tabs"><li class="nav-item"><a data-toggle="tab" class="nav-link active" href="#tab1">包包</a></li><li class="nav-item"><a data-toggle="tab" class="nav-link " href="#tab2">化妆品</a></li><li class="nav-item"><a data-toggle="tab" class="nav-link" href="#tab3">汽车</a></li><li class="nav-item"><a data-toggle="tab" class="nav-link" href="#tab4">手表</a></li>
</ul>
<!-- 内容-->
<div class="tab-content"><div id="tab1" class="tab-pane active">小香香,酒神,MK,GUCCI</div><div id="tab2" class="tab-pane">圣罗兰,兰蔻,雅诗兰黛,SKII</div><div id="tab3" class="tab-pane">GTR,大G,恩佐</div><div id="tab4" class="tab-pane">江诗丹顿,理查德米勒,浪琴</div>
</div>

③胶囊导航
ul.nav.nav-pills
a data-toggle=“pill”

<h3>胶囊导航</h3>
<ul class="nav nav-pills"><li class="nav-item"><a data-toggle="pill" class="nav-link active" href="#p1">海贼王</a></li><li class="nav-item"><a data-toggle="pill" class="nav-link" href="#p2">火影</a></li><li class="nav-item"><a data-toggle="pill" class="nav-link" href="#p3">死神</a></li>
</ul>
<div class="tab-content"><div id="p1" class="tab-pane">路飞,娜美,香吉士,索隆,汉库克</div><div id="p2" class="tab-pane">鸣人,佐助,李,宁次,雏田,小樱</div><div id="p3" class="tab-pane">黑崎一护,朽木白哉,蓝染,冬狮郎</div>
</div>

响应式导航栏

div.navbar .navbar-expand-xl/lg/md/sm
>ul.navbar-nav 弹性,默认y轴
li.nav-item
a.nav-link
div.navbar-expand-xl/lg/md/sm 响应式导航栏
.navbar-expand-xl/lg/md/sm这个属性会在某个屏幕以上横向显示,以下纵向显示
注意 div.navbar-expand-xl/lg/md/sm 与子元素 ul.navbar-nav 配合组成一个选择器.当父元素类名成立,子元素的主轴为row
当父元素类名不成立,子元素的主轴为column
形成了响应式的导航栏

<h3>导航栏</h3>
<div class="navbar navbar-expand-lg"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="">导航栏1</a></li><li class="nav-item"><a class="nav-link" href="">导航栏2</a></li><li class="nav-item"><a class="nav-link" href="">导航栏3</a></li><li class="nav-item"><a class="nav-link" href="">导航栏4</a></li><li class="nav-item"><a class="nav-link" href="">导航栏5</a></li><li class="nav-item"><a class="nav-link" href="">导航栏6</a></li></ul>
</div>

折叠效果

结构
button
+div.collapse 折叠(里面封装了display:none; 隐藏)
事件button data-toggle="collapse" data-target="#id"(data-target 相当于 a标签里的 href)

<h3>折叠</h3>
<button data-target="#demo" data-toggle="collapse" class="btn btn-warning">折叠</button>
<div id="demo" class="collapse">Lorem </div>

卡片

div.card 弹性,column,wrap,背景和边框
div.card-header
+div.card-body
+div.card-footer

<h2>图片卡片</h2><p>图片在头部 (card-img-top):</p><div class="card" style="width:400px"><img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%"><div class="card-body"><h4 class="card-title">John Doe</h4><p class="card-text">Some example text some example text. John Doe is an architect and engineer</p><a href="#" class="btn btn-primary">See Profile</a></div></div>

<h3>卡片</h3><div class="card"><div class="card-header"><h4>卡片标题</h4></div><div class="card-body"><a class="card-link" href="">111111111111</a><p>Lorem </p></div><div class="card-footer"><p>联系方式..................</p></div></div>

注意事项

.card-body和.collapse 不能作用在同一个div上,不然会卡顿
解决方案 div.collapse>div.card-body
2.几个被折叠的部分,可以同时打开,而不是只能打开一个
解决方案:在所有card外面,添加父元素div#parent
在所有的div.collapse中添加自定义属性
data-parent="#parent"

手风琴效果

卡片+折叠完成
.card-body 和.collapse 写一起冲突,会产生卡顿所以要放到两个div里,解决方案div.collapse>div.card-body
card-body外面套个div collapse给它包着
几个折叠的部分,可以同时显示,同时打开不是手风琴的效果,在所有card外部添加一个父元素 div#parent,在每个div.collapse中,添加自定义属性data-parent="#parent",这样就能保证,在#parent中,同时只有一个.collapse可以开启
所有的card放到一个div里此处命名id=“parent”, 每个卡片的collapse(包含了card-body)里添加data-parent="#parent" 指向父元素parent

<h3>手风琴</h3>
<div id="parent"><div class="card"><div class="card-header"><a data-toggle="collapse" class="card-link" href="#c1">卡片1</a></div><div data-parent="#parent" id="c1" class="collapse"><div  class="card-body ">卡片1 lorem20</div></div></div><div class="card"><div class="card-header"><a data-toggle="collapse" class="card-link" href="#c2">卡片2</a></div><div data-parent="#parent" id="c2" class="collapse"><div  class="card-body ">卡片2 lorem20</div></div></div><div class="card"><div class="card-header"><a data-toggle="collapse" class="card-link" href="#c3">卡片3</a></div><div data-parent="#parent" id="c3" class="collapse"><div  class="card-body ">卡片3 lorem20</div></div></div>
</div>

折叠导航栏

结构
div.navbar 导航栏的标准类
.navbar-dark 对自己无效改变后代元素的颜色控制内部的全部显示颜色 ,导航栏背景是深色,后代元素用浅色的文字
控制了button的颜色,ul的文本颜色,a标签颜色
.bg-dark 背景为深色
.navbar-expand-* 让按钮在以上的屏幕,隐藏
让导航在以上横向显示
. navbar-expand-md 有三个任务
1.让按钮在md/lg/xl 隐藏,在sm显示
2.让.collapse 在md/lg/xl显示,在sm隐藏
3.让ul.navbar-nav在md/lg/xl横向row
在sm纵向 column
>a.navbar-brand 不被隐藏和折叠的菜单项
+button.navbar-toggler 改变按钮背景色
> span.navbar-toggler-icon 按钮中间3条线
+div.collapse.navbar-collapse配合. navbar-expand-md显示或隐藏
>ul.navbar-nav 配合. navbar-expand-md 横向或纵向显示
.navbar-collapse 调整隐藏菜单的显示位置
ul.navbar-nav>li.nav-item>a.nav-link
事件
button data-toggler=“collapse” data-target="#demo"
div.collapse#demo

<head><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="bootstrap.css"><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- bg-dark深背景色, navbar-dark对自己无效改变后代元素的颜色 控制内部的全部显示颜色   navbar-expand-md让按钮在md以上的屏幕隐藏--><div class="navbar bg-dark navbar-dark navbar-expand-md"><!-- 1.最前面不折叠的菜单项--><a class="navbar-brand" href="">Bootstrap中文网</a><!-- 2.按钮,小屏下显示,按钮上有三条线,是折叠部分的触发按钮,大屏隐藏--><button data-toggle="collapse" data-target="#content" class="navbar-toggler"><!-- navbar-toggler-icon--><span class="navbar-toggler-icon"></span></button><!-- 3.隐藏的菜单,大屏横向显示,小屏隐藏,纵向显示--><div id="content" class="collapse navbar-collapse"><ul class="navbar-nav"><li class="nav-item"><a href="" class="nav-link">boot3</a></li><li class="nav-item"><a href="" class="nav-link">boot4</a></li><li class="nav-item"><a href="" class="nav-link">Scss</a></li><li class="nav-item"><a href="" class="nav-link">jQuery教程</a></li><li class="nav-item"><a href="" class="nav-link">网站实例</a></li></ul></div></div>
</div>
</body>

媒体对象

div.media (弹性,主轴x,交叉轴start ) >img +div.media-body

<div class="container"><h3>媒体对象</h3><div class="media border p-3"><img class="rounded mr-2" src="pic.jpg" alt=""/><div class="media-body"><h4>标题</h4><p>内容...</p></div></div>
</div>

焦点轮播图

1.最外层大包裹
div.carousel 相对定位
>div.carousel-inner w100 溢出隐藏
①轮播图片
>div.carousel-item其中一个写.active >img display:none >img.w-100
事件在最外层div中 data-ride="carousel"
2.左右箭头
a.carousel-control-prev/next >span.carousel-control-prev/next-icon 事件a data-slide="prev/next" href="#最外层div 的id"
3.轮播指示器
ul.carousel-indicators 弹性,x轴
> li 一个li .active
事件li data-target="#demo" data-slide-to="0"图片的下标,从0开始
根据需求重写li的样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="bootstrap.css"><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script><style>.carousel-control-prev,.carousel-control-next{width:4%; height: 20%;background-color: #aaa;border-radius: 0.25rem;top: 40%;} .carousel-control-prev{left: 0.25rem;}.carousel-control-next{right: 0.25rem;}@media(min-width: 768px){.carousel-indicators li{width: 0.8rem;height: 0.8rem;border-radius: 50%;background: #fff;margin-left: 0.4rem;margin-right: 0.4rem;}}@media(min-width: 767px){.carousel-indicators li{width: 0.4rem;height: 0.4rem;border-radius: 50%;background: #fff;margin-left: 0.2rem;margin-right: 0.2rem;}}.carousel-indicators li.active{background: #0aa1ed;}</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="banner1.png" alt=""></div><div class="carousel-item"><img class="w-100" src="banner2.png" alt=""></div><div class="carousel-item"><img class="w-100" src="banner3.png" alt=""></div><div class="carousel-item"><img class="w-100" src="banner4.png" alt=""></div></div><!-- 2.左右箭头 --><a data-slide="next"  class="carousel-control-next" href="#demo"><span class="carousel-control-next-icon"></span></a><a data-slide="prev" class="carousel-control-prev" href="#demo" ><span class="carousel-control-prev-icon"></span></a><!-- 3.轮播指示器 --><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></div></div>
</body>
</html>

模态框

.modal 源码封装固定定位

<div class="modal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"></div><div class="modal-body"></div><div class="modal-footer"></div></div></div>
</div>

<h3>模态框</h3><!--                 事件     ,    打开方式 --><button data-target="#mymodal" data-toggle="modal" class="btn btn-warning">打开模态框</button><!-- 第一层 --><div id="mymodal" class="modal"><!-- 第二层 --><div class="modal-dialog"><!-- 第三层 --><div class="modal-content"><!-- 第四层 --><div class="modal-header"><h4>标题</h4></div><!-- 第五层 --><div class="modal-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, ut!</p></div><!-- 第五层 --><div class="modal-footer"><!-- data-dismiss 关闭   在模态框内部不需要添加关闭的目标--><button data-dismiss="modal" class="btn btn-danger">关闭</button></div></div></div></div>

小按钮巨幕分页条

1.徽章----小按钮
badge 基本类
badge-danger/warning…
badge-pill 胶囊徽章

<head><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="bootstrap.css"><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script><style>.page-link{border-radius: 0.25rem !important;}.page-item+.page-item{margin-left:0.8rem;}.page-link{background-color:transparent;color:#fff;}</style>
</head>
<body>
<div class="container"><h3>徽章</h3><ul class="list-group"><li class="list-group-item">赞 <a class="badge badge-pill badge-success" href="">432</a></li><li class="list-group-item">踩 <a class="badge badge-danger" href="">999</a></li><li class="list-group-item">关注 <a class="badge badge-info" href="">222</a></li></ul>
</div>
</body>

2.巨幕
jumbotron 巨大的内边距和背景色

<h3>巨幕</h3><div class="jumbotron"><h2>鲤鱼鲤鱼</h2><p>红鲤鱼不要皮</p><p>绿鲤鱼不要闹</p><p>驴,驴,驴</p><p>红绿鲤鱼都是驴</p></div>

3.分页条
ul.pagination >li.page-item +.active/.disabled (选中/禁用)>a.page-link

<head><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="bootstrap.css"><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script><style>.page-link{border-radius: 0.25rem !important;}.page-item+.page-item{margin-left:0.8rem;}.page-link{background-color:transparent;color:#fff;}</style>
</head>
<body>
<div class="container"><h3>分页</h3><ul class="pagination bg-info p-2 justify-content-end"><li class="page-item disabled"><a class="page-link" href="">上一页</a></li><li class="page-item active"><a class="page-link" href="">1</a></li><li class="page-item"><a class="page-link" href="">2</a></li><li class="page-item"><a class="page-link" href="">3</a></li><li class="page-item"><a class="page-link" href="">4</a></li><li class="page-item"><a class="page-link" href="">5</a></li><li class="page-item"><a class="page-link" href="">下一页</a></li></ul>
</div>
</body>

面包屑导航进度条

面包屑导航 本意是有递进关系的导航

ul.breadcrumb >li.breadcrumb-item >a

重写样式,改变连接符号(源码中存在的选择器)
.breadcrumb-item + .breadcrumb-item::before{ content:">";} 源码中的是 " / ", 单改content

<style> .breadcrumb{background:transparent;}.breadcrumb-item + .breadcrumb-item::before{content:">";}
</style>
<body><div class="container">
<h3>面包屑导航</h3>
<ul class="breadcrumb"><li class="breadcrumb-item"><a href="">首页</a></li><li class="breadcrumb-item"><a href="">学习用品</a></li><li class="breadcrumb-item"><a href="">笔记本电脑</a></li><li class="breadcrumb-item"><a href="">MacBook</a></li>
</ul></div></body>

进度条
div. progress 进度条的槽
div. progress-bar 进度条
使用bg-danger/... 控制颜色
使用w-75 控制进度
.progress-bar-animated 带动画的进度条
.progress-bar-striped 带斜线条纹的进度条

<style>w-90{width:90%;}</style>
<body><div class="container">
<h3>进度条</h3>
<div class="progress"><!--           进度条  带动画的进度条              斜线条纹         颜色     进度读条宽度--><div class="progress-bar progress-bar-animated progress-bar-striped bg-success w-90"></div>
</div>
<div class="progress"><div class="progress-bar progress-bar-animated progress-bar-animated progress-bar-striped bg-warning w-90"></div>
</div>
</div></body>

<div class="container"><h3>设置密码难易程度</h3><div class="progress"><div class="progress-bar w-75 bg-danger">一般</div><div class="progress-bar w-75 bg-warning">简单</div><div class="progress-bar w-75 bg-success">复杂</div></div>
</div>

boot定制

boot最重要的, 媒体查询+栅格布局+scss
1.css的缺点
语法不够强大,没有变量和合理的样式复用机制,导致难以维护,难以管理
使用动态样式语言,赋予CSS新的特性,提高样式的可重用性和可维护性
常用的动态样式语言
1.scss/sass(scss是新版本 scss兼容sass,scss更贴近css的语法 boot4使用sass写的)
2.less (boot3使用)
3.stylus
2.scss是什么
scss是一款强大的css辅助工具
它和css的语法十分相似,在css的基础上
添加了变量,嵌套,混合,导入,函数等高级功能
这些拓展命令让css更加的强大,与优雅

scss的使用

32位的scss要求node.js解释器8.11 , 64位的scss要求node.js解释器10.1
scss运行在服务器
在线安装 npm install -g node-sass
离线安装 sass包中的四个文件全部赋值到nodejs文件夹(不是node_modules,是nodejs文件夹) , 在cmd 中执行 node-sass -v 查看,提示版本号就是成功 , 不行就装scss64

scss文件转换成css文件
把.scss文件转换成.css文件 , 传递给前端,让浏览器运行 , 浏览器本身不具备运行.scss的能力

单文件装换 scss文件所在路径(scss文件外开PowerShell) /node-sass scss文件路径和名称/css文件路径和名称 , node-sass scss/1.scss css/1.scss
多文件转换 node-sass scss -o css
node-sass scss文件夹 -o css文件夹 , node-sass scss -o css
单文件监听
node-sass -w 文件路径和名称(要监听的scss文件) css文件路径和名称 (要转换成的css文件) node-sass -w scss/01.scss css/01.css
多文件监听
node-sass -w scss文件夹 -o css文件夹
ex: node-sass -w scss -o css

scss基础语法
变量
$jd_red:#f10215;使用$声明变量,变量名可以包含- _,命名规则基本上与选择器规则相同
1.声明变量时,变量值可以引用其他变量
2.变量存在作用域,在{}外不能用, 定义在{}外的是全局变量都能用
3.重复的变量声明,后声明会覆盖之前的声明的变量
!default规则,如果一个变量声明了!default
这变量之前被声明过,就使用之前声明的值 , 这个变量没有被声明过,就使用现在的值

$jd_red:#f10215;
$normal-size:100px;
$my-style:solid;
$my-style:dotted !default;
$my-border:$normal-size $my-style $jd_red;
div{$my-width:10px;width:$my-width;color:#000;border:$my-border;
}

嵌套

#content{border:1px solid #f00;p{background:#00f;a{text-decratioin:none;}b{text-style:normal;}}div{background:#00f;ul{list-style:none;li{border:0;a{text-decoration:none;}img{outline:0;}}}}
}
注意:1.有可能选择器会发生冲突,因为只能生产后代选择器2.出现伪类选择器,会有问题,需要加&符号占位

群组嵌套伪类嵌套

div,p,h3{a{color:red;&:hover{color:blue;}}
}
伪类嵌套,需要占位符&. 不然会有空格

属性嵌套

div{border:{width:100px;style:solid;color:#f00;}
}

导入
以_开头的scss文件,叫做局部scss文件
局部scss不会被转换成css文件
把许多局部scss导入到一个正常scss中
直接转换这个正常的scss文件为css
那么所有导入的局部scss代码都会在这个css中出现

@import “局部scss名称” 不带下滑线,不带后缀
被导入的scss文件中的变量 ,可以直接使用

1.scss文件

@import "my";
div{color:$my-color;}

_my.scss文件

$my-color:#f00;
.my-color{color:$my-color;}

混合器
混合器
1.声明混合器
@mixin 名称{要重用的样式}
2.使用混合器
在使用重用样式的位置
@include 名称; 调用混合器
3.应用场合
①把公用样式提取出来,封装进混合器
②css hack
4.带参数的混合器
@mixin 名称(参数1,参数2…){要重用的样式}
@include 名称(参数1,参数2…); 调用混合器
1.scss文件

@mixin my_bg($fx,$c1,$c2){background:-webkit-linear-gradient($fx,$c1,$c2);background:-o-linear-gradient($fx,$c1,$c2);background:-moz-linear-gradient($fx,$c1,$c2);background:-ms-linear-gradient($fx,$c1,$c2);
}
p{@include my_bg(bottom,#000,#0aa1ed);
}
div{@include my_bg(top,#111,#222);
}
@mixin my_border{border:1px solid #f00;border-radius:50%;}
p{background:#000;@include my_border;
}
div{width:200px;@include my_border;
}

1.css文件

p {background: -webkit-linear-gradient(bottom, #000, #0aa1ed);background: -o-linear-gradient(bottom, #000, #0aa1ed);background: -moz-linear-gradient(bottom, #000, #0aa1ed);background: -ms-linear-gradient(bottom, #000, #0aa1ed); }div {background: -webkit-linear-gradient(top, #111, #222);background: -o-linear-gradient(top, #111, #222);background: -moz-linear-gradient(top, #111, #222);background: -ms-linear-gradient(top, #111, #222); }p {background: #000;border: 1px solid #f00;border-radius: 50%; }div {width: 200px;border: 1px solid #f00;border-radius: 50%; }

继承
一个选择器可以继承另外一个选择器所有的样式
@extend 选择器名称;
继承效果,两个选择器,形成群组选择器
1.scss文件

.my1{color:#111;background:#111;
}
.my2{border-color:#222;@extend .my1;
}

1.css文件

.my1, .my2 {color: #111;background: #111; }.my2 {border-color: #222; }

运算 + - /
相对单位不能转换,绝对单位可以自动转换
①加法
字符串拼接的时候
如果使用带双引号的字符串+不带双引号的字符串,结果带双引号
如果使用不带双引号的字符串+带双引号的字符串,结果不带双引号
②减法
由于变量声明的时候,可以使用-
系统分不清楚,- 是变量名称还是减法
我们写的时候在-前后添加空格.告诉系统,是减号
width:$my-width - $my-width1;
③除法
scss中 /,除了解析成除法外,还被看成分割符
视为除法的几种情况
1.如果运算式两边的数字,是变量或者方法的返回值
2.运算式被()包裹
3.除法运算式,是其它运算式的一部分
④scss字符串中的插值操作
content:“liangCheng ate #{50+100} baozis”;
⑤颜色的计算
分段计算 r+r g+g b+b 如果超过255,或者ff.就取ff或者255
rgb(11,22,33)+#162c42
rgba的计算,需要a的值,相同,才可以计算,要求两个a必须相同
1.scss文件

div:after{content:to_lower_case("ABC");
}
div{width:floor(4.5px);color:hsl(360,100%,50%);
}
div:before{background:rgba(1,1,1,0.8)+rgba(2,3,4,0.8);color:#fdfdfd+#010203;//#feffffcontent:"liangliang ate #{70+20} baozis";
}
p{font:10px/5px;$width:1000px;width: $width/2;heigth:(500px/2);margin:5px+8px/2;
}
$my-a:100px;
$my-b:10px;
div{width:$my-a - $my-b;
}
div:before{content:"xiaohuangya"+gagaga;font-family: chi+"ller";
}
$my-width:10cm;
$max_width:$my-width+10pt;
$min_width:$my-width - 10in;
div{width:$max_width;max-width: $min_width;
}

1.css文件

div:after {content: "abc"; }div {width: 4px;color: red; }div:before {background: rgba(3, 4, 5, 0.8);color: #feffff;content: "liangliang ate 90 baozis"; }p {font: 10px/5px;width: 500px;heigth: 250px;margin: 9px; }div {width: 90px; }div:before {content: "xiaohuangyagagaga";font-family: chiller; }div {width: 10.35278cm;max-width: -15.4cm; }

函数
①scss中定义了很多函数,有些函数直接在css中使用
rgba
hsl(hue,saturation,lightness)
hue:色调 0~360
saturation:饱和度 0.0%~100%
lightness:亮度 0.0%~100%
background:hsl(120,100%,50%);
②数学函数

round($val) 四舍五入
ceil($val); 向上取整
floor($val); 向下取整
min($v1,$v2.......)
max($v1,$v2.......)

random() 随机数
③字符串函数
unquote($str) $str去掉引号
quote($str) $str加上引号
to_upper_case($str) $str转成大写
to_lower_case($str) $str转成小写
④自定义函数
@function 方法名称(v1,v1,v1,v2…){
逻辑
@return 返回值;
}
1.scss文件

@function add($a,$b){@return $a+$b;
}
div{width:add(15,20)+px;
}

1.css文件

div {width: 35px; }

指令
@if(){
}@else if(){
}@else{}
1.scss文件

$car:GTR;
p{@if $car==GTR{width:300px;}@else if $car==golf{width:260px;}@else if $car==auto{width:60px;}@else if $car==28{width:15px;}@else {width:5px;}
}

1.css文件

p {width: 300px; }