4.栅格布局
①web页面中，布局方式有三种
|
table布局 |
div+css |
boot的栅格 |
|
简单，容易控制 |
语义正确，渲染效率高 |
简单，容易控制，语义正确，渲染效率高，支持响应式 |
|
语义错误，渲染效率低 |
控制起来很麻烦，尤其在响应式布局中 |
非常复杂的页面，不建议使用 |
②栅格的概念
|
我们把每一行布局，分成12份 元素的占地宽度，靠份数定义 |
③栅格属性
|
1.必须放在.container或者.container-fluid中 2.每一个row，弹性，主轴x，可以换行，有-15px的左右外边距 3.使用.col-n,来声明子元素在row中占几份 所有col自带左右15px的内边距 |
④响应式的栅格布局
|
一行4列，大屏1：1：1：1 中屏幕 两个一行 小屏幕 每一个单独一一行 col-*-n *:xl/lg/md/sm n:1-12 在不同屏幕下，占一行的n份 ex：col-lg-3 col-sm-6 |
注意
|
.row的-15px左右外边距 和.col的15px左右内边距，会导致布局对不齐 项目中要进行处理 |
⑤.col
|
使用.col类，不添加数字，自动处理布局 没有给col平均分配空间，col可以超过12个，并且不换行 |
⑥boot媒体查询的兼容性问题
|
boot中媒体查询，小屏幕向大屏幕兼容 sm兼容md/lg/xl md兼容lg/xl lg兼容xl |
⑦列偏移
|
offset-*-n *:sm/md/lg/xl n:0~11 col向右偏移n份 |
⑧栅格嵌套
|
请在col中在单独写出div.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.表单元素的排列方向
|
.form-group 堆叠表单，垂直排列 .form-inline 内联表单，水平排列(弹性) |
2.表单控件样式
|
.form-control input元素的基本类 块级 w100 字体 背景 边框 过渡 .col-form-label/-sm/-lg 设置输入文本与边框的距离 对于checkbox的样式 父级.form-check（相对定位） 子级.form-check-input（绝对定位） .form-text 0.25上外边距，块级 |
五.组件
1.按钮组
|
基本结构 div>.btn*n 外层div添加类 btn-group 横向按钮组 btn-group-vertical 纵向按钮组 使用btn-group-lg/sm 调整按钮组大小 |
2.下拉菜单
|
1.样式 div.dropdown 相对定位 >button.dropdown-toggle 画向下的小三角 ul.dropdown-menu display:none; 2.事件 button data-toggle="dropdown" 以dropdown的方式切换 事件目标：ul,由于ul和button被div.dropdown包裹。 点击button，自动会更改ul的状态，不需要单独写目标 |
3.信息提示框
|
1.样式 div.alert.alert-info alert基本类 alert-danger/info...颜色 .alert-dismissble 配合子元素的.close类使用 >span.close "取消的小叉叉"右浮动 2.事件 给span(小叉叉)添加自定义属性 data-dismiss="alert" 事件的目标不用写，默认是span的元素div.alert |