UI组件库的使用以及组建

UI组件库傻瓜式使用方法

1.导入资源文件，css文件和js文件

2.对比官网，知道每个类名是什么作用

3.需要什么找什么

当UI组件库的样式不能完全满足需求的时候：

1.没有样式：自己写

2.有样式，只能满足一部分，自己修改

2.1找到内部到底是哪一个类名的样式

2.2自己写一个选择用权重，覆盖样式

2.3不到万不得已不要改源码

3.bootstrap里的样式不是全部清空，是按需清空

4.bootstrap栅格系统

​ 默认将每一个容器等分为12份

​ col-xx 区分显示器

​ col-xx-3 设置子元素在12份中占据几份

总结：col-xx-3 表示在某个显示器下，子元素占12份中的几份

用法：

​ 1. 确定在什么端实现什么布局：PC端

​ 2. 确定一行排几个n,最好取值为12的约数。类似于2，3，4，6，12等

​ 3. 设置子元素的宽度n/12，注意拉开子元素的距离不能用margin，只能用padding推开内容

​ 4. 当n为特殊值时，不能被12整除，尽量不要用栅格系统

组件样式库的搭建

在组建自己的组件库之前首先要做的准备工作有下面几点：

1.确定写什么组件

2.在写每个组件是定义一个基础类 然后通过其他的类名控制不同的样式

3.最后通过JS实现同台交互效果：高级：自己封装路由

比如做一个提交按钮button

1.定义基础类为btn

2.状态为：btn-info btn-primary btn-success btn-danger btn-warning

3.大小：btn-sm btn-md btn-lg

以下是html代码和css样式设置

<button class="btn btn-primary btn-sm">
        button
       </button>
       <button class="btn btn-success btn-sm">
        button
       </button>
       <button class="btn btn-danger btn-sm">
        button
       </button>
       <button class="btn btn-info btn-sm">
        button
       </button>
       <button class="btn btn-warning btn-sm">
        button
       </button>

.btn{
    width: 80px;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    color: #ffffff;
    background: #fff;
    border: 1px solid transparent;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    margin: 0;
    padding: 7px 14px;
    font-size: 14px;
    border-radius: 4px;
}
.btn-sm{
    font-size: 12px;
    padding: 6px 10px;
}
.btn-lg{
    font-size: 16px;
    padding: 14px 16px;
}
.btn:active{
    opacity: 0.6;
}
.btn-primary{
    color: #fff;
    background-color: #51baeb;
}
.btn-success{
    color: #fff;
    background-color: rgb(42, 218, 101);
}
.btn-danger{
    color: #fff;
    background-color: rgb(243, 65, 52);
}
.btn-info{
    color: #fff;
    background-color: rgba(92, 90, 89, 0.836);
}
.btn-warning{
    color: #fff;
    background-color:  rgb(243, 147, 22);
}

效果图如下：