BootStrap（day03）

二、boot 的使用

4. 栅格布局

   ① web 页面中，布局的有三种方式

   table布局	div+css	boot的栅格
   简单, 容易控制	语正确, 渲染效率高	容易控制语义正确，渲染效率高，支持响应式
   语义错误	控制起来很麻烦，尤其在响应式布局中	非常复杂的页面不建议使用

   ② 栅格的概念
   我们把每一行布局分为 12 份
   元素的占地宽度, 靠份数定义

   ③ 栅格属性
   1. 必须放在 .container 或 .container-fluid 中
   2. 每一个 row, 弹性, 主轴 x, 可以换行, 有 -15px 的外边距
   3. 使用 .col-n 来声明子元素在 row 中所占的份数
   所有 col 自带 左右 15px 的内边距

   ④ 响应式的栅格布局
   一行四列，大屏 1:1:1:1， 中屏幕 两个一行 1:1 / 1:1， 小屏幕 每一个单独一行
   col-*-n *: lg/md/sm n: 1-12
   在不同屏幕下, 占一行的 n 份
   ex: col-lg-3 col-sm-6

   注意:
   .row 的 -15px 左右外边距
   和 .col 的 15px 左右内外边距，会导致布局参差不齐，项目中必须进行处理

   ⑤ .col
   使用 .col 类, 不添加数字, 自动处理布局, 每一个 col 平均分配空间, col 的个数可以超过 12 个, 并且不换行

   ⑥ 媒体查询的兼容性问题
   boot中的媒体查询, 小屏幕向大屏幕兼容
   sm兼容 md/lg/xl
   md 兼容 lg/xl
   lg 兼容 xl

   ⑦ 列偏移 offset-*-n
   *: sm/md/lg/xl
   n: 0~11
   col 向右偏移 n 份

   ⑧ 栅格嵌套
   请在 col 中 单独构建一个 div.row（.col 和 .row 不能在一个元素实效）

三、弹性布局

d-*-none/inline/block/inline-block/flex

1. 主轴方向 flex-*-row/row-reverse/column/column-reverse

2. 项目在主轴上的排列方式 justify-content-*-between/around/start/end/center

四、表单

1. 表单元素的排列方向
   .from-group 堆叠表单, 垂直排列
   .from-inline 内联表单, 水平排列

2. 表单控件样式
   .form-control input 元素的基本类
   块级 w100 字体 背景 边框 过渡
   .col-form-label/sm/lg: 设置输入文本与边框的距离
   对于 checkbox 的样式 父级 .form-check（相对定位）
   对于 checkbox 的样式 子级 .form-check-input（绝对定位）
   .form-text margin-top: 0.25rem; display: block;

五、组件

1. 按钮组
   基本结构 div>.btn*n
   外层 div 添加类 .btn-group 横向按钮组 .btn-group-vertical 纵向按钮组
   使用 btn-group-lg/sm 调整按钮大小
   
   

2. 下拉菜单
   ① 样式
   div.dropdown(相对定位) > button.droupdown-toggle(画向下的小三角) ul.dropdown-menu (display: none)
   
   

   ② 事件
   button data-toggle="dropdown"(以dropdown 的方式切换)
   事件目标: ul, 由于 ul 和 button 被 div.dropdown 包裹, 点击 button 自动会更改 ul 的状态, 不需要单独写目标

3. 信息提示框
   ① 样式
   div.alert.alert-info(alert 基本类 alert-danger/info...颜色) .alert-dismissible (配合子元素的) .close > span.close ("取消的叉子" 右浮动)

   ② 事件
   给 span(叉子) 添加自定义属性 data-dismiss=“alert”
   事件的目标不用处理, 默认的是 span 元素的 div.alert