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`)}}