响应式 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)
编写响应式网页
移动端适配(移动端运行,一定要写)
width=device-width 视口宽度为设备宽度
initial-scale=1.0, 设置视口初始缩放为1倍,不放大不缩小
maximum-scale=1.0, 允许视口最大放大到1倍
user-scalable=0 是否允许用户缩放视口 0,不允许
简洁的写法
所有的内容/文字/图片尽量使用相对尺寸(rem %) ,不使用绝对值
流式布局+弹性布局+媒体查询,完成响应式布局 , 能不用定位就不用了
@media 媒体查询
CSS3 Media Query,做响应式布局的必备技术
Media 媒体,特指浏览网页的设备 设备就是条件,符合这个条件,就执行这部分样式,忽略其他样式
条件包括两部分 : ①浏览器网页的硬件 screen(pc/pad/phone) , TV , Print
②尺寸: 超大屏幕(xl)width>=1200px , 大屏幕(lg)992px
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*2000div>
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=""/> class="p-1 col-md-3 col-sm-6" src="2.jpg" alt=""/> class="p-1 col-md-3 col-sm-6" src="2.jpg" alt=""/> 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.项目
①视口
②按照顺序导入4个boot文件 , 一般地 bootstrap.css文件写入css文件夹中 , jquery.min.js , popper.min.js , bootstrap.min.js 等写入js文件夹中 ,
<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-item
list-group-item-warning">Lorem</li>
<li class="list-group-item
list-group-item-info disabled">Lorem</li>
<li class="list-group-item
list-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:1h4>
<div class="row">
<div class="col-2">col-2div>
<div class="col-8">col-8div>
<div class="col-2">col-2div>
div>
<h4>1:1:1:1h4>
<div class="row">
<div class="col-3">col-3div>
<div class="col-3">col-3div>
<div class="col-3">col-3div>
<div class="col-3">col-3div>
div>
/* 挤下来 */
<div class="row">
<div class="col-1">col-1div>
<div class="col-2">col-2div>
<div class="col-3">col-3div>
<div class="col-4">col-4div>
<div class="col-5">col-5div>
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">CSSspan>
<span class="font-weight-normal">Typespan>
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="">12312321a>li>
<li><a href="">12312321a>li>
<li><a href="">12312321a>li>
<li><a href="">12312321a>li>
<li><a href="">12312321a>li>
ul>
div>
<div class="col-6">
<div>Lorem ipsum dolor sit amet,div>
<table class="table table-striped">
<tr>
<td>1111td>
<td>2222td>
<td>2222td>
<td>3333td>
tr>
<tr>
<td>1111td>
<td>2222td>
<td>2222td>
<td>3333td>
tr>
table>
div>
<div class="col-3">
<h3>课程介绍h3>
<ul class="list-unstyled">
<li><a href="">12121a>li>
<li><a href="">12121a>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">
<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-1
mb-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>
商城盒子布局
<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.00p>
<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.00p>
<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 绝对定位 (定位多选框的位置)
.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">×</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">卡片1a>
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">卡片2a>
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">卡片3a>
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">
<div class="navbar bg-dark navbar-dark navbar-expand-md">
<a class="navbar-brand" href="">Bootstrap中文网a>
<button data-toggle="collapse" data-target="#content" class="navbar-toggler">
<span class="navbar-toggler-icon">span>
button>
<div id="content" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a href="" class="nav-link">boot3a>
li>
<li class="nav-item">
<a href="" class="nav-link">boot4a>
li>
<li class="nav-item">
<a href="" class="nav-link">Scssa>
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的样式
<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">
<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>
<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>
<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">
<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;//#feffff
content:"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 方法名称( v 1 , 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; }