Open rccoder opened 8 years ago
Bootstrap 的好用除了不错的 UI, 其中栅栏布局也是特别值得赞赏的。 列式的布局加上响应式的设计在大多情况下都能起到很好的效果。
那如何去实现类似的这种布局呢?
回忆 Bootstrap 栅栏布局的写法,应该是有一层的 container 包裹着,然后里面又会出现 一行 的东西,这一行按照屏幕大小被分为了 12 列。
container
一行
<div class="grid-container"> <div class="row"> <div class="col-md-4 col-sm-6"> <p>hashcoding</p> </div> <div class="col-md-4 col-sm-6"> <p>hashcoding</p> </div> <div class="col-md-4 col-sm-12"> <p>hashcoding</p> </div> </div> <div class="row"> <div class="col-md-3 col-sm-3"> <p>hashcoding</p> </div> <div class="col-md-6 col-sm-6"> <p>hashcoding</p> </div> <div class="col-md-3 col-sm-3"> <p>hashcoding</p> </div> </div> <div class="row"> <div class="col-md-1 col-sm-2"> <p>hashcoding</p> </div> <div class="col-md-1 col-sm-2"> <p>hashcoding</p> </div> <div class="col-md-2 col-sm-8"> <p>hashcoding</p> </div> <div class="col-md-2 col-sm-3"> <p>hashcoding</p> </div> <div class="col-md-6 col-sm-3"> <p>hashcoding</p> </div> </div> </div>
如此说来,我们也应该这样去做。里面的12列应该是采用百分比加上浮动来实现的,外面需要一个盒子去清除浮动。
.grid-container { width: 100%; max-width: 1200px; } .grid-container * { box-sizing: border-box; } .row:before, .row:after { content: ""; display: block; visibility: hidden; clear: both; *zoom: 1; }
对于每个栅栏的内容,都是有着相似的属性,比如 float
float
[class*="col-"] { float: left; min-height: 1px; width: 16.66%; padding: 10px; }
然后还需要响应的实现,采用媒体查询去解决问题
@media all and (min-width: 768px) { .col-md-1 { width: 8.33%; } .col-md-2 { width: 16.66%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.33%; } .col-md-5 { width: 41.66%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.33% } .col-md-8 { width: 66.66%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.33%; } .col-md-11 { width: 91.66% } .col-md-12 { width: 100%; } } @media all and (max-width: 768px) { .col-sm-1 { width: 8.33%; } .col-sm-2 { width: 16.66%; } .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.33%; } .col-sm-5 { width: 41.66%; } .col-sm-6 { width: 50%; } .col-sm-7 { width: 58.33% } .col-sm-8 { width: 66.66%; } .col-sm-9 { width: 75%; } .col-sm-10 { width: 83.33%; } .col-sm-11 { width: 91.66% } .col-sm-12 { width: 100%; } }
点击查看
Creating-your-own-css-grid-system
写文不易,赠我一杯咖啡增强一下感情可好?
Bootstrap 的好用除了不错的 UI, 其中栅栏布局也是特别值得赞赏的。 列式的布局加上响应式的设计在大多情况下都能起到很好的效果。
那如何去实现类似的这种布局呢?
回忆 Bootstrap 栅栏布局的写法,应该是有一层的
container
包裹着,然后里面又会出现一行
的东西,这一行按照屏幕大小被分为了 12 列。如此说来,我们也应该这样去做。里面的12列应该是采用百分比加上浮动来实现的,外面需要一个盒子去清除浮动。
对于每个栅栏的内容,都是有着相似的属性,比如
float
然后还需要响应的实现,采用媒体查询去解决问题
在线 demo
点击查看
参考文章
Creating-your-own-css-grid-system
捐赠
写文不易,赠我一杯咖啡增强一下感情可好?