站长之家首页 > 经验 > 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>

网友热搜:

  • 大家在看
  • 相关推荐
  • 游戏体验更逼真 iQOO 3内置4D游戏震感3.0

    iQOO 3自开售后全网热销中:发售当日销售额就突破亿元,6G+128G、8G+128G、12G+128G 、12G+256G四个版本可供选择、以及分别对应3598元、3798元、3998元和4398元的售价让iQOO 3可以适合更多用户群体选择。游戏体验方面,iQOO 3内置全新4D游戏震感3.0,通过音频算法识别和细颗粒度AI图像识别,模拟开枪时的枪支后座力,以及开车时方向盘的震感,实现不同枪支不同震感,FPS、MOBA、赛车三大类主流游戏全覆盖,使用户游戏体验更逼真。i

  • NEX 3S 5G用上Multi-Turbo 3.0优化技术:游戏卡死率降低80%

    ​继NEX3 的Multi-Turbo 2. 0 之后,在今天的NEX 3S 5G手机发布会上,vivo又宣布了Multi-Turbo 3. 0 技术,游戏卡死率降低了80%。

  • 特斯拉将为已装HW2.5硬件的国产Model 3免费更换HW3.0

    针对近日特斯拉Model3 车辆控制器硬件代码与环保信息随车清单标注不一致一事,特斯拉官方对因此带来困扰的车主表示歉意并做出说明称, 2 月 10 日开始复工后,因供应链状况,一部分标准续航升级版Model3 安装的硬件为HW2.5。随着产能以及供应链恢复,将为控制器硬件为HW2. 5 的中国制造标准续航升级版Model3 的车主提供免费更换HW3. 0 的服务。

  • Linux学习路线图,入门教程分享。

    有人说,人生中最美丽的两个字就是学习。是的,学习是最值得做的一件事,不断的学习才能使我们在这个飞速发展的时代不至于被抛弃,古人云,活到老,学到老,还是很有道理的。算算学习Linux也有一年零三个月了,这一年多感触很深,虽说现在也没有到登峰造极的程度,但是门算是已经进去了。记得刚开始学的时候挺难得,自己什么也不懂,就开始上网查各种资料,还好网上信息很发达,想要查什么也差不多能查到。因为我的基础不好,所以?

  • realme X50 Pro配置公布:骁龙865处理器,LPDDR5内存及三星UFS3.0

    3月12日,今天realme官方发布了X50 Pro手机,这款手机的部分配置信息如下:骁龙865处理器;搭配LPDDR5内存及三星UFS 3.0+Turbo Write+HPB;90Hz Super AMOLED畅速屏+VC液冷散热系统;Wi-Fi 6,传输速率高达1.5Gbps,支持双通道网络加速和双Wi-Fi加速,6.44英寸,整机屏占比达到92%,HDR 10+认证,65W闪充,4200mAh电池容量。

  • 鲸小喜3.0:鲸鲤店的商品是拿来送的而不是拿来卖的

    住宿有酒店贵宾卡、吃饭有扫码支付打折,买房买车有客户俱乐部、刷卡消费有银行积分……不得不承认,在新经济的潮流之下,会员生活已经无处不在了。尤其对于深陷困境的实体店来说,联通线上线下会员服务,发展会员经济优势已势在必行。但是回顾会员经济发展历程,又很容易发现身边的会员经济似乎并不被会员喜欢。重视会员,而又不知该如何营销,成为大多数实体店主的头疼事。传统的会员营销仅仅是手段,并没有深挖客户需求,无法增

  • 私域运营3.0时代,私域+直播成企业利润增长核武器

    首先,企业微信它解决的一个核心问题,叫用户的留存和服务问题。它解决了人数上限问题、品牌资产管理问题、信息数据安全问题。第二就是以腾讯直播(看点直播)为代表的私域直播产品,它解决的是拉新效率和成交转化率问题。

  • 良品铺子力推零食3.0 健康化研发提升食品安全和质量安全

    随着消费升级,食品企业纷纷开启健康营养产品研发。作为零食行业领导品牌,刚刚上市挂牌的良品铺子早已开始布局, 2019 年初,率先在行业内提出“高端零食”定位,指出了其未来十年的发展方向,健康化是重要部分。标准世界级,供应链全球化数据显示,良品铺子的 1000 多种零食中,包含 190 种原料,来自 30 个国家,带动全球44+个农业产业集群。例如在 30 多种常见的虾类中,良品铺子选择了口感最佳,鲜味最足、生长海域最纯净的马

  • 学习通崩了?3月2日上午学习通app再出现登录异常

    3月2日上午,不少网友通过社交媒体表示,学习通app在今天上午出现了登录异常情况,用户出现了无法登录或者无法签到的问题。而此前这一app在前两周均出现了类似的问题,学习通官方曾表示正在采取一切努力,提升服务性能,同时呼吁老师们采用让学生线上自主学习+讨论答疑模式,呼吁更多同学错峰学习,稳定性将显著提升。

  • 智能电视怎样下载安装沃学习TV版?当贝市场分享教程

    近日,为响应停课不停学,中国联通正式推出了沃学习TV版,这款软件汇聚了教育行业头部品牌的内容,为广大用户群体打造了一个多元化、一站式教育服务软件。该平台聚合了学而思轻课、新东方、沪江网校、卓越教育、豆神大语文、樊登读书等行业头部教育品牌精品内容。通过课堂提分、素质教育、家庭亲子、个人成长、职场教育、听书读书等详细分类,全方位满足不同人群的学习需求。同时由剑桥、麻省理工、清华大学、北大等顶尖学府名师,

  • 学习机什么牌子好?讯飞智能学习机化身弯道超车学习神器

    人们常说养成坏习惯容易,养成好习惯难。眼下的“超长假期”,正是培养孩子形成良好习惯的黄金时期,好习惯养成了,面对学习孩子自然也有自己的方法和理解了。但是想要为孩子找一个好帮手,可不是一件容易的事,我经常听到身边的家长抱怨学习机什么牌子好呢,经过我一个假期的观察,我发现还是讯飞智能学习机靠谱!孩子放假“宅”家的日子里,适当放松可以,但如果任由孩子无节制地玩耍会严重损害孩子的精神状态,消耗意志力,养成?

  • 2020问道手游3月9日每周探案攻略 本周探案任务教程

    问道手游在3月9日,也就是新的一周再次开启了新一轮的探案任务,本周的探案任务很多玩家还不了解怎么做,下面就来为大家分享一下。

  • 高频学习是关键,阿卡索高质低价课提升英语学习效率

    随着全球化进程加快,英语在工作及日常生活中的作用愈加凸显。尤其对亲身经历了互联网普及浪潮的80、 90 后新生代家长来说,孩子从小开始英语学习,能说流利口语已成普遍共识。而在线学习模式凭借便捷高效、教育资源丰富等优势,成为家长的首要选择。有调查数据显示, 2018 年在线青少儿英语学习市场份额高达26.59%,预计 2022 年在线少儿英语市场将反超线下。在线教育平台为孩子能够长期接触英语创造了极大的便利性,成为众多年轻

  • 这款黑科技范儿的双屏OK学习机,上手学习超轻松

    如今的产品是越来越智能了,也极大地便利了人们的生活。在学习这件事情上,孩子们、家长们都表现出了很大的压力。如何减轻孩子的学习负担,让孩子的学习智能起来,一定程度上还得借助高科技产品的力量。最近新东方推出的一款OK学习机(S4 Plus),赢得了不少用户的青睐。今天我们就来一探究竟。双屏体验:看视频、书写两不误,更智能、便捷OK学习机给人最直观的一个感受就是“双屏”、可折叠,可以任意角度开合。双屏这个特点很吸睛?

  • AI学习机器人阿尔法蛋大蛋2.0上新多项学习技能

    “盼望着,盼望着,东风来了,春天的脚步近了。”春天来了,阿尔法蛋大蛋2. 0 春日上新也如约而至。为了让还在家中的孩子们更好地“停课不停学”,培养良好学习习惯,此次大蛋2. 0 的更新带来了更多的实用学习技巧。记得打开你家的大蛋2.0,更新后一一体验下哦!大蛋2. 0 此次主要更新一览:.“学习工具”板块中,成语解释、近反义词、查单词和中英互译上线全新界面,可查看历史记录,前三个功能中新增“大家都爱问”,中英互译增加

  • 《FF14》3月20日金蝶暖暖高分攻略 本周金蝶暖暖搭配教程

    最终幻想14在3月20日这天更新了最新一期的金蝶暖暖,本期的主题是“优雅的睡袍”,很多玩家还不清楚怎么搭配,下面就来为大家详细的介绍一下。

  • 学习少儿编程有哪些误区

    很多家长由于对少儿编程的不了解而产生一些误会。其实少儿编程可以说是针对小孩子的一门必要课程,而这个课程刚好又能够对孩子的生活起到帮助作用。在美国,少儿编程早已成为孩子们必不可少的课程之一,其他国家也同样呼吁青少儿学习编程。再看看国内的家长们对学习少儿编程都有哪些误区?1、学习编程要先学会电脑和英语?很多家长错误地将少儿编程和计算机代码编程混为一谈,认为必须要先学会使用电脑、键盘和英语,才能开始学习编?

  • 守护孩子的学习 阿卡索优质在线英语课程助力学习强国

    当前,全国疫情抗击攻坚战仍在继续,为了取得疫情抗击的最后胜利,保障学生和老师的安全,全国高中小学校开学日期尚未明确,“停课不停学”的倡议还在继续。近日,阿卡索携手“学习强国”学习平台,将为全国孩子提供丰富的在线英语学习课程,让孩子足不出门,在家也能享受到优质的在线外教英语课程。 届时,用户可以通过“学习强国”首页推荐的教育频道进入,搜索“阿卡索”便可以免费观看阿卡索的在线英语教育课程。目前,在“?

  • 美团会员红包3月延期方案:35日起对会籍进行延期

    3月4日,美团外卖发布了3月份会籍红包的延期方案,对在3月份若用户的会籍周期将于 3 月 1 日至 3 月 31 日期间到期,美团回自动把到期未使用的会员红包(含加量包)有效期延长。具体的延长方案如下。

  • 决战平安京3月9日线索任务攻略 樱花林中金鱼先生线索任务教程

    3月9日,决战平安京开启了新一轮的线索任务,今天的线索任务是“樱花林中,金鱼先生正守护着女子会的招牌。”下面就来为大家介绍一下攻略。

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