There are many differences and similarities between Bootstrap and Foundation. The biggest similarity is that they are both great front-end frameworks that can be used to build out awesome applications. They come with lots of great features, are mobile first, responsive, and customizable, and extensible.
Scotch.io is a big user of Bootstrap and love the great features it provides. Recently, we took a look at Foundation 5's features and how to use it. It's aBootstrap和Foundation之间存在许多异同。 最大的相似之处在于它们都是可用于构建出色应用程序的出色的前端框架。 它们具有许多出色的功能，它们是移动优先，响应Swift，可自定义和可扩展的。
Scotch.io是Bootstrap的大用户，并且喜欢它提供的强大功能。 最近，我们研究了Foundation 5的功能以及如何使用它。 这是一个 great framework that has a few cool things to offer that default Bootstrap does not. Here's a look through some of the cool features you can find in Foundation that aren't in Bootstrap. 很棒的框架 ，提供了一些很棒的东西，而默认的Bootstrap却没有。 以下是一些您可以在Foundation中找到的，Bootstrap中没有的出色功能。CSS功能 ( CSS Features )
基于EM ( EM Based )
关于Foundation的所有内容都可以成为“最先进的响应式前端框架”。 本着这种精神，他们使用em来处理从字体大小到媒体查询断点的所有内容。基类 ( Base Classes )
Bootstrap在其类之前为其添加类的类型（即.text-success,
.text-success ，
.img-circle). Foundation comes with a set of universal classes to specify colors and shape. These apply to a variety of things including buttons, alerts, panels, and more. The classes are:
.img-circle ）。 Foundation带有一组通用类，用于指定颜色和形状。 这些适用于各种事物，包括按钮，警报，面板等。 这些类是：
tiny,
tiny ，
small,
small ，
large,
large ，
secondary,
secondary ，
success,
success ，
alert,
alert ，
radius, and
radius和
round. Here's a few examples applied to buttons.
round 。 这是一些应用于按钮的示例。
See the Pen Foundation 5 Button Showcase by Chris Sevilleja (@sevilayha) on CodePen.
见笔基金会5按钮展柜克里斯Sevilleja（ @sevilayha上） CodePen 。
开关 ( Switches )
所有CSS switches to spice up your forms. These don't require JavaScript at all. 开关均可为您的表单增添趣味。 这些根本不需要JavaScript。See the Pen Foundation 5 Switches Showcase by Chris Sevilleja (@sevilayha) on CodePen.
见笔基金会5开关展柜克里斯Sevilleja（ @sevilayha上） CodePen 。
可见性类别 ( Visibility Classes )
Bootstrap具有用于根据屏幕大小显示和隐藏元素的类。 Foundation还具有用于显示和隐藏元素的类，但是它们提供了一些很酷的类，用于 based on portrait vs landscape and 基于纵向，横向和 touch vs nontouch devices. The classes are: 触摸与非触摸设备进行显示和隐藏。 这些类是：<!-- show or hide for portrait vs landscape -->
<p class="panel">
<strong class="show-for-landscape">You are in landscape orientation.</strong>
<strong class="show-for-portrait">You are in portrait orientation.</strong>
</p>
<!-- show or hide based on touch vs nontouch -->
<p class="panel">
<strong class="show-for-touch">You are on a touch-enabled device.</strong>
<strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
</p>定价表 ( Pricing Tables )
拥有预先建立的价格表是一件好事，因为要建立起价格表并使其看起来更好，这可能是一件复杂的事情。See the Pen Foundation 5 Pricing Table Showcase by Chris Sevilleja (@sevilayha) on CodePen.
见笔基金会5的价格表展由克里斯Sevilleja（ @sevilayha上） CodePen 。
JavaScript功能 ( JavaScript Features )
Foundation附带JavaScript功能可以满足开发人员可能拥有的许多需求。 与其四处寻找不同的jQuery插件以获取特定功能，不如将它们内置到您使用的框架中，这是很好的。互换处 ( Interchange )
Interchange is a feature that uses media queries to dynamically load responsive content. What this means is that you can specify what HTML you want to show for mobile, tablet, and desktop sites. I know that we have this ability using the visibility classes, but using those classes just applies 交换是一项使用媒体查询来动态加载响应内容的功能。 这意味着您可以指定要为移动，平板电脑和台式机网站显示HTML。 我知道使用可见性类具有此功能，但是使用这些类仅适用于display:none;. This doesn't stop the content from being loaded so this could mean that you have desktop components loading and slowing down your mobile users. Take a look at the
display:none; 。 这不会阻止内容的加载，因此这可能意味着您已经加载了桌面组件并降低了移动用户的速度。 查看
Interchange docs and see how you can dynamically load a Google map for desktop users and a photo for mobile users.
Interchange文档 ，了解如何为桌面用户动态加载Google地图和为移动用户动态加载照片。
Joyride ( Joyride )
Joyride helps to create those site tours (some people call them wizards I believe) that we see when signing up for our favorite websites or applications. Joyride帮助创建了我们在注册我们喜欢的网站或应用程序时看到的那些站点之旅（我相信有些人将其称为向导）。
离画布 ( Off Canvas )
框架中还包含了一个经常看到的功能。See the Pen Foundation 5 Off-Canvas Showcase by Chris Sevilleja (@sevilayha) on CodePen.
请参阅CodePen上的Chris Sevilleja （ @sevilayha ） 撰写的Pen Foundation 5 Off-Canvas展示 。
灯箱 ( Lightbox )
Clearing Lightbox offers a great looking lightbox with gallery and caption features. 清除灯箱提供了具有库和字幕功能的美观灯箱。范围滑块 ( Range Sliders )
Range Sliders are nice sliders that let you build out draggable sliders. 范围滑块是不错的滑块，可让您构建可拖动的滑块。均衡器 ( Equalizer )
Equalizer feature ensures that elements of your site will have the same height. We use something similar for the Scotch homepage. It'll be nice when 均衡器功能可确保您网站的元素具有相同的高度。 我们在Scotch主页上使用类似的内容。 当所有浏览器都支持 flexbox support comes to all browsers, but until then, JavaScript plugins like this will be needed. flexbox时会很好，但是在那之前，将需要像这样JavaScript插件。结论 ( Conclusion )
请记住，这并不是说Foundation比Bootstrap更好。 Bootstrap还具有在Foundation中找不到的功能。 这只是在Foundation中可以找到的一些很酷的功能，我们建议您尝试多个前端框架（例如您将编程语言或服务器端框架），以找出最适合您的口味或当前项目的功能。需要更多基金会吗？ ( Want More Foundation? )
这里有一些其他文章可以帮助您开始使用Foundation：翻译自: https://scotch.io/tutorials/foundation-5-features-that-bootstrap-doesnt-have
907
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
