BootStrap---day02、03微金所项目
前两天没有更新，主要是因为做项目做得没有心情来写博客了（真的很菜），今天的任务都做完了，就来写一写这几天使用BootStrap写项目的总结和心得。
一、实现功能
1、模态框
2、响应式导航栏
3、吸顶
4、轮播图
5、提示工具
6、网格系统
7、部分显示隐藏
8、tab切换
9、其他（基本是css样式和js事件的使用）
二、书写步骤
1、骨架
在搭建静态网页的时候，当时要遵循“先大后小，由外向内的顺序”，要先把页面的框架想好，用一些块元素先搭建好自己项目的骨架，要先有东西来支撑我们页面，这对我们接下来的页面渲染（添加各种样式文本等）有了一个很好的基础，之后只需要向搭建好的骨架中添加需要的文本和样式即可；
2、样式
当然写样式的时候，也要从大到小，从外向里来书写，尽量减少相同样式的书写（less有很大帮助）；当然BS提供了一些写好的样式，可以直接加入类名。
3、BootStrap的使用
bootstrap的使用就像我前几天在博客中写的一样，就是对BS(bootstrap)一些类的应用，如果对BS提供的各种类名能够熟练应用那这次的项目几乎是小菜一碟；但是本人几乎是第一次具体的使用BS来完成项目，对相关类名的使用并不熟练也不了解，这就导致了在这次的项目中总是会发生这个BS插件不知道怎么修改的问题出现。所以强烈建议在使用BS完成项目之前要仔细看看菜鸟教程或者bootstrap中文文档来大致认识一下各种类名包含的各种样式和功能（尤其是功能！！！）
4、耐心
因为我对html和css有一定的基础（依然很菜），所以做的时候可能会比刚刚接触的小伙伴快一点，但是我刚刚接触这些内容写项目的时候也是无从下手，不知道应该怎么办，但是随着书写页面的次数增加，大体的书写方式就会慢慢成型。在初次接触项目的时候，我建议不要急于去寻求帮助，可以自己去查查网上资料去学习一下，更加重要的是：前往不要急躁，要把握好自己的情绪，感觉情绪不好的时候就放一放，我这次在写项目的时候，每次写到晚上就会感觉现在写的这个功能好难写，往往会花很多时间去尝试着写一写，但结果就是，越写越乱。这个时候就会显现出休息一下的重要性。当我第二天打开电脑，编写功能的时候就会感觉，害，也不过如此。经过这次的项目经历，我认识到三点：要有耐心，不要急躁，适时放松。希望也同样使用其他一起学习的小伙伴。
5、换种方式
在完成微金所的项目之后，写了一个星*克一部分官网的页面（主要是为了练习响应式页面的书写，为之后移动端项目做练习），在初次接触该页面的时候会感觉好简单，就是一个响应式导航栏，一个轮播图，三张图片的布局，但是在真正写响应式布局时，对BS使用不熟练的弊端就显示出来了，一直不知道该怎样修改成我想要的效果。之后，我放弃了，既然我清楚，那我就换一种方法实现功能，用JQ两行代码搞定。当然，中途放弃的做法不提倡，但是我想说的是，使用BS完成项目时，也不是一定都要使用BS中的东西（但是插件是真的好用），直到的就用，不知道的有我们之前学习的方法也能实现，不必死磕BS，能实现要求的就是好代码。
$('.menu_title_btn').click(function () {
$('.menu_little_extra').slideToggle()
})三、less的使用
1、LESS语法
一款比较流行的预处理CSS，支持变量、混合、函数、嵌套、循环等特点
2、使用less的好处
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
3、安装
要先安装npm（node安装自带npm）
npm install -g less
-g 表示全局
在服务器上安装Less（要有node）的最简单方法是通过npm，node.js包管理器，如下所示：
npm install -g less
4、命令行用法
安装后，可以从命令行调用编译器，如下所示：
lessc styles.less
这将输出编译的CSS stdout。要将CSS结果保存到选择的文件
lessc styles.less styles.css
4.1 注释
// 模板注释，这里的注释转换成CSS后将会删除
/* CSS 注释语法 转换为CSS后任然保留 */
4.2 定义变量
将需要重复使用或经常修改的值定义为变量，需要使用的地方引用
.less 文件
@变量名: 变量值;
@bgColor: #f5f5f5;
body{
width: @变量名;
background-color: @bgColor;
}.css 文件
body{
width: 变量值;
background-color: #f5f5f5;
}4.3 嵌套
如果在CSS中经常使用子代选择器，那LESS的嵌套语法使用起来非常快乐
.less 文件
.container {
width: @containerWidth;
> .row {
height: 100%;
a{
color: #f40;
&:hover{ // &表示自身
color: #f50;
}
}
}
div {
width: 100px;
.hello {
background-color: #00f;
}
}
}.css文件
.container {
width: 1024px;
}
.container > .row {
height: 100%;
}
.container > .row a {
color: #f40;
}
.container > .row a:hover {
color: #f50;
}
.container div {
width: 100px;
}
.container div .hello {
background-color: #00f;
}4.4 Mixin
4.5 Import
我们可以在开发阶段将样式放到多个文件中，最后通过@import 的方式合并
Import 导入 @import url(url地址)
.less 文件
// main.less
@btnColor: red;
@import url('_buttom.less');
body{
width: 1024px;
}
// _buttom.less
.btn{
color: @btnColor;
}
.btn{
color: red;
}
body{
width: 1024px;
}4.6 Easy less 插件
在vscode中下载 Easy less 插件，可以自动编译，形成和 .less 文件同名称的 .css 文件
四、resize
resize() 在轮播图更换图片时会起到作用，下面是个例子
function changeSize(n) {
if ($(window).width()<=n) {
$('.item>img').attr('src',`./img/swiper_big_${$('.item>img').index()+1}.jpg`)
}else{
console.log(2);
$('.item>img').attr('src',`./img/swiper_${$('.item>img').index()+1}.jpg`)
}
}五、其他一些
1、自定义bootstrap
2、一些标签
（1）<pre>代码块</pre>
（2）<sub>右下角</sub>
（3）<sup>左上角</sup>
3、BS轮播图一些属性
不是class类，是自定义属性值，用于BS插件获取
4、BS多媒体对象的使用
5、ico图标的制作
网页有在线工具
6、项目规范
目录架构
编码规范
7、id选择器
id选择器唯一性，所以在实现最后一个tab切换时，需要用js或jq来写事件
当有ID选择器重名并且赋予样式时，css样式会都改变，都能渲染
但是在js中是只能获取一个（第一个）
8、定位和浮动
同时使用是否相互有影响（没有）
9、额外元素
在添加额外元素时，尽量不写在骨架中改变骨架结构，尽量使用伪元素 before after
10、promise 一些小点
promise回顾
解决回调地狱的问题：回调函数层层嵌套，难以维护
resolve，reject 都是函数
三种状态：pending fulfilled rejected
pro1支持链式调用：因为每一次promise方法就可以返回一个promise对象
一个例题
所有情况下都是定时器是最后执行的
41368275
promise.all() 方法 全部成功才返回
promise.race() 方法 谁快返回谁 签署全部都是数组，数组元素是promise对象
异步事件的执行顺序问题！！！！！！！！！
11、http请求状态码 🐎
100-500多每一百至少认识一个
（标题附有菜鸟教程链接）
12、一个完整的url地址
一个完整的url地址包括：协议+主机+端口号+路径+（参数）
协议：http https
主机 = 域名 + IP
端口号：默认80
13、媒体查询
and 后面必须要有空格 ！！！