如何完成什么引导网格系统使用它的“.col-xs-”或“小网格”与foundation4? [英] How to accomplish what bootstrap grid system does with it's ".col-xs-" or "smallgrid" with foundation4?
问题描述
我正在寻找一个网站在自定义CSS和没有框架只是增加我的命令在CSS。我想让我的整个网站保留其布局和外观,无论什么设备。基础做它与它的小网格和bootstrap与.col-xs-。
I am looking to build a website in custom CSS and without frameworks just to increase my command over CSS. I want my entire site to retain its layout and look no matter what the device. Foundation does it with it's "smallgrid" and bootstrap with ".col-xs-". How do I do that without a framework?
推荐答案
Foundation和Bootstrap都使用相同的方式为您提供灵活的网格:每个可能的列宽,百分比,并使用媒体查询在移动/平板电脑/桌面网格之间切换(小
, medium
和大
用于Foundation, xs
, sm
, md
和 lg
用于Bootstrap)。
Foundation and Bootstrap both use the same way to provide you flexible grids : they fix every possible column width in percents, and use media queries to switch between mobile/tablet/desktop grids (small
, medium
and large
for Foundation, xs
, sm
, md
and lg
for Bootstrap).
这些链接可以了解有关详情:
Have a look on those links to learn more about this :
- MDN - Media queries
- CSS Wizardry Grid
- Profound Grid
- Bootstrap 3 Grid System
- Foundation 5 Grid
- ...
// Mobile first : Bootstrap display the content with -xs columns
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11 {
float: left;
}
.col-xs-12 { width: 100%; }
.col-xs-11 { width: 91.66666666666666%; }
.col-xs-10 { width: 83.33333333333334%; }
.col-xs-9 { width: 75%; }
.col-xs-8 { width: 66.66666666666666%; }
.col-xs-7 { width: 58.333333333333336%; }
.col-xs-6 { width: 50%; }
.col-xs-5 { width: 41.66666666666667%; }
.col-xs-4 { width: 33.33333333333333%; }
.col-xs-3 { width: 25%; }
.col-xs-2 { width: 16.666666666666664%; }
.col-xs-1 { width: 8.333333333333332%; }
// if we reach 768px, let's use -sm columns
@media (min-width: 768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11 {
float: left;
}
.col-sm-12 { width: 100%; }
.col-sm-11 { width: 91.66666666666666%; }
...
}
// ... etc with -md and -lg columns
基础5:
Foundation 5 :
// Mobile first : Foundation display the content with -small columns
@media only screen {
.column,
.columns {
position: relative;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
float: left; }
.small-1 { width: 8.33333%; }
.small-2 {width: 16.66667%; }
.small-3 { width: 25%; }
.small-4 { width: 33.33333%; }
.small-5 { width: 41.66667%; }
.small-6 { width: 50%; }
.small-7 { width: 58.33333%; }
.small-8 { width: 66.66667%; }
.small-9 { width: 75%; }
.small-10 { width: 83.33333%; }
.small-11 { width: 91.66667%; }
.small-12 { width: 100%; }
}
// If we reach 40.063em, let's use -medium columns
@media only screen and (min-width: 40.063em) {
.column,
.columns {
position: relative;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
float: left; }
.medium-1 { width: 8.33333%; }
.medium-2 {width: 16.66667%; }
...
}
// ...etc with -large columns
这篇关于如何完成什么引导网格系统使用它的“.col-xs-”或“小网格”与foundation4?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!