一、组件

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 hack

5.继承

一个选择器，可以使用另外一个选择器的所有样式

.my1{ width:100px;height:100px; } .my2{ background:#f00; @extend .my1; }

转换之后继承的表现方式，是群组选择器

.my1, .my2 { width: 100px; height: 100px; } .my2 { background: #f00; }

--------------------------------------------------达内培训笔记20190523