zurb是什么网站_了解ZURB Foundation 5的网格系统

屈晨

2023-12-01

zurb是什么网站

ZURB's Foundation 5 has a ton of great features. The one that you will probably use the most in your own websites and applications is the grid. If you are coming from a Bootstrap background, you may be familiar with that grid system already and love its ease of use and functionality.

Today we'll be looking at Foundation 5's grid system and all the great features it has. Foundation has

ZURB的Foundation 5具有许多出色的功能。网格可能是您在自己的网站和应用程序中使用最多的一种网格。如果您来自Bootstrap背景，那么您可能已经熟悉该网格系统，并且喜欢它的易用性和功能。

今天，我们将研究Foundation 5的网格系统及其所有强大的功能。 Foundation的 class names that are a little different than Bootstrap, but work in the same way. It also has some neat 类名与Bootstrap略有不同，但工作方式相同。它还具有一些简洁的 advanced features and great 高级功能和出色的 visiblity classes to show and hide elements based on the situation. Let's jump right in and start using the Foundation grid system. 可见性类，可以根据情况显示和隐藏元素。让我们直接进入并开始使用Foundation网格系统。

The Basics

Foundation uses a mobile-first grid system. This means that if you define a grid at small devices, it will be used for medium and large devices. If you define a medium grid, it will be used for large devices, but small devices will not use the defined grid. Small devices will just have elements stack on top of each other.

Quick Example

Here's a quick example of a 3 column layout.

<div class="row">
    <div class="small-4 columns">one-third</div>
    <div class="small-4 columns">one-third</div>
    <div class="small-4 columns">one-third</div>
</div>

See the Pen Foundation 5 Basic Grid Showcase by Chris Sevilleja (@sevilayha) on CodePen.

This will generate 3 columns. Notice how there is a max-width set for the row. Unlike Bootstrap, we won't have to encompass our rows inside of a .container class.

Grid Sizes and CSS Classes

Each row is defined using the .row class. Easy enough. The columns are created using the css classes: .small-#, .medium-#, and .large-#. The #s have to add up to be 12 since Foundation uses a 12 grid system. Also, a class that has to be attached to columns is .column or .columns. They both do the same thing. You can define any combination of layouts using the .row and .small/medium/large-# classes. The docs show a great deal of examples, so take a look over there for inspiration. If you need more help like having prebuilt pages and rows for you, take a look at Foundation's templates. These are a great starting point.

Media Queries

Foundation comes with built-in media queries to help our sites be as responsive as possible. What's interesting about the media queries here as compared to Bootstrap is that they are defined using ems and not pixels. These media queries can be found on the media query docs. Take a look at the media queries and the comments to understand how Foundation breaks down our site.

Nested

Nested grids help create some great layouts. To nest grids, just define a .row inside of a .column and build out your grid like you normally would. Here's some code and an example:

<div class="row text-center">
    <div class="small-4 columns">one-third</div>

    <div class="small-4 columns">
        <div class="row">
            <div class="small-6 columns">half of one-third</div>
            <div class="small-6 columns">half of one-third</div>
        </div>
    </div>

    <div class="small-4 columns">one-third</div>
</div>

See the Pen Foundation 5 Nested Grid Showcase by Chris Sevilleja (@sevilayha) on CodePen.

基础

Foundation使用移动优先的网格系统。这意味着，如果在 小型设备上定义网格，则它将用于 中型和大型设备。如果定义 中型网格 ，它将用于大型设备，而小型设备将不使用定义的网格。小型设备只会将元素堆叠在一起。

快速范例

这是3列布局的快速示例。

请参阅CodePen上的Chris Sevilleja （ @sevilayha ）撰写的Pen Foundation 5 Basic Grid Showcase 。

这将生成3列。注意如何为该行设置最大宽度。与Bootstrap不同，我们不必将行包含在 .container类中。

网格大小和CSS类

每行都是使用 .row类定义的。很简单。这些列是使用CSS类创建的： .small-# .medium-#和 .large-# 。由于Foundation使用 12个网格系统，因此＃的总数必须为 12 。同样，必须附加到列的类是 .column或 .columns 。他们俩都做同样的事情。您可以使用 .row和 .small/medium/large-#类定义布局的任意组合。该文档显示了大量示例，因此请查看那里的启发。如果您需要更多帮助，例如为您预建页面和行，请查看 Foundation的模板。这些是一个很好的起点。

媒体查询

Foundation带有内置的媒体查询，以帮助我们的网站尽可能地响应。与Bootstrap相比，这里的媒体查询有趣的是，它们是使用 ems而不是 pixels定义的。这些媒体查询可以在媒体查询文档中找到。查看媒体查询和评论，以了解Foundation如何分解我们的网站。

// Small screens
@media only screen { } /* Define mobile styles */

/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 40em) { } 

/* ------------------------------------------
    Medium screens 
    min-width 641px, medium screens 
*/ ------------------------------------------
@media only screen and (min-width: 40.063em) { } 

/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 40.063em) and (max-width: 64em) { } 

/* ------------------------------------------
    Large screens
    min-width 1025px, large screens 
*/ ------------------------------------------
@media only screen and (min-width: 64.063em) { } 

/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
@media only screen and (min-width: 64.063em) and (max-width: 90em) { } 

/* ------------------------------------------
    XLarge screens
    min-width 1441px, xlarge screens
*/ ------------------------------------------
@media only screen and (min-width: 90.063em) { }

/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
@media only screen and (min-width: 90.063em) and (max-width: 120em) { } 

/* ------------------------------------------ 
    XXLarge screens
    min-width 1921px, xxlarge screens
*/ ------------------------------------------
@media only screen and (min-width: 120.063em) { }

巢状

嵌套网格有助于创建一些不错的布局。窝网格，只是定义 .row一个内部 .column ，打造出网格就像你通常会。这是一些代码和示例：

请参阅CodePen上Chris Sevilleja （ @sevilayha ）撰写的Pen Foundation 5嵌套网格展示。

Advanced Uses

In addition to the basic grid and media queries, Foundation comes with some cool features and advanced things that help build out our applications.

Multiple Grid Definitions

Thanks to the .small, .medium, and .large classes, we are able to define different grids at different sizes. Let's say to have 2 columns on small devices and 3 columns on medium and large devices. We can do this by defining multiple classes on the same column.

<div class="row text-center">
    <div class="small-6 medium-4 columns">column 1</div>  
    <div class="small-6 medium-4 columns">column 2</div>
    <div class="show-for-medium-up medium-4 columns">only shows on medium and up</div>
</div>

See the Pen Foundation 5 Dynamic Grid Showcase by Chris Sevilleja (@sevilayha) on CodePen.

By resizing your browser, you can see the different configurations that we have defined.

Incomplete Rows

If you dont fill in all 12 rows of the grid, a neat feature is that the last column will automatically float off to the right. This is neat for creating sidebars. If you don't want this to happen, just add the .end class to your last column.

See the Pen Foundation 5 Incomplete Rows Showcase by Chris Sevilleja (@sevilayha) on CodePen.

Offsets

Offsets allow you to create spacing in your Foundation grid. By using one of the offset classes ( .small-offset-#, .medium-offset-#, or .large-offset-#) we are able to "offset" a column that many spaces.

<div class="row text-center">
    <div class="small-2 columns">column 1</div>  
    <div class="small-2 small-offset-3 columns">column 2</div>
    <div class="small-2 columns">go right</div>
</div>

See the Pen Foundation 5 Offsets Showcase by Chris Sevilleja (@sevilayha) on CodePen.

Centered Columns

Centered columns is a welcome feature. I was used to either creating some custom CSS or using offsets in Bootstrap to create a column in the center. It's easily done in Foundation using the .small-centered or .large-centered classes. Also, if you center something on small devices but want it to be normal on large devices, just add .large-uncentered.

See the Pen Foundation 5 Grid Centered Showcase by Chris Sevilleja (@sevilayha) on CodePen.

进阶用途

除了基本的网格和媒体查询，Foundation还具有一些很酷的功能和高级功能，可帮助构建我们的应用程序。

多个网格定义

由于 .small ， .medium和 .large类，我们可以定义不同大小的不 .large格。假设 在小型设备上有 2列， 在中型和大型设备上有3列 。我们可以通过在同一列上定义多个类来做到这一点。

见笔基金会5动态电网展示克里斯Sevilleja（ @sevilayha上） CodePen 。

通过调整浏览器的大小，您可以看到我们定义的不同配置。

不完整的行

如果您不填写网格的所有12行，则整齐的功能是最后一列将自动浮到右侧。这对于创建侧边栏很整洁。如果您不希望发生这种情况，只需将 .end类添加到最后一列。

<div class="row text-center">
    <div class="small-2 columns">column 1</div>  
    <div class="small-2 columns">column 2</div>
    <div class="small-2 columns">go right</div>
</div>

<div class="row text-center">
    <div class="small-2 columns">column 1</div>  
    <div class="small-2 columns">column 2</div>
    <div class="small-2 end columns">stay here</div>
</div>

请参阅CodePen上的Chris Sevilleja （ @sevilayha ）撰写的Pen Foundation 5 Incomplete Rows Showcase 。

偏移量

偏移允许您在基础网格中创建间距。通过使用偏移量类之一（ .small-offset-# offset .small-offset-# .medium-offset-#或 .large-offset-# ），我们可以“偏移”具有很多空格的列。

请参阅CodePen上Chris Sevilleja （ @sevilayha ）撰写的Pen Foundation 5 Offsets Showcase 。

中心列

居中的列是一个受欢迎的功能。我习惯于创建一些自定义CSS或在Bootstrap中使用偏移量在中心创建一列。使用 .small-centered或 .large-centered类在Foundation中可以轻松完成此 .small-centered 。另外，如果您将某些内容放在小型设备上但希望在大型设备上正常显示，则只需添加 .large-uncentered 。

请参阅CodePen上的Chris Sevilleja （ @sevilayha ）撰写的Pen Foundation 5 Grid Centered Showcase 。

Visibility Classes

In addition to the grid itself, Foundation comes with a lot of classes to hide and show elements. This could come in handy in case you needed to hide things on large devices or only show elements on small or medium devices. The flexibility offered by these visibility classes is great because there are so many of them for a multitude of occasions. We'll just list out the classes here without examples. Just apply the classes to the element that you want to show or hide and it will magically disappear and reappear as you resize your browser.

Showing or Hiding Based on Screen Size

.show-for-small-only .show-for-medium-up .show-for-medium-only .show-for-large-up .show-for-large-only .show-for-xlarge-up .show-for-xlarge-only .show-for-xxlarge-up .hide-for-small-only .hide-for-medium-up .hide-for-medium-only .hide-for-large-up .hide-for-large-only .hide-for-xlarge-up .hide-for-xlarge-only .hide-for-xxlarge-up

Showing or Hiding Based on Orientation

Foundation even comes with a way to detect device orientation for those visiting your website using mobile browsers! .show-for-landscape .show-for-portrait

Showing or Hiding Based on Touch Availability

Another cool visiblity feature: check to see if your user has a touchscreen. .show-for-touch .hide-for-touch

可见性类别

除了网格本身之外，Foundation还提供了许多用于隐藏和显示元素的类。如果您需要在大型设备上隐藏东西或仅在中小型设备上显示元素，这可能会派上用场。这些可见性类提供的灵活性非常好，因为在许多场合有很多这样的可见性类。我们将在这里列出没有示例的类。只需将类应用于要显示或隐藏的元素，当您调整浏览器大小时，它会神奇地消失并重新出现。

根据屏幕尺寸显示或隐藏

.show-for-small-only .show-for-medium-up .show-for-small-only .show-for-medium-up .show-for-medium-only .show-for-large-up .show-for-medium-only .show-for-large-up .show-for-large-only .show-for-xlarge-up .show-for-large-only .show-for-xlarge-up .show-for-xlarge-only .show-for-xxlarge-up .hide-for-small-only .hide-for-medium-up .hide-for-medium-only .hide-for-large-up .hide-for-large-only .hide-for-xlarge-up .hide-for-xlarge-only .hide-for-xxlarge-up

根据方向显示或隐藏

Foundation甚至提供了一种使用移动浏览器为访问您网站的用户检测设备方向的方法！ .show-for-landscape .show-for-portrait

根据触摸可用性显示或隐藏

另一个很酷的可见性功能：检查用户是否有触摸屏。 .show-for-touch .hide-for-touch

结论 ( Conclusion )

ZURB的Foundation 5网格系统具有大量功能，并且是目前最强大且功能齐全的网格系统之一。各种各样的类，所有出色的功能，使用ems作为网格大小以及可见性类，共同构成了一个很棒的网格解决方案。如果您对ZURB的网格系统在未来的发展感兴趣，那么他们将采用前瞻性的方法，并巧妙地了解应用程序的状态。他们关于网格的新想法创建了更现代的网站，类似于移动网站。在此处了解更多信息： Foundation: A New Grid 基础：新网格

翻译自: https://scotch.io/tutorials/understanding-zurb-foundation-5s-grid-system