今天完成的事情。任务14，15做完。

今天遇到的问题。

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  //padding-right: 15px;
  //padding-left: 15px;
}

今天遇到的问题，之前做官网的时候，由于col自带15px的padding值，导致空间不够分配。自动换行的问题，最后我在源码里面把自带的padding：15px

给注释掉了，导致页面缩放到600px一下之后，内容存在贴边的问题。

问师兄关于这方面的问题，要么去给在container的基础上在加一层父级盒子，把padding值重新加回去。最后把源码里面去掉的15px：padding值，

设置在了container属性里面，给container设置为30px，问题解决。

.container {
  padding-right: 30px;
  padding-left: 30px;
  margin-right: auto;
  margin-left: auto;
}

什么是less的变量。

定义lee中使用变量，用@符号来定义变量。

变量的命名规则建议使用驼峰命名法，第一个单词首字母小写，从第二个开始，首字母大写

@variable: 200px; //定义变量作为样式属性值使用

@classname: .nav_a; //变量值不可用中划线，此变量作为插值用于选择器名称

@{classname}{ //作为插值 必须加 {}

    width: @variable; //作为属性值直接调用

}

任务14的时候就使用了变量，给字体颜色，背景颜色，设置为变量，如果需要维护的时候，我们直接改变变量的颜色就可以从而改变全局样式。

收获，费劲波折总算把css完成了，进入js，之前浪费许多时间去折腾，琢磨没有用的东西确实耗费了挺长的时间。14，15的轮播图，与导航栏的难度确实有点大。对bootstrap4的理解也更深了一些，希望·进入js之后好好加油，把之前的进度给赶回来。

明天计划，看less与js方面的知识。

任务14,15任务总结

通过写轮播图，知道了轮播图的运行原理，input框，与check的绑定，label标签。和导航栏，在这两个地方花费了不少时间，还有什么是组件库，如何使用组件库。对bootstrap4的源码的使用。但是在做任务的时候，发现对源码的不理解，又得时候会出现复制源码多了，少了导致发生冲突。

任务14深度思考。

为什么要做组件库？

什么是组件？

组件

他的核心意义在于对代码的复用。功能相单一或者独立，在整个系统代码层次上位于最低层，被其他代码所依赖。

组件化的意义？

传统的开发方式效率低下，而且动辄几百行的代码，根本不方便维护使用。随着业务增长或者变更，系统的复杂性会呈现指数级的增长，经常会出现一个小小的改动，一个小小的功能增加就可能引起整体的逻辑修改

造成牵一发动全身。

所以我们希望一个大且复杂的页面可以被分解为几个小部分，这些小部门，互不干扰，可以单独开发，

单独维护，而且他么之间可以随意组合。就拿电脑主机来说吧，cpu，显卡，主板，硬盘，电源，内存等等

他们不是一个公司生产的，但是他们彼此之间根据标准分别生产，最后组装，在一起了。当某个部件出现问题，换掉就行了。维修之后在装上去就行了。

组件开发的原则？

可以实现独立维护，可维护性变强。

减少一个页面的代码数量，可以更好的找到问题的所在，动辄几百行的代码，太难。

页面只不过是组件的容器，负责组合组件即可形成功能完整的页面。

组件化的方法？

我们把一个组件保存为一个文件夹，把相应的html，css，js文件都放在一起，在需要的时候引用相应的文档就可以。