bootstrap网格系统_了解Bootstrap 3网格系统

bootstrap网格系统

With the 3rd version of the great Bootstrap out for about 4 and a half months now, people have had their time to play around with it, learn the changes, find new features, and build amazing things.

现在，出色的Bootstrap的第3版发布了大约四个半月，人们才有时间试用，学习更改，发现新功能并开发出令人惊奇的东西。

区别 (The Difference)

The most interesting change for me was the difference in the grid system. Bootstrap 2 catered to two different browser sizes (desktop and then mobile). With Bootstrap 3, you now build with mobile in mind first, and the grid system lets you create different grid systems based on browser size.

对我来说，最有趣的变化是网格系统的差异。 Bootstrap 2迎合了两种不同的浏览器大小（桌面版和移动版）。 现在，借助Bootstrap 3，您首先要牢记移动平台，而网格系统可让您根据浏览器大小创建不同的网格系统 。

引导程序2 (Bootstrap 2)

The grid you create works on desktops and then stacks on top of each other when browser size is below 767px. This is limited since you can only define 1 grid on desktop sized browsers. You are left with a stacked grid on mobile devices.

您创建的网格可在台式机上工作，然后在浏览器大小小于767px时彼此堆叠。 由于您只能在桌面大小的浏览器上定义1个网格，因此此设置受到限制。 您在移动设备上只剩下一个堆叠的网格。

引导程序3 (Bootstrap 3)

The new Bootstrap grid system applies to mobile first. When you declare a specific grid size, that is the grid for that size and above. This can be a little hard to grasp at first so here's an example.

新的Bootstrap网格系统首先适用于移动设备。 声明特定的网格大小时，即为该大小及以上的网格。 首先可能很难理解，所以这里有一个例子。

For example, let's say you want a site that has:

例如，假设您想要一个具有以下内容的网站：

• 1 column on extra small devices
  在超小型设备上的1列
• 2 columns on small AND medium devices
  小型和中型设备上的2列
• 4 columns on large devices
  大型设备上的4列

Since the grid system now cascades up from mobile devices, this is how this code will look.

由于网格系统现在是从移动设备层叠而来的，因此这是该代码的外观。

<div class="row">
    <div class="col-sm-6 col-lg-3">
        This is part of our grid.
    </div>
    <div class="col-sm-6 col-lg-3">
        This is part of our grid.
    </div>
    <div class="col-sm-6 col-lg-3">
        This is part of our grid.
    </div>    
    <div class="col-sm-6 col-lg-3">
        This is part of our grid.
    </div>    
</div>

We don't have to define anything for extra small devices since the default is one column. We have to define a grid size for small devices, but not for medium devices. This is because the grid cascades up. So if you define a size at sm, then it will be that grid size for sm, md, and lg.

我们不需要为超小型设备定义任何内容，因为默认值为一列。 我们必须为小型设备而不是中型设备定义网格大小。 这是因为网格级联。 因此，如果您在sm处定义大小，则它将是sm ， md和lg网格大小。

We'll explain the different grid sizes and how you create them and then show examples.

我们将解释不同的网格大小以及如何创建它们，然后显示示例。

网格大小 (The Grid Sizes)

This is the best part about the new grid system. You could realistically have your site show a different grid on 4 different browser sizes. Below is the breakdown of the different sizes.

这是有关新网格系统的最佳部分。 实际上，您可以让您的网站在4种不同的浏览器尺寸上显示不同的网格。 以下是不同尺寸的细分。

.col-xs-$	Extra Small	Phones Less than 768px
.col-sm-$	Small Devices	Tablets 768px and Up
.col-md-$	Medium Devices	Desktops 992px and Up
.col-lg-$	Large Devices	Large Desktops 1200px and Up

.col-xs-$	特小	手机小于768像素
.col-sm-$	小型装置	平板电脑768像素及以上
.col-md-$	中型设备	台式机992px以上
.col-lg-$	大型装置	大型台式机1200px及以上

The official Bootstrap docs offer a much more comprehensive understanding of how the grid works. Take a look at those to get a more solid overview of column sizes, gutter sizes, maximum column sizes, and the max-width of your overall site based on browser size.

官方的Bootstrap文档提供了关于网格工作原理的更全面的了解。 查看这些内容，以基于浏览器大小更全面地了解列大小，装订线大小，最大列大小以及整个站点的最大宽度。

引导网格的默认大小 (Default Sizes for the Bootstrap Grid)

Sometimes you will need to use media queries to get your site to act the way you'd like it to. Knowing the default grid sizes is essential to extending the Bootstrap grid. We've written up a quick tip to show you the default sizes so take a look if you need the Bootstrap media queries and breakpoints.

有时，您将需要使用媒体查询来使您的网站按照您希望的方式运行。 知道默认的网格大小对于扩展Bootstrap网格至关重要。 我们已经写了一个快速提示来向您显示默认大小，因此请查看是否需要Bootstrap媒体查询和断点。

Bootstrap Media Queries and Breakpoints

Bootstrap媒体查询和断点

响应实用程序 (Responsive Utilities)

Just like Bootstrap 2, Bootstrap 3 provides responsive utilities for hiding and showing elements based on the browser size. This will also help us in defining our grid system.

就像Bootstrap 2一样，Bootstrap 3提供了响应实用程序，用于根据浏览器大小隐藏和显示元素。 这也将帮助我们定义网格系统。

• .visible-xs
  .visible-xs
• .visible-sm
  .visible-sm
• .visible-md
  .visible-md
• .visible-lg
  .visible-lg
• .hidden-xs
  .hidden-xs
• .hidden-sm
  .hidden-sm
• .hidden-md
  .hidden-md
• .hidden-lg
  .hidden-lg

This helps because we are able to show certain elements based on size. In our examples today, we'll be showing an extra sidebar on large desktops.

这很有帮助，因为我们能够根据大小显示某些元素。 在今天的示例中，我们将在大型台式机上显示一个额外的侧边栏。

例子 (Examples)

Here are a few examples of the grids that you can create. We'll go through some basic sites that some people might want and show how easy it is to build that site with the Bootstrap 3 grid.

这是您可以创建的网格的一些示例。 我们将介绍一些人可能想要的一些基本站点，并说明使用Bootstrap 3网格构建该站点有多么容易。

Resize your browser's width to see the different grids in action. 调整浏览器的宽度，以查看实际使用的不同网格。

简单：大型台式机与移动设备 (Simple: Large Desktop vs Mobile)

Let's say you wanted a site to have 1 column on extra small (phone) and small (tablet) devices, 2 columns on medium (medium desktop) devices, and 4 columns on large (desktop) devices.

假设您希望网站在超小型（电话）和小型（平板电脑）设备上有1列 ，在中型（中型台式机）设备上有2列 ，在大型（台式机）设备上有4列 。

Large Devices!

大型设备！

Medium Devices!

中型设备！

Extra Small and Small Devices

超小型设备

Large Devices!

大型设备！

Medium Devices!

中型设备！

Extra Small and Small Devices

超小型设备

Large Devices!

大型设备！

Medium Devices!

中型设备！

Extra Small and Small Devices

超小型设备

Large Devices!

大型设备！

Medium Devices!

中型设备！

Extra Small and Small Devices

超小型设备

Here is the code for that example:

这是该示例的代码：

<div class="row">
    <div class="col-md-6 col-lg-3">
        <div class="visible-lg text-success">Large Devices!</div>
        <div class="visible-md text-warning">Medium Devices!</div>
        <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="visible-lg text-success">Large Devices!</div>
        <div class="visible-md text-warning">Medium Devices!</div>
        <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="visible-lg text-success">Large Devices!</div>
        <div class="visible-md text-warning">Medium Devices!</div>
        <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
    </div>    
    <div class="col-md-6 col-lg-3">
        <div class="visible-lg text-success">Large Devices!</div>
        <div class="visible-md text-warning">Medium Devices!</div>
        <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
    </div>    
</div>

中级：在大型台式机上显示多余的列 (Intermediate: Show Extra Column on Large Desktops)

This is an interesting example and one that the new grid excels at. Let's say you have a site that has a sidebar and a main content section. For extra small devices, you want one column, main content with the sidebar stacked below it. For small and medium devices, we want sidebar and main content to sit side by side. Now for large devices, we want to utilize the space on larger devices. We want to add an extra sidebar to show more content.

这是一个有趣的示例，也是新网格所擅长的示例。 假设您有一个包含侧边栏和主要内容部分的网站。 对于超小型设备 ，您需要一列主要内容，并在其下方堆叠侧边栏。 对于中小型设备 ，我们希望边栏和主要内容并排放置。 现在，对于大型设备 ，我们想利用大型设备上的空间。 我们想要添加一个额外的侧边栏以显示更多内容。

I am the main content.

我是主要内容。

I am the main sidebar.

我是主要的侧边栏。

I am the secondary sidebar that only shows up on LARGE devices.

我是仅在大型设备上显示的辅助侧边栏。

We change the size of the main content to span 6 columns on large devices to make room for our second sidebar. This is a great way to utilize the space on larger desktops. And here is the code for that example.

我们将主要内容的大小更改为在大型设备上跨越6列，为第二个侧边栏腾出空间。 这是在较大的台式机上利用空间的好方法。 这是该示例的代码。

<div class="row">
    <div class="col-sm-9 col-lg-6 text-danger">
        I am the main content.
    </div>
    <div class="col-sm-3 text-warning">
        I am the main sidebar.
    </div>
    <div class="col-lg-3 visible-lg text-success">
        I am the secondary sidebar that only shows up on LARGE devices.
</div>
</div>

进阶：每种尺寸都有不同的网格 (Advanced: Different Grid For Every Size)

This will be a more complex example. Let's say that at no point in our grid system do we want all of our columns to stack. For extra small devices, we want 2 columns. For small devices, we want 3 columns. For medium devices, we want 4 columns. For large devices, we want 6 columns (one that only shows on large devices).

这将是一个更复杂的示例。 假设在我们的网格系统中任何时候我们都不想堆叠所有列。 对于超小型设备 ，我们需要2列。 对于小型设备 ，我们需要3列。 对于中型设备 ，我们需要4列。 对于大型设备 ，我们需要6列（其中一列仅在大型设备上显示）。

You get the drill now. Let's just straight into the example and code.

您现在就开始练习。 让我们直接看一下示例和代码。

I'm content!

我很满足！

I'm content!

我很满足！

I'm content!

我很满足！

I'm content!

我很满足！

I'm content!

我很满足！

I'm content only visible on large devices!

我只在大型设备上可见！

<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        I'm content!
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        I'm content!
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        I'm content!
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        I'm content!
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        I'm content!
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg">
        I'm content only visible on large devices!
    </div>
</div>

You can see that as the browser size gets smaller, the columns start to form. Also, the content inside each will begin stacking.

您会看到，随着浏览器大小的减小，列开始形成。 此外，每个内容都将开始堆叠。

太棒了！ (It's Gridtastic!)

You can see how easily it is to build complex and dynamic sites with the Bootstrap 3 grid. From mobile 2 column sites to complex hiding and showing elements on large desktops, you can build any type of site. Hopefully these examples will give you an idea of the flexibility of the new grid system and all the great things you can create.

您可以看到使用Bootstrap 3网格构建复杂的动态站点非常容易。 从移动2列网站到大型桌面上复杂的隐藏和显示元素，您都可以构建任何类型的网站。 希望这些示例可以使您对新网格系统的灵活性以及可以创建的所有出色功能有所了解。

翻译自: https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system

bootstrap网格系统