Li Yafei
A senior Ruby on Rails developer
80percent 团队内部交流
1. 断点定义
可通过设置变量修改这些值
2. 网格系统
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
覆盖原则: 移动优先, 小屏优先
3. 媒体查询
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
@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) { ... }
为不同的屏幕设定不同的CSS样式
4. 实用的样式工具
/* XS 屏幕尺寸才显示 */
.visible-xs-block {}
.visible-xs-inline {}
.visible-xs-inline-block {}
/* XS 屏幕下隐藏 */
.hidden-xs {}
注意: bootstrap4 对此有重构, 命名有变化 . 这里仅对 bootstrap3 说明.
80% team
By Li Yafei