首页 > 经验 > 关键词 > 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>

网友热搜:

  • 相关推荐
  • 大家在看
  • 更轻盈,更安全,宏碁TravelMate X5高效办公

    在市面上众多类型的笔记本中,轻薄本其轻薄的特征受到职场人士的青睐,对于现代企业办公方式与工作场景多样化的情形下,易于携带的轻薄本则成为都市白领们的必备武器。突破新极限,宏碁TravelMate X5 轻薄本拥有超越想象的轻薄,整机仅重0.98kg,薄至14.9mm,轻松收纳,更拥有强劲的性能与安全的工作环境为高效办公护航。 轻薄体验,搭载酷睿处理器性能非凡 TravelMate X5 不仅仅只是轻薄,整机重量控制在0.98kg的同时,更搭载了?

  • 联发科独立AI处理器APU3.0,手机AI应用的原动力

    近年来,手机在语音助手、AI拍照、视频优化、VR/AR游戏等方面的AI应用快速发展,手机想要实现这些AI应用,需要芯片提供足够强大的AI算力和低功耗效能,因此手机芯片厂商纷纷在SoC中加入了独立的人工智能处理器,用于专门进行AI运算。例如联发科的天玑系列5G芯片,无论是主打高端市场的天玑 1000 系列,还是主打中高端市场的天玑 800 系列,都搭载了联发科自研的独立AI处理器 APU 3.0。早在 2018 年,联发科就开始将独立AI处理器内?

  • StrategyAnalytics:超宽带芯片正在迈向成功

    Strategy Analytics最新发布的研究报告《UWB的回归:智能手机、汽车、工业等芯片预测》指出,2019年UWB(超宽带)系统和无线电芯片市场实现了飞跃;于此同时,新标准、芯片和应用意味着UWB的复兴。相关资料显示,UWB 技术是一种传输速率高,发射功率较低,穿透能力较强并且是基于极窄脉冲的无线技术。 StrategyAnalytics指出,苹果iPhone11机型采用了全新的U1超宽带无线电芯片以及用于远程无钥匙进入的新汽车标准推动?

  • Strategy Analytics:2G和3G用户占全球移动用户总数的46%

    6月19日消息,Strategy Analytics基于其免费报告《低成本4G手机:市场动态和机遇》,并结合最新的产业发展情况,分析了当前2G/3G的退网趋势和4G用户迁移机会。Strategy Analytics最新的无线市场预测,今年初,2G和3G用户占全球移动用户总数的46%,但贡献的收入却只占全球移动总收入的27%。到2023年,这一收入占比将下降到10%。非洲可以认为是一个特例,在这个地区,各国的ARPU值低于2美元,因此通过补贴促进用户迁移可

    2G 3G 4G
  • 三星Galaxy Note 20 Ultra爆料:一亿像素主摄敲定

    6月26日消息,知名爆料人士Roland Quandt推特表示,已经有确凿证据表明三星Galaxy Note 20 Ultra的主摄为108MP。除了一亿像素主摄之外,Galaxy Note 20 Ultra还有可能会使用潜望式长焦镜头及超

  • 三星Galaxy S20 Ultra从15楼摔下:屏幕基本完好

    6月13日消息,有网友表示,自己的Galaxy S20 Ultra从15楼摔到3楼,背板摔坏了,但是屏幕基本完好,仅有一个坏点。据悉,Galaxy S20 Ultra是三星2月份推出的年度旗舰,首发起售价9999元,它采用

  • Dafex 达菲创新小宇宙 AIT 3.0 引领金融科技

    随着大时代的改变与发展迁移,人工智能、大数据、云计算等新一代信息技术的发展已经成为了改变传统一尘不变的模式。DAFEX 达菲是一家全球性的专业金融技术服务提供商,用心致力于创新科技为一直保守着传统方式的金融业带来新景象。一个汇集顶尖人工智能技术及金融交易的专业平台 – 小菲达人(AIT 3.0)正是DAFEX 达菲的核心所在。小菲达人(AIT 3.0)不仅汇聚了业内专家和各大技术支持,更以区块链技术为研发领航者创建了许多人工

  • 学习通崩了?6月17日学习通app疑似无法打开

    6月17日,在今天有不少网友表示学习通App出现无法开打,页面刷新不出来等多种问题,疑似该app崩了。而在今年3月份学习通也曾发生过app故障,当时官方表示因为上千万用户同时使用,造成瞬间流量过载,导致部分功能不流畅,学习通通过“起飞”模式,使用户分批次登陆,最大限度保障用户的使用。

  • 人人App疑遭全网下架 人人App为什么被下架

    近日苹果AppStore应用商店上已经无法搜索到人人APP,疑似已经被下架,而在多个安卓应用渠道同样也无法搜索和下载,提示为“该应用内部优化中,暂不提供下载”。那么人人APP为什么被下架,官方对此如何回应呢。

  • 超大杯!三星Galaxy Note 20 Ultra保护壳曝光:相机模块大的惊人

    6月21日,据外媒报道,网上已经流传出了关于三星Galaxy Note 20和Note 20 Plus/Ultra的手机保护套,从照片可以看出来,相机似乎得到了升级,因为相机模块十分大。从图片可以这几款机型的差别,

  • 有味APP

    有味APP,前身为腾讯新闻极速版,产品定位是“美好生活分享平台”。产品分为首页、圈子、关注和小窝(即个人主页)四大部分,用户可在产品内发布图文内容或视频内容。

  • AppClips是什么功能 AppClips怎么使用

    苹果iOS14系统中加入了一个全新的AppClips功能,这个功能是可以让用户不下载全部应用的情况下就可以使用该应用的功能,那么AppClips是怎么使用,这里我们来了解下AppClips功能的介绍。

  • 三星官网实力偷跑:超大杯Note20 Ultra高清渲染图曝光

    8月5日(周三)可能是三星Galaxy Unpacked活动举办的日子,不少人猜测,主角将是Galaxy Note 20系列。日前,三星乌克兰官网意外在Note 8的产品页面泄露了疑似Note20 Ultra的高清渲染图。此次

  • 业界首款!三星Galaxy Note 20 Ultra用上LTPO屏:120Hz+2K

    6月5日消息,XDA主编Max Weinbach爆料,Galaxy Note 20 Ultra采用了6.9英寸WQHD+ 120Hz LTPO显示屏,分辨率为3040×1440。值得注意的是,这是业界第一款采用LTPO显示屏的旗舰手机。L

  • 新兴黑马资本Block Vision Capital助力区块链生态建设

    Block Vision Capital区块愿景基金是一家于 2020 年初成立的新兴资本,专注于区块链资本市场的数字资产投资管理基金,是中国新兴的加密数字货币对冲基金和风险投资基金之一,致力于投资并帮助区块链行业中极具潜力与发展前景的企业,并间接完善区块链行业的基础设施与生态环境。高投资回报率惹圈内关注作为一家新兴的资本机构,Block Vision Capital区块愿景基金投资领域涉及数字资产服务平台、区块链投资孵化机构、区块链技术项目

  • 即刻app恢复上架

    ​今日,下架近一年的社交app即刻宣布正式回归,已可下载。据悉,即刻本次上线的是即刻7. 0 版本,新增了额心情日记、足迹地图、头像弹一弹等功能。去年 7 月,即刻APP发文称,将进行技术升级,升级期间即刻App端和Web端暂时无法使用,升级完成后即刻会在第一时间通知大家。

  • 罗永浩推荐秒熊英语App怎么样?秒熊App介绍

    秒熊英语app是一款通过有趣的短视频来学外语的应用,由「搜狗输入法之父」马占凯老师倾力打造的英语学习产品,帮助广大英语学习爱好者,广大考生提升英语能力。秒熊英语app是一款看电影学英语神器,还有热门美剧、动画、纪录片、脱口秀等 100000 条小视频。 15 秒小视频学英语,有趣无压力!以下是秒熊英语App特点的详细介绍。

  • 币安区块101对话 Vtrading CEO 宋东来:普通人的财富密码-量化交易和返佣

    2020 年 6 月 16 日,币安滢哥对话Vtrading CEO 宋东来。宋东来创立Vtrading的初心是希望能够避免让更多韭菜被骗,Vtrading现在所有的参数都是开放的,官方提供的工具也永久免费。宋东来认为评价一个量化工具的好坏,很重要的两点是安全性和稳定性,这是一个产品能够长久的基础要素。除此之外还要做好风控,想要做出一个被大众认同的产品就一定要站在用户的维度思考问题。关于币安返佣,宋东来认为币安的返佣生态是多方共赢的。币?

  • 因认为“弹唱”功能侵权 唱鸭App向唱吧App索赔57万元

    近日,北京知识产权法院受理了原告北京破壁者科技有限公司(简称破壁者公司)诉被告北京小唱科技有限公司(简称小唱公司)、被告北京酷智科技有限公司(简称酷智公司)侵害计算机软件著作权纠纷一案。

  • 即刻App回归现已恢复运营 即刻App安卓、iOS版下载地址

    即刻App现已恢复正常运营。即刻是一款基于兴趣的信息推送提醒工具,支持 iOS和Android 平台。用户可以通过即刻关注自己感兴趣的人物、资讯和事件,即刻会跟踪相应的动态,并通过推送通知让用户及时获取自己关心的信息。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议

热文