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 用按钮时要加