六.其它组件
3.分页
|
ul.pagination >li.page-item >a.page-link li的修饰类 .active 激活 .disabled 禁用 |
4.面包屑导航
|
ul.breadcrumb>li.breadcrumb-item 中间的连接符号可以自己定义 .breadcrumb-item + .breadcrumb-item::before{ content:">"; } |
5.进度条
|
div.progress 进度条的槽 >div.progress-bar 进度条的进度需要自己写w-25 背景色 bg-danger..... 带条纹的进度条 progress-bar-striped 带动画的进度条 progress-bar-animated |
BootStrap重点：响应式+栅格布局+SCSS
七.定制
1.scss是什么
|
css是一种脚本语言，没有动态语言的特征 css语法不够强大，没有变量和合理的样式复用机制，导致难以维护 我们需要使用动态的 样式语言，赋予css新的特性 常见的动态样式语言 1.SCSS/SASS(scss兼容sass，scss更接近css的语法) 2.stylus 3.less |
2.SCSS的功能
|
scss是一款强化css的辅助工具 他和css的语法很像，在css的基础上增加了变量，嵌套，混合，导入，函数等高级功能。这些拓展命令，让css更加的强大且优雅
scss运行在服务器端 浏览器不认识.scss文件，需要转换成.css才能被浏览器解析执行 |
3.scss的使用
|
scss是在服务器端使用 1.安装nodejs的解析器 v8.11.1以上 2.在线安装，cmd控制台输入npm install -g node-sass 3.无网络安装 把安装包中的文件，复制到nodejs安装目录下 cmd中输入 node-sass -v 检查版本 打印出版本号，就是成功 |
4.scss文件转换成css文件
①单文件转换
|
在项目目录下，按住shift,右键打开powershell 输入node-sass scss/01.scss css/01.css 要转换的scss文件 转换后的css文件 |
②多文件转换
|
node-sass scss -o 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基础语法
1.变量
|
使用$符号创建变量，变量名可以包含- _,命名规则基本与css选择器相同。尽量做到见名知意 注意： 1.变量声名时，可以引用其他变量名 2.变量如果声明在{}内，就只能在这个{}内使用 3.!default 规则 如果此变量之前声明过值，就使用之前声明的值 如果此变量之前没有声明过，就是使用现在的值 $jd_red:#111 !default; |
2.嵌套
①后代选择器的嵌套写法
|
//嵌套 #content{ font-size:32px; div.top{ color:#f00; h1{border:1px solid #f00; } p{margin:2px;} } } |
练习：
|
$myblue:#0aa1ed; $fontcolor:#fff; $myheight:2.5rem; $my8rem .mybtn{}+hover{color:$jd_red;} |
②伪类选择器的嵌套
|
.mybtn{ &:hover{} } 嵌套是需要&占位符，如果没有占位符，选择器和伪类选择器之间会多一个空格，导致选择器整个失效 |
③群组的嵌套
|
nav,div,h1{ a{color:#fff;} } |
④属性的嵌套
|
div{ border: {style:solid;10px;color:#00f}; } |
练习，使用属性嵌套，伪类嵌套
|
一个200px*200px的div，红色背景，方形 鼠标悬停时，过渡到黄色背景，且变为圆形 使用scss编写 |
3.导入
|
在scss语法中。如果scss文件，以下划线开头，那么这个scss就被称为局部scss文件 局部scss文件的特点 1.每一个局部scss文件，就是一个小模块 2.scss在做转换css的时候，不会转换局部scss文件 3.我们一般会在全局scss文件中，导入局部scss文件 导入的语法 @import "局部scss文件名称" (不带下划线，不带后缀) 这样生成一个统一的css文件 4.局部scss中的变量，可以在被导入的文件中使用 |
4.混合器
|
把多个选择器都会用到的样式，封装进一个混合器中。 需要使用的时候，调用混合器，实现代码的重用 声明混合器 @mixin 混合器名称(参数1,参数2....){ 样式.... } 调用混合器 @include 混合器名称(实参1，实参2....); 注意：混合器使用最多的场合，css hack |
5.继承
|
一个选择器，可以完全使用另外一个选择器的样式 使用关键字@extend 选择器名称; 继承样式 |
6.运算符
|
scss可以自动在几种单位之间转换数值 前提是，单位可以转换 rem em %就不能转换 |
①加法
|
字符串拼接的时候，如果使用有双引号的 + 无双引号的，结果有双引号 如果使用无双引号的 + 有双引号的，结果无双引号 |
②减法
|
减号会被自动解析为变量的一部分 所以scss中的减法，要前后加空格 $my-width - $min-width |
③除法
|
scss中 / 的作用，除法，分隔符 在scss，以下情况，会被认为是除法 1.如果运算符两边的数字，是变量或者函数的返回值 2.运算式被小括号包裹，是除法 3.除法运算式，是其他算术运算式的一部分 |
④字符串的插值操作
|
content:"liangliang ate #{200+100} baozis"; #{}做插值 |
⑤颜色的运算
|
分段运算 #rrggbb+#rrggbb=#rr+rr gg+gg bb+bb rgb(a,b,c)+rgb(d,e,f)=rgb(a+d,b+e,c+f); rgba的算法 计算两个rgba的时候，要求alpha必须相等，才能运算 |
三.内置函数
1.scss定义了很多函数，有些函数直接可以在css语句中使用
|
rgba就是scss函数 hsl(hue,saturation,lightness) hue 色调 0~360 0~120 120~240 240~360 saturation 饱和度 0~100% lightness 亮度 0~100% |
2.数学函数
|
round($val) 四舍五入 ceil($val) floor($val) floor(-3.4) floor(3.4) min($v1,$v2......) max($v1,$v2....) random() |
3.字符串函数
|
unquote($str） 去掉$str的引号 quote($str） to_upper_case("abc"); 变大写 to_lower_case("ABC"); 变小写 |
4.自定义函数
|
@function get_width($a,$b){ @return min($a,$b); } 关键字 function return加@，参数加$ |
四.指令
|
@if $type==sun{ color:#f00; }@else if $type==moon{ color:#00f; }@else { color:#ff0; } 条件的小括号，可以加，可以不加 |