复习整理知识点重点 Bootstrap

Bootstrap
移动设备优先
为了确保适当的绘制和触屏缩放，需要在 之中添加viewport元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,maximum-scale=1,user-scalable=no">
Width 正整数或device-width 定义视口的宽度，单位为像素
Height 正整数或device-height 定义视口的高度，单位为像素，一般不用
Initial-scale [0.0-10.0] 定义初始缩放值
Minimum-scale [0.0-10.0] 定义缩小最小比例
Maximum-scale [0.0-10.0] 定义放大最大比例
User-scalable 定义是否允许手动缩放，默认值yes(0或1)

栅格
.container 用于固定宽度并支持响应式布局的容器。
.container-fluid 用于 100% 宽度，占据全部视口（viewport）的容器。

媒体查询
超小屏(默认)
@media (min-width: @screen-sm-min) { ... } 小屏
@media (min-width: @screen-md-min) { ... } 中屏
@media (min-width: @screen-lg-min) { ... } 大屏

使用max-width或min-width限制在更小(大)范围的屏幕大小之内
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

.col-xs-(超小屏) .col-sm-(小屏) .col-md-(中屏) .col-lg-(大屏)

列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移

Less mixin 和变量
@grid-columns:            12;
@grid-gutter-width:       30px;
@grid-float-breakpoint:   768px;

表格
为任意 <table> 标签添加 .table 类可以为其赋予基本的样式
条纹状表格 .table-striped 
带边框的表格 .table-bordered
鼠标悬停 .table-hover
紧缩表格 .table-condensed

显示隐藏
Bootstrap3 show-xs 显示 hidden-xs 隐藏
Bootstrap4 d-sm-block 显示 d-sm-none 隐藏
.col-xs-(超小屏) .col-sm-(小屏) .col-md-(中屏) n.col-lg-(大屏)

表单 按钮
form-group 一组表单
form-control 独占一行
bth 用按钮时要加