BootStrap

一.组件 1.面包屑导航 使用.breadcrumb类创建面包屑导航。

… 2.进度条 使用.progress类创建进度条 添加宽度(用百分比设置，表示进度条所在的位置) 使用.progress-bar-striped类设置条纹进度条 使用.progress-bar-animated类设置进度条的动画

注意： 重点：媒体查询技术，栅格布局，scss定制 二.SCSS定制 ex:css文件 $jd_red:#f10215;

.register{ color:$jd_red; } .search{ color:$jd_red; } h1{ color:$jd_red; } .img{ color:$jd_red; }

1.CSS有以下的几个缺点 语法不够强大，没有变量和合理的复用机制，使用逻辑上相关的属性值必须重复编写，导致难以维护。

动态样式语言为css赋予了动态语言的特性，极大的提高了样式语言的可维护性。 常用的动态样式语言： (1)scss/sass 都属于CSS的预处理器（用一种专门的编程语言，进行web页面样式的设计，再通过编译器转化为正常的css文件，以供项目使用） (2)less (3)stylus

2.scss scss是一款强化css的辅助工具，他在css语法的基础上增加了变量，嵌套，混合，导入，函数等高级功能，这些拓展相对于css更强大与优雅。 scss的作用:有助于更好的管理样式文件，以及更高效的开发项目。 3.使用scss 在服务器端使用 (1)安装NodeJS解释器 (2)安装scss编译程序 在命令行界面输入：npm install -g node-sass 检查scss程序能否正常使用：node-sass -v 如果能查看到版本号，说明sass程序可用 (3)编译scss文件 1.创建一个scss文件，编写动态样式代码 2.通过以下命令行来完成编译 在webstrom中用Atl+F12打开命令行界面。 刷新编译后的css文件：ctrl+alt+y

单文件的转换命令： node-sass scss/input.scss css/output.css 多文件的转换命令： node-sass scss文件夹名称 -o css文件夹名称 单文件监听命令： node-sass -w scss/input.scss css/output.css 多文件监听命令： node-sass -w scss文件夹名称 -o css文件夹名称

4.scss的基础语法 1.变量 使用$符号标识变量。 变量命名规范遵循css中选择器的命令规范，不能以数字开头，不能包含特殊字符（可以包含_,-）,尽量见名知意。 ex1: $jd_red:#f10215; //颜色变量 $normal_width:100px; //数值变量 $before_content:“子曰：”; //字符串变量 $border_style:solid; //样式变量 $my_border:1px $border_style $jd_red; //声明变量时，变量的值也可以是其它变量。 注意： (1)声明变量时变量值可以引用其它变量。 (2)变量定义在{}规则块外，整个样式表中都可以引用，定义在{}规则内，它只能在规则块中使用。 (3)声明重复变量，只有最后一处有效，且他会覆盖前面的值，尽量不要重复。 (4)!default规则，如果变量已经声明赋值了，那就用他声明的值，否则就用当前这个默认值。

ex2: div{ border:$my_border; $width:200px; //局部变量，只能在当前选择器中使用 width:$width; //在此可以调用 } nav{ width:$width; //不能调用$width } 2.嵌套规则 (1)在选择器中嵌套选择器 ex1: #main div.top h1{color:red;} #main div.top p{margin:10px;} #main div.middle{background:gray;} 将上面的css代码改成scss格式： #main{ div.top{ h1{color:red;} p{margin:10px;} } div.middle{background:gray;} } ex2: div a{color:red;} div a:hover{color:blue;} 改写scss方式： 在嵌套规则中，有时候需要使用嵌套外层的父选择器，可用&代表嵌套规则外层的父选择器。 div{ a{color:red; &:hover{color:blue;} } } (2)群组选择器嵌套 ex:css的写法 nav a,header a,section a{color:blue;} 用scss方式写： nav,header,section{a{color:blue;}} (3)属性嵌套 在scss中除了选择器，属性也可以嵌套 ex: div{ border-style:solid; border-width:1px; border-color:#000; } 用scss的方式写： div{ border:{style:solid; width:1px; color:#000} } 练习：创建一个200*200的div，红色背景，鼠标悬停时过渡到黄色背景，并且变为圆形，用scss编写（可用属性嵌套规则）。 3.导入文件 在scss中，局部文件名以_开头。 在scss编译时就不会编译这些以_开头的文件，而只是把这些文件用作导入，引入局部文件时可以不写文件的全名，即省略下划线，并且局部文件的后缀也可以不写。同一个局部文件可以在不同的主文件中引用。 引入局部文件需用 @import ex: 定义了一个局部文件_myColors.scss 引入该文件： @import "myColors" 4.混合器 1.普通混合器 使用 @minix标识符定义。 语法: @minix 混合器名称{样式声明} 通过 @include 来使用混合器 语法：选择器{ @include 混合器名称} ex: @mixin my_box_shadow{ box-shadow: 0 0 9px 2px gray; -moz-box-shadow: 0 0 9px 2px gray; -ms-box-shadow: 0 0 9px 2px gray; -webkit-box-shadow: 0 0 9px 2px gray; } .info{ background:green; border:2px solid $jd_red; @include my_box_shadow; } 2.带参混合器 @mixin 混合器名称(参数1，参数2，...){ 属性1：参数1； 属性2：参数2； ... } 使用带参混合器 选择器{ @include 混合器名称(实参1，实参2，...)} 练习： 定义一个带参的混合器，抽离出字体大小，样色，样式，粗细，在div和p元素中使用混合器，传入不同的参数，查看页面的效果。 5.继承 通过 @extend实现继承 继承是说一个选择器可以继承另一个选择器定义的所有样式。 ex: .round{ border:1px solid red; border-radius:8px; } .round-shadow{ @extend .round; box-shadow:0 0 5px 1px; }

课后作业： 1.练习scss中的转换命令。 2.在选择器.my_border中定义1px的实线边框为透明色，元素的宽度为400px，距离左边有30px的外边距，在选择器.my_bottom_border中继承.my_border样式，并且底边框为红色，鼠标悬停时底边框为蓝色。 3.定义一个带参混合器，将元素的宽度，高度，内边距和背景颜色作为参数传入到混合器中，然后在div和h3元素中使用混合器并传入不同实参，查看页面效果。