最近在开发一个博客主题,需要实现栅格化。
首先想到的就是BootStrap
,二话不说引了进来,等等……
我的初衷是倾尽全力设计一个简洁的博客主题,代码也必须简洁,所以就仿照BootStrap
,用Stylus
实现了栅格化功能。
几行代码,取代了长篇大论的BootStrap
。
食用方法同BootStrap
。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
| .row display -ms-flexbox display flex -ms-flex-wrap wrap flex-wrap wrap for $i in 1 .. 12 .col-{$i}, .col-md-{$i}, .col-lg-{$i} position relative width 100% padding-right 15px padding-left 15px @media (max-width: 576px) padding-right 0 padding-left 0 col-attr() -ms-flex 0 0 arguments flex 0 0 arguments max-width arguments for $i in 1 .. 12 .col-{$i} col-attr round(($i * 100 / 12) %, 6) @media (min-width: 576px) for $i in 1 .. 12 .col-sm-{$i} col-attr round(($i * 100 / 12) %, 6) @media (min-width: 768px) for $i in 1 .. 12 .col-md-{$i} col-attr round(($i * 100 / 12) %, 6) @media (min-width: 992px) for $i in 1 .. 12 .col-lg-{$i} col-attr round(($i * 100 / 12) %, 6)
|