如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩。事实上,这个布局系统提供了一套响应式的布局解决方案。
既然这么好用,那他是如何用CSS来实现的呢?
我特意去Bootstrap官方下载了源代码进行分析了一番,看完之后果然有了收获,不过我只看了栅格布局的那块代码,其实也很简单,不必担心不懂,你只需要要基础的CSS知识即可。
前提条件(Bootstrap 自带)
首先使用这个布局之前要定义一下代码:
这行代码如果不懂,可以搜索一下,总之大致意思就是,被定义的元素的内边距和边框不再会增加它的宽度,不加入的话排版会有问题。
不过,Bootstrap自己当然已经加入了,如果你是使用整个Bootstrap框架,那你可以无视这里,只是让你明白需要一个这个。
我是将Bootstrap框架里面的布局代码分割出来,形成一个小体积的仅有css文件的小框架(下载地址见最后),以后写单页小网站方便用。
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
}
容器 container
container 的设计大致如下:
代码实现:
这里实现了依据不同的宽度进行改变:
.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;
}@media (min-width: 768px){/*当宽度大于768px时触发*/.container {
width:750px;
}}
@media (min-width: 992px){/*当宽度大于992px时触发*/.container {
width:970px;
}}
@media (min-width: 1200px){/*当宽度大于1200px时触发*/.container {
width:1170px;
}}
.container-fluid{ /*这个是宽度默认*/padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;
}
仔细研究一下CSS代码,相信你会突然明白。
为什么要Padding 15px呢?
我觉得应该是为了如果你在容器 container 里面写其他东西,不至于挨边。影响美观。
行 row
最简单的莫过于的 row 了。
是不是感觉不错:
代码实现:
没错就两行
.row{margin-right:-15px;margin-left:-15px;
}
列 Column
这个也很简单,你看总共有那么宽,Bootstrap分别将他们分割成12份,意思是你可以随意使用者12份,加起来要正好12。
不过要注意的一点是,Bootstrap实现了更好的响应式布局,列的种类是有很多种的。
.col-xs-* 针对超小屏幕 手机(<768px)
.col-sm-*小屏幕 平板 (≥768px)
.col-md-*中等屏幕 桌面显示器 (≥992px)(栅格参数)
.col-lg-* 针对特大的(≥1200px)
这些是什么意思?如何使用的呢?假设你写如下代码: