Bootstrap 3 的 Grid 系统

LMS
折腾
2.1K+ 4

虽然用 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

THE END

评论 4

  1. ansonyi
    🏆🏆🏅

    我记得几年前，我对你说Bootstrap的时候，你是嗤之以鼻。

    1. 肯定不是嗤之以鼻，当时是嫌麻烦，嘿嘿。

  2. 早日出几个类似于大发那种简单一点模板，适合写作。

发表评论

Submit