ps制作放射性效果背景
bootstrap最多可以分多少列
本网格布局系统属于Scaffolding(框架,布局)部分。在Scaffolding里面有(固定)网格布局(Grid System)和流式网格布局(Fluid Grid System)。本文讨论第一种固定网格布局。
Bootstrap采用的是12列布局格式,即在页面一行之内最多可以布置12列。
bootstrap只能默认12列是因为12是数字“1、2、3、4、6”的最小公倍数,所以12列栅格系统相对较灵活,并且支持将一行分成1列、2列、3列、4列、6列。
Bootstrap中规定页面的总的宽度为940px,这个跟其他的CSS框架不太一样(其他有的是960px(960grid等),有点是950px(blueprint等))。这个940px是在一个名称为container的类中规定的,具体如下
.container,
{
width: 940px;
}
还有就是规定了这个container的页面居中
IT社区
.container {
margin-left: auto;
margin-right: auto;
*zoom: 1;
}
(这里有个技巧,为了让div在各种浏览器下下产生同样的居中效果将margin-left和margin-right的值为auto是最简单的方式。*zoom这个css hack是为了兼容ie6和7,但具体为什么要使用zoom=1还不得而知。)
学新通
同时,还使用了css伪元素选择器,在这个类里面还清空了前后的内容,并且在后面还清除了浮动
编程社区
.container:before,
.container:after {
display: table;
content: "";
}
.container:after {
clear: both;
}
在container里面还不能直接进行多列布局,这个时候还需要使用row作为二级容器,row这个容器的样式挺有意思
https://www.swvq.com
.row {
margin-left: -20px;
*zoom: 1;
}
左边的margin为-20px,注意是负20.即是说row的宽度会突破外部的container20个像素。为什么呢?待会你就知道了。当然row里面也有设置清空前后内容和浮动的样式,跟container类似,此处不多敖述。
row里面才是我们要进行的具体多列布局的类span。具体使用布局时,代码大概这样
https://www.swvq.com
<div class="container">
<div class="row">
<div class="span4">
span4</div>
<div class="span8">
span8</div>
</div>
</div>
为什么不能将span直接放入container中,为什么row要margin-left=-20px?这就要细说一下span,这个也是笔者所讲“精巧网格布局”的原因。
https://www.swvq.com
确实情形下,Bootstrap共有12个span类,分别为span1,span2,….span12.他们的定义非常简单
学新通
.span12 {
width: 940px;
}
.span11 {
width: 860px;
}
。。。
.span4 {
width: 300px;
}
.span3 {
width: 220px;
}
.span2 {
width: 140px;
}
.span1 {
width: 60px;
}
当然还有使用伪类选择器统一将他们设置为浮动的样式
编程社区
IT社区
[class*="span"] {
float: left;
}
浮动是另外的理论,我们按下不表。我们仔细看从span1到span12,发现一个规律,就是span每增加一次,就增加80px。只是span1是从60开始计数的,为什么不让span1从80开始计数,然后每个span都是80的倍数,这样也容易记忆呢?实际上啊,span还真是从80开始计数的。只不过其可视部分是60,另外的20在样式里面设置了margin-left=20;如下
编程社区
[class*="span"] {
margin-left: 20px;
}
这个20还有另外一个意义,就是其可以在页面上表示两个span之间的间隔,即所有的span之间都有20px的间隔,不至于黏在一起,让终端用户分不开。
本篇文章来至:IT社区
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通
- 本文地址: https://www.swvq.com/boutique/detail/tanfbick
- 联系方式: luke.wu@swvq.com
- 来源链接: www.php.cn/ps-tutorial-481625.html
-
28 个提升JavaScript开发效率的 VSCode 插件
PHP中文网 05-24 -
B站在海外打不开怎么办B站打不开解决办法
sixfast6 07-14 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
抖音国际版要用什么加速器能流畅刷Tiktok的加速器
TK小达人 08-02 -
pixiv是什么意思
PHP中文网 06-28 -
PHPSTROM的远程调试
PHP中文网 03-25 -
VMware Workstation 无法启动,提示不支持在此主机上使用虚拟化性能计数器
Luke 07-28 -
navicat premium 15安装 + 注册机获取永久许可证
餘yuqn 07-27 -
windows检测到efi系统分区格式化为NTFS是怎么回事
PHP中文网 06-16 -
U自动兑换TRX的机器人脚本怎么开发一篇文章部署
加密先生 07-11