Bootstrap没有的Foundation 5功能-白红宇

Bootstrap没有的Foundation 5功能

阅读量：2511 次

发布时间：2019-05-11

本文共 4189 字，大约阅读时间需要 13 分钟。

There are many differences and similarities between and . 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 a

和之间存在许多异同。最大的相似之处在于它们都是可用于构建出色应用程序的出色的前端框架。它们具有许多出色的功能，它们是移动优先，响应Swift，可自定义和可扩展的。

Scotch.io是Bootstrap的大用户，并且喜欢它提供的强大功能。最近，我们研究了Foundation 5的功能以及如何使用它。这是一个 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 by Chris Sevilleja () on .

见笔克里斯Sevilleja（上）。

开关 ( Switches )

所有CSS to spice up your forms. These don't require JavaScript at all. 均可为您的表单增添趣味。这些根本不需要JavaScript。

See the Pen by Chris Sevilleja () on .

见笔克里斯Sevilleja（上）。

可见性类别 ( Visibility Classes )

Bootstrap具有用于根据屏幕大小显示和隐藏元素的类。 Foundation还具有用于显示和隐藏元素的类，但是它们提供了一些很酷的类，用于

based on portrait vs landscape and

基于纵向，横向和

touch vs nontouch devices. The classes are:

触摸与非触摸设备进行显示和隐藏。这些类是：

You are in landscape orientation. You are in portrait orientation.

You are on a touch-enabled device. You are not on a touch-enabled device.

定价表 ( Pricing Tables )

拥有预先建立的价格表是一件好事，因为要建立起价格表并使其看起来更好，这可能是一件复杂的事情。

See the Pen by Chris Sevilleja () on .

见笔由克里斯Sevilleja（上）。

JavaScript功能 ( JavaScript Features )

Foundation附带JavaScript功能可以满足开发人员可能拥有的许多需求。与其四处寻找不同的jQuery插件以获取特定功能，不如将它们内置到您使用的框架中，这是很好的。

互换处 ( 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; 。这不会阻止内容的加载，因此这可能意味着您已经加载了桌面组件并降低了移动用户的速度。查看 and see how you can dynamically load a Google map for desktop users and a photo for mobile users. ，了解如何为桌面用户动态加载Google地图和为移动用户动态加载照片。

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. 帮助创建了我们在注册我们喜欢的网站或应用程序时看到的那些站点之旅（我相信有些人将其称为向导）。

离画布 ( Off Canvas )

框架中还包含了一个经常看到的功能。

See the Pen by Chris Sevilleja () on .

请参阅上的Chris （）的Pen 。

灯箱 ( Lightbox )

offers a great looking lightbox with gallery and caption features. 提供了具有库和字幕功能的美观灯箱。

范围滑块 ( Range Sliders )

are nice sliders that let you build out draggable sliders. 是不错的滑块，可让您构建可拖动的滑块。

均衡器 ( 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主页上使用类似的内容。当所有浏览器都支持 support comes to all browsers, but until then, JavaScript plugins like this will be needed. 时会很好，但是在那之前，将需要像这样JavaScript插件。