web前端学习笔记（2）
一、组件
10媒体对象
boot提供了很多类，来处理媒体相关的对象
图片 影音
11轮播图
1.轮播图结构
div.carousel data-ride=”carousel”------------------------相对定位
div.carousel-inner----------------------w100 溢出隐藏
div.carousel-item-----------------------display:none
img
2.左右箭头
a.carousel-control-prev/next----------------------a的宽度，背景，位置
span.carousel-control-prev/next-icon---------左右箭头
需要重写↓↓.carousel-control-prev/next中的宽高，位置
a标签要添加自定义属性 data-slide=”prev/next”
事件的目标是最外层div#demo href=”#demo”
3.轮播指示器
ul.carousel-indicators---------------------绝对定位，横向弹性
li-----------------------------------------------宽高，背景色，外边距
我们需要重写li的样式
如果让li有被选中的状态，需要第一个li添加.active。
我们需要重写.active
.carousel-indicators .active{
background-color:#0aa1ed;
}点击li激活事件
data-slide-to=”图片下标” 下标从0开始
事件改变的目标
data-target=”#demo”整个轮播最外层div的id
12模态框
覆盖在父窗体上的一个子窗体，用于与用户做一些互动
<h1>模态框</h1>
<button data-toggle="modal" data-target="#mydemo" class="btn btn-danger">打开模态框</button>
<div id="mydemo" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>填写你喜欢的明星</h4>
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<input class="form-control" type="text"/>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-danger">关闭</button>
</div>
</div>
</div>
</div>二、其他组件
1.徽章
跟小按钮十分类似
基本类 badge
颜色 badge-danger/warning/info…
徽章样式 badge-pill
2.巨幕
巨大的内边距，有背景颜色，有圆角
div.jumbotron
<h1>巨幕</h1>
<div class="jumbotron">
<h2>今天周三</h2>
<p>天气好热</p>
<p>教室人多</p>
<p>教室机器多</p>
<p>空调不凉</p>
</div>3.分页条
ul.pagination>li.page-item>a.page-link
li的修饰类 .active激活
.disabled 禁用
<h1>分页条</h1>
<ul class="pagination">
<li class="page-item disabled mr-1">
<a class="page-link " href="#">上一页</a>
</li>
<li class="page-item active mx-1">
<a class="page-link " href="#">1</a>
</li>
<li class="page-item mx-1">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item mx-1">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item mx-1">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item mx-1">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item ml-1">
<a class="page-link" href="#">下一页</a>
</li>
</ul>4.面包屑导航
常用于有路径关系的导航
ul.breadcrumb>li.breadcrumb-item
<h1>面包屑导航</h1>
<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="#">ThinkPad470</a>
</li>
</ul>每个li之间连接的符号需要重写
<style>
.breadcrumb-item + .breadcrumb-item::before{
content:'>';
}
</style>5.进度条
1.普通进度条
div.progress>div.progress-bar.w-50.bg-warning
父div是进度条的槽，子div是进度条
子div的宽度，是进度条的进度
子div的背景，是进度条的颜色
<h1>普通的进度条</h1>
<div class="progress"><!--进度条的槽-->
<!-- 进度条-->
<div class="progress-bar w-50 bg-warning"></div>
</div>
![在这里插入图片描述]()2.带条纹的进度条
在子div中添加progress-bar-striped
<h1>带条纹的进度条</h1>
<div class="progress">
<div class="progress-bar w-75 bg-success progress-bar-striped"></div>
</div>
3.带动画的条纹进度条
<h1>带动画的条纹滚动条</h1>
<div class="progress">
<div class="progress-bar w-100 bg-danger progress-bar-striped progress-bar-animated"></div>
</div>三、SCSS详解
1.什么是scss
scss是一款强化css的辅助工具
它和css语法很像。
它在css的语法基础上，添加了变量，嵌套，混合，导入，函数等高级功能。
这些拓展命令让css更加强大和优雅
浏览器不能直接解析scss文件，需要在项目中把scss转义成css文件，让浏览器解析，scss可以让css开发更高效。
2.scss的安装使用
scss在服务器端使用
nodejs v8.11以上，才可以使用scss
1.在线安装scss 在cmd中，输入命令行npm install -g node-sass
2.无网安装
找到sass的4个文件
找到nodejs的安装路径
把sass的4个文件放入nodejs文件夹
在cmd中使用node-sass -v验证版本
3.scss文件转换成css文件
1.单文件转换
①创建scss目录和01.scss文件
②在项目路径下，打开黑窗口
③输入下面命令 node-sass scss文件路径 css文件路径
2.多文件转换
node-sass scss文件夹 -o css文件夹
3.单文件监听转换
node-sass -w scss/01.scss css/01.css
4.多文件监听，监听一个文件中的所有文件
node-sass -w scss文件夹 -o css文件夹
四、SCSS基本语法
1.变量
使用$声明变量，变量名可以包含-，_
命名规则基本与css选择器相同，尽量做到见名知义
变量声明在大括号{}外，整个sass文件都可以使用。
变量声明在大括号{}内，只有当前{}内可以使用。
!default规则
如果此变量在之前已经声明赋值了，那么使用之前的值；如果之前没有声明赋值，使用现在的值。
2.嵌套
选择器的嵌套
scss↑↑自动转换成css↓↓
2.伪类的嵌套
需要在伪类选择器之前添加&，如果不添加，会生成一个空格导致伪类失效
a{
width:21px;
&:hover{width:25px;}
}3.属性的嵌套
div{
border:{style:solid;width:2px;color:#fff;};
}4.群组选择器的嵌套
nav,div,header,footer{
a{width:100px;}
}3.导入
在scss的语法中，如果一个scss文件以下划线开头，那么这个scss文件就是一个局部scss文件
scss文件转换成css文件的时候，不会把局部scss文件进行转换，只转换不以下划线开头的scss文件（全局scss文件）
导入的语法 @import”name”;
@import “color”;
真正导入的文件名称 name.scss 导入的时候掐头去尾
导入时，不写,不写.scss后缀
局部文件被导入后，局部文件中的样式，会在全局文件转换的css中生成。
同时，局部文件中声明的变量，可以在全局文件中使用。
4.混合器
把多个选择器都会使用的样式，封装进一个混合器
需要使用这些样式的选择器，可以调用这个混合器，实现代码的重用。
关键字：
（1）声明混合器 @mixin 混合器名称(参数1，参数2){样式}
@mixin my_border{
border:1px solid #f00;
outline:0;
border-radius:50%;
}（2）调用混合器 @include 混合器名称(参数1 ,参数2)
a{
@include my_border;
}
混合器的使用场合-----css hack5.继承
一个选择器，可以使用另外一个选择器的所有样式
.my1{
width:100px;height:100px;
}
.my2{
background:#f00;
@extend .my1;
}转换之后继承的表现方式，是群组选择器
.my1, .my2 {
width: 100px;
height: 100px; }
.my2 {
background: #f00; }--------------------------------------------------达内培训笔记20190523