BootStrap（day05）-CSDN博客

本文链接：https://blog.csdn.net/weixin_51341201/article/details/124740361

六、其他组件

巨幕（巨大的内边距, 边框和背景色）

<div class="jumbotron">
    <h2>信息张贴栏</h2>
    <p>本轮疫情在此结束</p>
    <p>全球新冠肺炎疫情</p>
</div>

徽章（把徽章看作小按钮）
基本类: .badge
徽章颜色 .badge-danger/warning...

胶囊徽章: .badge-pill

分页
ul.pagination>.li.page-item>a.page-link

    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" href="">上一页</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="">1</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="">上一页</a>
        </li>
    </ul>

面包屑导航
ul.breadcrumb>li.breadcrumb-item
```
<ul class="breadcrumb">
    <li class="breadcrumb-item">
        <a href="">首页</a>
    </li>
</ul>
```
中间的连接符可以自定义
```
.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
}
```
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-52Ps8ibe-1652790869966)(https://b2.kuibu.net/file/imgdisk/2022/05/08/imagef3dd8038b6c685c9.png)]
进度条
div.progress>div.progress-bar
.progress: 进度条的槽
.pregress-bar: 进度条的条，宽度需自定义 .w-25 背景色也可以自定义
```
<div class="progress">
    <div class="progress-bar w-50 bg-danger"></div>
</div>
```
带条纹的进度条 .progress-bar-striped
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cBIKzYUK-1652790869968)(https://b2.kuibu.net/file/imgdisk/2022/05/08/image4be0e9cd4879f240.png)]

带动画的进度条 .progress-bar-animted

(BootStrap 重点：响应式+栅格布局+SCSS)

七、定制

什么是 SCSS
css 是一种脚本语言，没有动态语言的特征
css 语法不够强大，没有变量和合理的复用机制，导致出现重复性较高的服用机制无法维护
我们需要使用动态的样式语言来赋予 css 新的特性
常见的动态样式语言
① SCSS/SASS(SCSS兼容SASS，SCSS更接近css语法)
② stylus
③ less
SCSS 的功能
是一款强化CSS的辅助工具他和css的语法很想非常向在css的基础上增加了函数、变量、嵌套、混合、导入等高级功能
这些拓展命令让css更加的强大切优雅
scss运行在服务器浏览器不认识scss文件需要转换为.css才能被浏览器解析执行
sass 的使用
sass是在服务器端使用
① 安装 node.js 的解析器 v8.11.1 以上版本

② 在线安装 cmd 控制台 npm install -g node-sass

③ 无网络安装把安装包终的文件，复制到 node 的根目录下 cmd 输入 node-sass -v 检验
SCSS 文件转为CSS文件
① 单文件转换
在项目目录下执行 node-sass scss/01.scss(要转换的源文件) css/01.css(转换以后的文件)

② 多文件转换
node-sass scss(源文件) -o css(目标文件加)

③ 单文件的监听
node-sass -w scss/01.scss css/01.css
开启一个监听，注释着 scss/01.scss 文件
一旦着个文件被保存(ctrl+s)，自动转换为 css/01.css

④ 多文件监听
node-sass -w scss -o css

八、SCSS 基础语法

变量
使用$符号创建变量, 变量名可以包含-_ 命名规则基本与css的选择器基本相同尽量起的有意义
注意:
① 变量声明时可以接收另一个变量作为值
② 变量如果在 {} 内声明则只能在 {} 内使用
③ !default 规则
- 如果此变量之前声明z’z’c xzzxczxzcczcxxxzxzczczczxzxz过值则, 本次声明不起效
- 如果此变量没有声明的则, 使用本次声明的值

嵌套
① 后代选择器的嵌套写法

#content {
  font-size: 16px;
  div.top {
    width: 100px;
    height: 200px;
    background-color: $jd_color;
    h1 {
      color: #021101;
    }
    p {
      color: #11ff00;
    }
  }
}

② 伪类选择器的嵌套

.mybtn {
 &:hover {}
}

嵌套是需要&占位符, 如果没有占位符，选择器和伪类选择器之间会多一个空格导致选择器整个失效

③ 群组的嵌套

nav,div,h1 {
  a { color: #0aa1e2; }
}

④属性的嵌套

div {
  border: {style: solid; width: 10px; color: #00f;  };
}

转换完成的结果:

div {
  border-style: solid;
  border-width: 10px;
  border-color: #00f; 
}

导入
在 SCSS 语法中。如果SCSS文件，以下划线靠头，则着个文件被称为局部SCSS文件
① 局部SCS：每一个局部SCSS文件，就是一个小模块
② SCSS在做转换CSS的时候，不会转换局部SCSS文件
③ 我没一般会在全局SCSS文件中，导入局部SCSS文件
导入语法: @import "局部SCSS文件名称"(不带下划线，不带后缀)
这样生成一个统一的CSS文件
④ 局部SCSS中的变量，可以在被导入的文件中使用

混合器
把多个选择器都会用到的样式, 封装进一个混合器中, 需要使用时, 调用混合器, 实现代码的重用

声明混合器 @mixin 混合器名称(形参1, 形参2, ....){ 样式 }
调用混合器: @include 混合器名称(实参1, 实参2, ...);

@mixin my_border($borderColor, $radius, $outline) {
  border: 1px solid $borderColor;
  border-radius: $radius;
  outline: $outline;
}
p {
  background-color: #3e8f3e;
  @include my_border(#f0f, 30%, 0);
}

注意: 混合器使用最多的场合, css hack

@mixin linear_gradient($color1, $color2) {
  background: -webkit-linear-gradient(bottom, $color1, $color2);
  background: -o-linear-gradient(bottom, $color1, $color2);
  background: -ms-linear-gradient(bottom, $color1, $color2);
  background: -moz-linear-gradient(bottom, $color1, $color2);
}
div {
  @include linear_gradient(#303, #030);
}

继承
一个选择器, 可以完全使用另一个选择器的样式
使用关键字: @extent 选择器名称 继承样式

.my_rounded {
  border: 1px solid #f00;
  border-radius: 5px;
}

.my_shadow {
  box-shadow: 0 0 10px;
  @extend .my_rounded;
}

运算符
scss 可以自动在几种单位之间转换数值
前提是, 单位可以转换 rem em % 就不能转换

① 加法
字符串拼接的时候, 如果使用有双引号的 + 没有双引号的结果有双引号
反之则没有双引号
```
p::before {
  content: "Microsft"+yahei;
  font-family: A+"rial";
}
```
```
p::before {
  content: "Microsftyahei";
  font-family: Arial; 
}
```
② 减法
减法会被自动解析为变量的一部分
所以 scss 中的减法, 前后加空格
```
p {
 width: $my_width - $min_width;
}
```
③ 除法
scss 中 / 的作用是分隔符和除法的作用
在 scss 中一下情况会被认为是除法
- 如果运算符两边的数字是变量或者是函数的返回值
- 运算式被小括号包裹
- 除法运算式，是其他算术运算式的一部分
④ 字符串的插值操作
content: "liangliang ate #{200+100}baozis"
最后的结果:
content: "liangliang ate 300 baozi";
#{} 做插值

⑤ 颜色的运算

R+R=结果R | G+G=结果G | B+B=结果B

分段运算
#rrgg + #rrgg = #rr+rr gg+gg bb+bb
rgb(a, b, c) + rgb(d, e, f) = rgb(a+d, b+e, c+f)

计算两个 rgba 的时候要求两个 alpha 值必须相等，才能运算
内置对象
① scss 定义了很多函数，有些函数直接可以在 CSS 语句中使用
rgba 就是 scss 的内置函数
hsl(hue, saturation, lightness)
- hue 色调 (0~360) 0~120 120~240 240~360
- saturation 饱和度 0~100%
- lightness 亮度 0~100%__

② 数学函数
round($val): 四舍五入
ceil($val): 向上取整
floor($val): 向下取整
min($v1,$v2...): 最小值
max($v1, $v2....): 最大值
random(): 随机数

区分 ceil 和 floor 的方法:

③ 字符串函数
unquote($str): 去掉 $str 的引号
```
unquote("there is a movie")
//结果:
p::after {
 content: there is a movie;
}
```
quote($str): 给 $str 加引号
to-upper_case($str): 英文字母全体大写
to-lower_case($str): 英文字母全体小写

④ 自定义函数
```
@function get_width($a) {
 @return $a;
}
```
关键字 function return 加 @, 参数加 $

指令

@if(条件) {
 //指令1
} @else if(条件) {
 //指令2
} @else {
 //指令3
}

条件的小括号可以加，也可以不加

BootStrap（day05）

六、其他组件

七 、定制

八、SCSS 基础语法

七、定制