你的位置:首页 > 软件开发 > 网页设计 > bootstrap基础学习小记(三)网格简介

bootstrap基础学习小记(三)网格简介

发布时间:2015-03-19 17:02:14
网格系统:网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。<!DOCTYPE HTML ...

网格系统:网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

bootstrap基础学习小记(三)网格简介bootstrap基础学习小记(三)网格简介
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>实现原理</title><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"><link rel="stylesheet" href="style.css"></head><body><div class="container"> <div class="row">  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div> </div> <div class="row">  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div> </div>  <div class="row">  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div> </div></div></body></html>

原标题:bootstrap基础学习小记(三)网格简介

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录