首页 > 经验 > 关键词  > Bootstrap3.0教程最新资讯  > 正文

Bootstrap3和Foundation5的网格系统比较

2015-04-21 09:46 · 稿源: w3cplus

Bootstrap和Foundation是我最喜欢的两个前端框架,尤其是在快速开发网站的原型上。它们都提供了随时可用的组件,加快了我的工作流程。除了一些细小差别,在我看来它们大部分的基本特征都是类似。

在这篇文章里,我将介绍它们网格的基本构造。首先,我将会向你展示它们是如何构建的,描述它们的主要部件,以及它们对不同屏幕的大小表现出的差异。然后,我将通过一个真实例子的实践来帮助你增添知识。

让我们一起开始吧!

媒体查询的比较

在分析Bootstrap和Foundation的栅格结构之前,让我们先来看看它们为响应布局所提供的断点。这是每个框架所提供的可以用来设置可用栅格的数量。

Bootstrap指定了4个基于px的媒体查询断点。展示如下:

Foundation包含了5个基于em的媒体查询。它们如下表显示:

为了让你有办法去理解媒体查询是如何工作的,我建议你去看看Bootstrap的demo以及相关的Foundation的demo。但如果你还是有一些困惑的话,接下来的部分将会阐述一切。

注意:Foundation超大屏和比较优秀大屏的网格在默认情况下是禁用的。如果你想要使用它们,你必须“取消”并设置$include-xl-html-grid-classes和$include-xl-html-block-grid-classes这两个变量的值为true。你可以在_settings.scss这部分里找到这些变量。

网格结构

Bootstrap和Foundation都提供了由行和列组成的移动首先的12列网格。列被嵌套在行里。每行的列数之和为12列。行同样也可以被嵌套在列里。

这两个框架包含了许多你可以用来设置列的大小的预定义类。如上面提到的,Bootstrap包含4个媒体查询断点而Foundation则包含了5个。对每个网格来说,它们都有着不同的类前缀可以用来设置列的大小(请看前面的两个表格)。

Bootstrap网格的行同样也需要封装的元素。这就应该要有一个container或者container-fluid类。一个元素中的container类有一个固定值,它的数值取决于视窗(见上面首先个表),而元素中的container-fluid类则是扩展到浏览器窗口的整个宽度。

列!=12?

一个网格系统中的列数不等于12是可能的。在这种情况下,Bootstrap将会把最后一列浮动到左侧,而Foundation则将会把它浮动到右侧。如果你想要重写Foundation的默认行为,就在最后一列添加.end类。

功能类

这两个框架都提供了额外的类让你能够非常灵活的定义它们的网格。

可见的类可以让你在特定大小的屏幕上选择显示或者隐藏内容。偏移类允许你让不完整的列居中或者调整它们之间的间距。当然还有其他的类可以根据不同设备来指定列的顺序。

网格块

除了默认网格,Foundation还支持另一个栅格特征,即网格块。它允许你使用最小的标记来创建同等大小的列。为了使用它,把行定义成ul元素,行里面的列定义成li元素。然后通过对ul元素应用相关的类(详见上面的第二张表)来指定列的大小。

这个时候你可能会想,规则网格和网格块之间的区别是什么?让我们简要的看一看它们的两点不同之处:

与默认的网格不同,(网格块)每行都应用了比较大宽度,所以总是铺满整个浏览器窗口。

网格块只能用在大小相等的项目中。

使用网格

既然我们对这两个框架的网格已经有了很好的理解,让我们来看看我们怎样才能够使用它们来建立一个Bootstrap页面和相应的Foundation页面。

下面的截屏显示了我们将要建立的首先个布局:

先从Bootstrap开始,我们定义了一个带有container类的元素。就像前面讨论的,这个类会根据屏幕的大小给这个元素设置了一个固定的宽度(详见Bootstrap的那个表)。然后,我们给它添加一个带有row这个类的元素。

现在,我们已经准备好设置我们的列了。对于大屏来说,我们想要4个大小一样的列。所以我们定义了4个每个都带有col-lg-3类的div元素。然而,对于中小型设备我们更倾向于每行里面有两个列。出于这个原因,我们使用col-sm-6这个类。最后,对于超小屏来说我们希望列可以堆叠起来。这是移动首先框架的默认行为,因此,这就没必要去定义col-xs-12这个类。

它的HTML是这样子的:

  • <div class="container">
        <div class="row">
            <div class="col-sm-6 col-lg-3">
                <!-- content -->
            </div>
            <div class="col-sm-6 col-lg-3">
                <!-- content -->
            </div>
            <div class="col-sm-6 col-lg-3">
                <!-- content -->
            </div>
            <div class="col-sm-6 col-lg-3">
                <!-- content -->
            </div>
        </div>
    </div>

举报

  • 相关推荐
  • 加速Robotaxi部署 滴滴自动驾驶进入爆发前夜

    滴滴自动驾驶在第十七届国际交通技术设备展上亮相新一代L4级量产车型,配备33个传感器,展现技术突破。公司宣布将持续加大研发投入,与广汽埃安成立合资公司加速无人驾驶商业化落地。目前滴滴Robotaxi车队已在北京、广州等城市稳定运营超1800天无重大事故,并计划年内部署千台车辆。凭借多年技术积累和资本支持(累计融资超15.5亿美元),滴滴正迈向规模化商业运营新阶段。近期与广州市政府达成战略合作,进一步拓展智慧交通应用场景,标志着其自动驾驶技术进入爆发前夜。

  • 技嘉科技 STEALTH Revolution 玩转简约装机美学 力邀创作者打造纯白梦幻桌机

    技嘉科技推出STEALTH Revolution活动,主打纯白美学装机概念。活动以X870AORUS STEALTH ICE主板为核心,邀请全球创作者打造个性化桌机。该系列采用背插式设计,简化装机流程,释放机箱空间,便于展示水冷设备和RGB灯效。新品涵盖X870/B850主板、RTX5090显卡及全景机箱等,联合10余家机箱品牌推出20余款兼容产品。活动提供限量主板供参赛者使用,并开放大众投票评选优秀作品,参与者有机会赢取丰厚奖品。技嘉旨在推动"背插主板×纯白机身"的装机新潮流,满足市场对简约风格的需求。

  • ChatGPT们重塑了对话框,钉钉今天要重塑表格

    ​自从1979年,丹·布里克林(Dan Bricklin)和鲍勃·弗兰克斯顿(Bob Frankston)在苹果当时划时代的 Apple II 电脑上做出了第一张可以自动计算和更新的电子表格 VisiCalc 后,表格就成为了计算机用数据方式理解人类世界的基座。不过,在更多的时候,没人这样讨论它。横横竖竖几个格子,表格无处不在,它看起来太普通了。 然而计算机诸多繁荣的根基,都建立在一张张表格之上,无�

  • OPPO K13 Turbo系列真机亮相:自带风扇+RGB

    OPPO K13 Turbo系列真机已经现身在bilibili world《胜利女神:NIKKE》展区。 从图片来看,OPPO K13 Turbo系列系列后摄区域有点类似一加13T,采用了矩形金属方案,主摄下方就是散热风扇,同时外圈还自带RGB等效。 这个设计方案可以明显看出,该机是主打电竞体验。 风扇模组采用电镀镍工艺,放弃普通喷涂,带来更好的防水、防锈效果,并且号称风力提升120%,从而实现更强、更持久�

  • 一键解决无障碍出行,华人创立的Transreport拿到了英国“国王企业奖”

    伦敦无障碍出行服务公司Transreport荣获2025年度英国"国王企业奖"创新类奖项。该公司由华人创业者沈星杰2015年创立,通过移动App和后台系统为残障人士提供一键预约高铁、机场等场所的照护服务。其创新技术已支持超700万次援助请求,拥有全球100万用户。目前正拓展日本、中东市场,与阪急集团合作将于2025年在日本推出服务。该奖项由英国国王亲自颁发,表彰其在推动交通系统现代化和无障碍出行领域的突出贡献。

  • 落后华为2年半!Apple Watch Ultra 3有望今年登场:支持卫星消息

    据彭博社记者透露,Apple Watch Ultra 3有望于今年发布,将带来卫星连接与5G网络支持等 重要” 新功能,打破该系列自2023年以来的硬件升级停滞局面。 目前,华为是首个在智能手表上实现卫星通信功能的厂商。 2023年3月,华为Watch Ultimate非凡大师全球首发搭载双向北斗卫星消息功能,成为业界首款支持该技术的智能手表。 Apple Watch Ultra 3预计将会在今年9月份发布,落后华为整�

  • iQOO 15/15 Ultra首曝:全系标配骁龙8 Elite 2

    博主数码闲聊站爆料,iQOO 15全系标配骁龙8 Elite 2处理器,全系标配5000万像素3C潜望长焦,这是iQOO最强悍的高端旗舰。 据悉,高通骁龙8 Elite 2采用了第二代自研Oryon CPU架构,其GeekBench 6单核成绩有望突破4000分,多核成绩有望突破11000分,其中多核成绩大概率会超过A19 Pro。 除了升级处理器,iQOO 15系列另一大变化是将同时推出两款机型,分别是标准版和Ultra版,而上一代iQOO 13只�

  • 极光GPTBots实力入选《2025政务行业信创生态图谱》,赋能智慧政务新未来

    在北京召开的"2025中国信息技术应用创新峰会"上,极光GPTBots凭借在政务智能问答、办公提效、数据分析等场景的卓越表现,入选《2025政务行业信创生态图谱》。该图谱系统梳理了政务信创生态现状与趋势,为构建自主可控、安全可靠的政务创新生态提供指引。极光GPTBots深度融合国产大模型技术,在政策智能解答、办公自动化、文档处理等政务场景实现深度赋能。此次入选标志着其在推动政务数字化转型方面的贡献获得权威认可,未来将持续投入核心技术研发,深化政务场景应用探索,助力数字政府建设。

  • OPPO K13 Turbo系列配置公布:第四代骁龙8s、天玑8450

    OPPO K13Turbo系列已经官宣,将于7月21日14:30发布。 OPPO商城中提前公布了重磅信息,确认新机共两款,分别是OPPO K13Turbo、OPPO K13Turbo Pro。

  • 自动化测试首选服务商:Testin云测有何核心优势?

    文章探讨了AI技术如何重构自动化测试体系。传统自动化测试面临维护成本高、跨平台兼容性差等痛点,而AI通过智能用例生成、缺陷预测、自适应测试等能力实现质变:1)NLP技术将需求文档自动转化为可执行测试用例;2)机器学习分析历史数据预测高风险模块;3)计算机视觉实现跨平台UI元素识别。Testin云测构建了覆盖设备层到场景层的完整测试生态,通过云原生架构支持2000+终端实时调度,结合AI中台实现测试效率提升1.5倍,助力某金融机构降低年度质量成本超千万元。AI与自动化测试的深度融合,正推动质量保障体系向智能化、集约化演进。