2020-02-26（bootStrap）

简介BOOtstrap

boot提供了一套完整的css, 以及匹配的js。需要什么东西，直接到文档内进行挑选使用就可以了，甚至可以支持自定义。移动端优先

Bootstrap里面的一些功能实现

一. 栅格系统

1. 容器：.container
   boot是响应式框架，所以容器在不同分辨率会具有不同的宽度，
   如下表：

2. 依然逃不掉的先分行，再分列
   行：.row
   列：这就多了去了
   1, .col 如果是子元素平分父级的宽度，则直接使用.col
   2, .col-sm-num ：这个class中，num代表一个数字（从1-12）。boot的栅格系统把一行分成12份，num代表份数。 而中间的type对应上文图中的 small。意为，在浏览器宽度大于等于 576，小于 768的时候，在栅格系统中所占有的份数
   对应的class还有
   Col-num
   Col-sm-num
   Col-md-num
   Col-lg-num
   Col-xl-num

3. 单元格的对齐方式
   .align-items-start
   .align-items-center
   .align-items-end
   .justify-content-start
   .justify-content-center
   .justify-content-end
   .justify-content-around
   .justify-content-between

4. 其他
   .w-100 用于折行

Order : 用于排序
.order-num, 数字代表排序优先级，数字越大越靠后
另外，.order-first 一定可以把一个元素放在第一位
.order-last 一定可以把一个元素放在最后一位

Offset: 用于设置偏移量
.offset-num
.offset-type-num

二，组件

1. 预定义风格：通用颜色
   
   primary, secondary, success, danger, warning, info, light, dark, link
2. 按钮
   Example： 举个栗子

<button type="button" class="btn btn-dark">Dark</button>

按钮可以使用 button, input, a标签来实现

Outline buttons： 空心按钮

<button type="button" class="btn btn-outline-light">Light</button>

Size： 可以修改的尺寸
.btn-lg / .btn-sm 默认md

State： 是按钮，那就一定有状态
.active可以让按钮的颜色更鲜艳
而 .disable则会让按钮的颜色变淡 (注意加disable属性哦~)

Button group： 按钮组

<div class="btn-group">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
</div>

Size： .btn-group-lg, .btn-group-sm
Vertical model：.btn-group-vertiacl
3. 下拉菜单
.dropdown
.dropdown-toggle button
.dropdown-menu ul
交互实现要点： data-toggle=“dropdown”
实现各方向下拉,给父级加：dropup，dropright，dropleft
带交互，先引入js

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
        Dropdown button
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

4. 选项卡
   头部：

ul.nav>li.nav-item*2>a.nav-link

水平对齐方式：可以使用flex来修改水平对齐方式，默认情况下导航是左对齐的，但是你可以很轻松的修改成居中或者左对齐

justify-content-center，justify-content-end

.flex-column 甚至可以垂直排列
不同风格：
ul.nav.nav-tabs>li.nav-item*2>a.nav-link.active

ul.nav.nav-pills>li.nav-item*2>a.nav-link.active

还可以在头部加入下拉菜单：

ul.nav.nav-tabs>li.nav-item.dropdown>a.nav-link+ul.dropdown-menu

内容区：

.tab-content>.tab-pane*3

功能实现：

• 每一个内容区需要有一个id
• 每一个选项需要加上 data-toggle=”tab” 用于触发js功能
• 然后选项上a标签的href对应内容区的ID 用于查找目标

5. 导航条
6. 轮播以及巨幕
7. 模态框
8. 表单以及输入组
9. 滚动监听
10. 工具类