bootstrap（3）

栅格
1.栅格的嵌套，在列里面写其他的row

2.弹性布局
使用d-flex/d-inline-flex 创建一个弹性容器
设置主轴的方向 flex-row/flex-row-reverse/flex-column/flex-column-reverse
设置主轴的排列方式

1. justify-content-n
2. n:between/around/center
   响应式flex
   d-xl/lg/md/sm-flex
   flex-x-row
   flex-x-column
3. 表单

form-group ，垂直方向显示 form-inline ，内联表单 水平方向显示 样式： 3. 文本框/密码框基本类 form-control 4. 多选框 form-check 块级 内边距1.25rem form-check-inline 变成一个弹性容器 form-check-input 往左移动1.25rem form-check-label 下外边距清零 form-text 块级 上外边距0.25rem

二、组件
下拉菜单
5. 外层div要写dropdown
6. 里面有两个元素，button按钮 和菜单 div

2.1 button的类 dropdown-toggle-----下三角
2.2 放菜单的div.dropdown-menu------>display：none
2.3 在放菜单的div中放菜div

<a  href="" class="dropdown-item" ></a>

dropdown-item------->块级元素，纵向排列
2.3button中事件 data-doggle的自定义属性，值=“dropdown”
点击之后 可以自动把dropdown-doggle-menu的元素显示出来
2.4菜单项a标签可以添加.active选中菜单项
3.按钮组
在外部包裹div中添加 btn-group，创建按钮组

使用 btn-group-sm/lg 控制按钮组大小
使用 btn-group-vertical 控制按钮纵向排列
4.信息提示框

提示框alert当作基本类
alert-danger/success… 改变提示框颜色
.alert-dismissible>.close 的组合控制关闭按钮在右边
点击关闭按钮能够关闭提示框，data-dismiss=“alert”
5.导航栏
boot提供了三种导航
水平导航、选项卡导航、胶囊导航
8. 水平导航
通过设置ul的nav让内部的li变为弹性布局
所有的弹性布局样式都可以使用
justify-content-end/between/center/around
flex-row/column…
三层结构ul.nav nav-justified >li.nav-item>a.nav-link
.nav-justified 和 nav-item配合使用让每个导航项等宽显示

9. 选项卡导航

使用nav-tabs可以将导航栏转换为选项卡
选项卡内容，使用div.tab-content>div.tab-pane(隐藏)
切换选项卡

<a data-toggle="tab" href="选项卡内容id（记得加#）" class=  ' nav-link active' ></a>

10. 胶囊导航
    .nav-pills 可以将导航设置为胶囊形状
    胶囊动态导航栏只需要修改选项卡中data-toggle=“pill”
    其他和选项卡导航栏一样
    
    5.导航栏
    div>ul>li>a
    div.navbar创建导航栏 ，nav-expand-sm/xl/lg/md 创建响应式导航栏，大屏幕横向展开，小屏幕垂直堆叠
    ul.navbar-nav
    li.nav-item
    a.nav-link
    设置导航栏时，可以通过bg-颜色 来控制导航栏的背景颜色
    6.折叠
    控制显示与隐藏
    在a或者button 元素中添加 data-toggle=“collapse”
    指向目标id

<a href="#id" ></a> <button data-target="#id"></button>

内容div.collapse 同时添加id

1.创建折叠导航栏，需要在外层div中添加 class=“navbar navbar-expand-sm bg-* navbar-dark/light” navbar-dark/navbar-light 控制内部brand的字体颜色和按钮中三条线的颜色
2.外层div内部有不被折叠的元素 a a.navbar-brand
3.隐藏按钮 button.navbar-toggler 根据外层不同的navbar-dark/navbar-light选取的不同字体颜色和边框颜色，同时根据外层的navbar-expand-sm的sm超小屏幕以上隐藏
4.被折叠的导航栏 div.collapse .navbar-collapse + id
5.给button添加折叠事件和折叠目标 data-toggle=“collapse” data-target="#id"

关键字：按钮组、form表单、信息提示框、下拉菜单、导航三个、导航栏、折叠导航栏