Bootstrap 3 的 Grid 系统

虽然用 bootstrap 弄过几个主题,用习惯了,还是很好用的,大量减轻自己 CSS 的工作量,但对于 bootstrap 3 的 grid 系统还是有点晕,找了篇文章学习了下,理了理。

.col-xs-$ Extra Small:特别小 Phones Less than 768px
.col-sm-$ Small Devices:小设备 Tablets 768px and Up
.col-md-$ Medium Devices:中等大小的设备 Desktops 992px and Up
.col-lg-$ Large Devices:大号设备 Large Desktops 1200px and Up

这样子看起来就清楚多了,还有就是涉及自适应后显示或隐藏的 grid 内容:

  • .visible-xs
  • .visible-sm
  • .visible-md
  • .visible-lg
  • .hidden-xs
  • .hidden-sm
  • .hidden-md
  • .hidden-lg

这样子就更清楚了。

原文见:https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system

作者: LMS

天行贱,君子自强自息。

标签

《Bootstrap 3 的 Grid 系统》有4个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注