bootstrap网格系统_在10分钟内学习Bootstrap 4网格系统

最新推荐文章于 2024-03-20 09:35:53 发布

cumian8165

最新推荐文章于 2024-03-20 09:35:53 发布

阅读量363

点赞数

文章标签： python java javascript android css ViewUI

原文链接：https://www.freecodecamp.org/news/learn-the-bootstrap-4-grid-system-in-10-minutes-e83bfae115da/

版权

本文介绍了如何在10分钟内学习Bootstrap 4的网格系统，包括容器、行和列的使用，以及设置列的大小和断点。Bootstrap 4网格系统通过容器、行和列创建响应式布局，方便地在不同设备上排列内容。通过理解容器的两种类型（和），行的布局规则，以及列的动态宽度和断点设置，开发者可以轻松构建适应各种屏幕尺寸的网页布局。

摘要由CSDN通过智能技术生成

bootstrap网格系统

by Elena-Cristina Conacel

由Elena-Cristina Conacel

在10分钟内学习Bootstrap 4网格系统 (Learn the Bootstrap 4 Grid System in 10 Minutes)

The Bootstrap 4 Grid System is used for responsive layouts.

Bootstrap 4网格系统用于响应式布局。

A responsive layout represents the way elements align in the page on different resolutions. It is important you understand how to use the grid before learning about any other Bootstrap 4 component, because whatever element you use, you will need to place it somewhere on the screen.

响应式布局表示元素以不同分辨率在页面中对齐的方式。在学习任何其他Bootstrap 4组件之前，了解如何使用网格非常重要，因为无论使用什么元素，都需要将其放置在屏幕上的某个位置。

Let’s get started!

让我们开始吧！

目录 (Table of Contents)

The Bootstrap 4 grid consists of containers, rows and columns. We will take them one by one and explain them.

Bootstrap 4网格由容器，行和列组成。我们将一一介绍它们并进行解释。

Bootstrap 4容器 (Bootstrap 4 Containers)

A Bootstrap 4 container is an element with the class .container. The container is the root of the Bootstrap 4 grid system and it is used to control the width of the layout.

Bootstrap 4容器是.container类的.container 。该容器是Bootstrap 4网格系统的根，用于控制布局的宽度。

The Bootstrap 4 container contains all the elements in a page. This means your page should have the following structure: first the body of the HTML page, inside of it you should add the container and all the other elements inside the container.

Bootstrap 4容器包含页面中的所有元素。这意味着您的页面应具有以下结构：首先是HTML页面的正文，应在其中添加容器以及容器内的所有其他元素。

<body>
   <div class="container">
    ...
   </div>
</body>

The simple .container class sets the width of the layout depending on the width of the screen. It places the content in the middle of the page aligning it horizontally. There is equal space between the Bootstrap 4 container and the left and the right edge of the page.

简单的.container类根据屏幕的宽度设置布局的宽度。它将内容放置在页面中间，使其水平对齐。 Bootstrap 4容器与页面的左右边缘之间有相等的空间。

The .container scales down in width as the screen width narrows and becomes full-width on mobile. The width of the container is defined inside the Bootstrap 4 library for every screen size. You can see the exact sizes here.

随着屏幕宽度变窄， .container的宽度将缩小，并在移动设备上变为全角。容器的宽度是在Bootstrap 4库中为每种屏幕尺寸定义的。您可以在此处看到确切的尺寸。

A full-width container takes 100% of the screen size regardless of the screen width. To use it you need to add the class .container-fluid.

全宽容器占用屏幕大小的100％，而不管屏幕宽度如何。要使用它，您需要添加class。 container-fluid 。

<div class="container">
  Hello! I am in a simple container.
</div>

<div class="container-fluid">
  Hello! I am in a full-width container.
</div>

You can view the CodePen here.

您可以在此处查看CodePen。

To see the differences between the two types of containers, you can open the pen in your console and switch between screen sizes.

要查看两种类型的容器之间的区别，可以在控制台中打开笔并在屏幕尺寸之间进行切换。

Bootstrap 4行 (Bootstrap 4 Rows)

Bootstrap 4 rows are horizontal slices of the screen. They are used only as wrappers for columns. To use them, you need the .row class.

Bootstrap 4行是屏幕的水平切片。它们仅用作列的包装。要使用它们，您需要.row类。

<div class="row">
  ...
</div>

Here are the most important things you need to remember about Bootstrap 4 rows:

关于Bootstrap 4行，这是您需要记住的最重要的事情：

They are only used for containing columns. If you place other elements inside the row along with columns you will not get the expected result.
它们仅用于包含列。 如果将其他元素与列一起放在行内，则不会获得预期的结果。
They have to be placed in containers. If you don’t do this, you will get a horizontal scroll on your page. This happens because rows have negative left and right margins of 15. The container has 15px paddings so it counteracts the margins.
它们必须放在容器中。 如果不这样做，您将在页面上获得水平滚动。发生这种情况是因为行的左边距和右边距为负15。该容器具有15px的填充，因此抵消了边距。
The columns have to be children of the row. Otherwise they will not align. The rows and columns are created to work together in this strict hierarchy.
列必须是该行的子级。 否则它们将无法对齐。创建行和列以在此严格的层次结构中一起工作。

Bootstrap 4列 (Bootstrap 4 Columns)

We can now get to the nice part of this tutorial, the Bootstrap 4 columns. Columns are great! They help you divide the screen horizontally.

现在，我们可以进入本教程的精彩部分，Bootstrap 4专栏。列很棒！它们可帮助您水平分割屏幕。

If you place a single column in your row, it will take up all the width. If you add two columns, they will each take 1/2 from the width. And so it goes for any number of columns.

如果在行中放置一列，它将占用所有宽度。如果添加两列，则它们各自将占宽度的1/2。因此，它适用于任意数量的列。

<div class="container">
  <div class="row">
    <div class="col">
      ...
    </div>
  </div>
  <div class="row">
    <div class="col">
      ...
    </div>
    <div class="col">
       ...
    </div>
  </div>
  <div class="row">
    <div class="col">
      ...
    </div>
    <div class="col">
       ...
    </div>
    <div class="col">
      ...
    </div>
    <div class="col">
       ...
    </div>
    <div class="col">
       ...
    </div>
  </div>
</div>

You can see the code live on CodePen.

您可以在CodePen上实时查看代码。

Side note: Columns are not coloured. I just added colours for a more visually compelling description/so they look pretty.

旁注：列未着色。我只是添加了颜色以提供更具视觉吸引力的描述/所以它们看起来很漂亮。

设置列的大小 (Setting Sizes for Columns)

Using the .col class sets the width for the column dynamically. That means that depending on the number of columns in a row, the width of a column will be the width of the container divided by the number of columns.

使用.col类可动态设置列的宽度。这意味着，取决于行中的列数，列的宽度将是容器的宽度除以列数。

But there is another way to define columns. You can use classes for columns and define their size.

但是还有另一种定义列的方法。您可以将类用于列并定义其大小。

By default, the Bootstrap 4 grid consists of 12 columns. You can select any size from 1 to 12 for your column. If you want 3 equal columns, you can use .col-4 for each one (because 3*4 cols each = 12). Or you can set different sizes for them. Here are some examples:

默认情况下，Bootstrap 4网格由12列组成。您可以为列选择1到12之间的任意大小。如果要3个相等的列，则可以为每一个使用.col-4 (因为3 * 4 cols每个= 12)。或者，您可以为它们设置不同的大小。这里有些例子：

<div class="row">
  <div class="col-6">
    ...
  </div>
  <div class="col-6">
     ...     
  </div>
</div>
<div class="row">
  <div class="col-5">
    ...
  </div>
  <div class="col-7">
     ...     
  </div>
</div>
<div class="row">
  <div class="col-3">
    ...
  </div>
  <div class="col-4">
     ...     
  </div>
</div>
<div class="row">
  <div class="col-6">
    ...
  </div>
  <div class="col-7">
     ...     
  </div>
</div>

You can see the code live on CodePen.

您可以在CodePen上实时查看代码。

If the sum of the cols in your row doesn’t get to 12, then they don’t fill the whole row. If the sum of the columns goes beyond 12 then it will move to the next line. The first line will only display the first elements that add up to 12 or lower.

如果您行中col的总和未达到12，则它们不会填充整行。如果列的总和超过12，则它将移至下一行。第一行将仅显示加起来等于或小于12的前几个元素。

设置列的断点 (Setting Breakpoints for Columns)

If you take the example above and want to display it on mobile, you may run into some problems. Displaying five columns on mobile will make the content unreadable.

如果您采用上述示例，并想在移动设备上显示它，则可能会遇到一些问题。在移动设备上显示五列将使内容不可读。

This is where one of the most powerful Bootstrap 4 components comes into play. In order to have different layouts on different screens you won’t need to write media queries, instead you can use the column breakpoints.

这是功能最强大的Bootstrap 4组件之一发挥作用的地方。为了在不同的屏幕上具有不同的布局，您无需编写媒体查询，而是可以使用列断点。

A breakpoint is a Bootstrap 4 variable that stands for a screen resolution. When you are specifying a breakpoint for a class, you are telling the class to be active only for resolutions that are at least as big as the number that the breakpoint holds.

断点是Bootstrap 4变量，代表屏幕分辨率。当您为一个类指定一个断点时，您是在告诉该类仅对于至少与该断点所容纳的数字一样大的分辨率有效。

The simplest class that we will learn about is the .col-[breakpoint] class. When you use this class, you are defining the behaviour for the columns only when they are displayed on devices that have a resolution of at least the defined breakpoint. Up to the given breakpoint, your columns will align vertically by default. And after your breakpoint, they will align horizontally because of the class.

我们将学习的最简单的类是.col-[breakpoint]类。使用此类时，仅当列显示在分辨率至少为定义的断点的设备上时，才定义列的行为。在给定的断点之前，默认情况下您的列将垂直对齐。在断点之后，由于类的缘故，它们将水平对齐。

Bootstrap has 4 breakpoints that you can use:

Bootstrap有四个断点可以使用：

.col-sm for larger mobile phones (devices with resolutions ≥ 576px);
.col-sm适用于大型手机(分辨率≥576px的设备)；
.col-md for tablets (≥768px);
.col-md用于平板电脑(≥768px)；
.col-lg for laptops (≥992px);
.col-lg用于笔记本电脑(≥992px)；
.col-xl for desktops (≥1200px)
.col-xl (至少1200像素)

Let’s say you want to display two columns one after another vertically on small screens and on the same line on bigger screens. You will need to specify the breakpoint where the columns go on the same line.

假设您要在小屏幕上垂直显示两列，在大屏幕上同一行。您将需要指定断点，列在同一行上。

In our example we will use the .col-lg breakpoint and see how the columns look on different screens. For resolutions that are lower than the given breakpoint (<992px) the columns will be displayed vertically. This means that on mobile devices and tablets, the columns will look like this:

在我们的示例中，我们将使用.col-lg断点，并查看各列在不同屏幕上的外观。对于低于给定断点(<992px)的分辨率，列将垂直显示。这意味着在移动设备和平板电脑上，这些列将如下所示：

And for devices that have a resolution that is higher or equal to the breakpoint (≥992px) the columns will go on the same row. This means that on laptops and desktops you will get this result:

对于分辨率高于或等于断点(≥992px)的设备，列将位于同一行。这意味着在笔记本电脑和台式机上，您将得到以下结果：

<div class="row">
 <div class="col-lg">
   ...
 </div>
 <div class="col-lg">
    ...   
 </div>
</div>

You can see the code live on CodePen. If you open the Codepen in another window and see the page at different resolutions, you will see the columns change their positioning.

您可以在CodePen上实时查看代码。如果在另一个窗口中打开Codepen，并以不同的分辨率查看页面，您将看到各列的位置改变。

If you wanted for the 2 columns to go on the same line starting with larger mobile phones you would use .col-sm, for tablets .col-md and for extra large screens .col-xl.

如果要使两列从较大的手机开始在同一行上，则可以使用.col-sm ，平板电脑.col-md和超大屏幕.col-xl 。

设置列的大小和断点 (Setting Sizes and Breakpoints for Columns)

You can combine the sizes and breakpoints and use a single class with the format .col-[breakpoint]-[size].

您可以组合大小和断点，并使用格式为.col-[breakpoint]-[size]的单个类。

For example, if you want three columns of different sizes to align on a row starting with the laptop resolution you need to do this:

例如，如果您希望以笔记本电脑分辨率开头的三行不同大小的列对齐，那么您需要这样做：

<div class="row">
  <div class="col-lg-4">
    ...
  </div>
  <div class="col-lg-3">
    ...
  </div>
  <div class="col-lg-5">
    ...     
  </div>
</div>

You will get this result on resolutions <992px:

您将在分辨率低于992px的情况下获得此结果：

And for screens that are ≥992px:

对于≥992px的屏幕：

Again, you can see the code live on CodePen.

同样，您可以在CodePen上看到代码。

But what if you want to display one column per row on small mobile resolutions, two columns per row on tablets and four on laptops or devices with higher resolutions?

但是，如果要在较小的移动分辨率下每行显示一列，在平板电脑上每行显示两列，在分辨率更高的笔记本电脑或设备上显示四行，该怎么办？

Then you add multiple classes for a single column to describe the behaviour for every resolution. Using multiple classes, you specify that the content will take six slots on tablets and three on laptops.

然后，为单个列添加多个类以描述每种解决方案的行为。使用多个类，您可以指定内容在平板电脑上占用六个插槽，在笔记本电脑上占用三个插槽。

<div class="row">
  <div class="col-sm-6 col-lg-3">
    ...
  </div>
  <div class="col-sm-6 col-lg-3">
    ...
  </div>
  <div class="col-sm-6 col-lg-3">
     ...     
  </div>
  <div class="col-sm-6 col-lg-3">
     ...     
  </div>
</div>

The result will show like this on tablets:

结果将在平板电脑上显示如下：

And like this on laptops and higher resolutions:

像这样在笔记本电脑和更高的分辨率下：

This example is also live on CodePen.

此示例也位于CodePen上。

As an exercise, you can try and create rows with different number of columns depending on the screensize and verify the behaviour in your browser console.

作为练习，您可以尝试根据屏幕大小创建具有不同列数的行，并在浏览器控制台中验证行为。

偏移列 (Offsetting Columns)

If you don’t want your columns to be next to each other, you can use the class .offset-[breakpoint]-[size] together with the .col-[breakpoint]-[size].

如果你不想让你的列是彼此相邻，您可以使用类.offset-[breakpoint]-[size]与一起.col-[breakpoint]-[size] 。

Using this class is the same as adding an empty column before your column. Here is a simple example:

使用此类与在列之前添加一个空列相同。这是一个简单的示例：

<div class="row">
  <div class="col-md-4 offset-md-4">
     ...     
  </div>  
  <div class="col-md-4">
     ...     
  </div>  
</div>

You can see the code live on CodePen.

您可以在CodePen上实时查看代码。

You can use the class on any column in the row. Here are some more examples:

您可以在该行的任何列上使用该类。这里还有更多示例：

<div class="row">
  <div class="col-md-4">
     ...     
  </div>  
  <div class="col-md-4 offset-md-4">
     ...     
  </div>  
</div>
<div class="row">
  <div class="col-md-4 offset-md-2">
     ...    
  </div>  
  <div class="col-md-4 offset-md-2">
     ...     
  </div>  
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">
     ...
  </div>   
</div>

嵌套列 (Nesting Columns)

This may come as a surprise, but you can add a row inside a column!

这可能令人惊讶，但是您可以在列中添加一行！

The row in question (which will have the width of its parent column) will then be divided into 12 (smaller) columns that you can reference through the .col-* classes.

然后将所讨论的行(具有其父列的宽度)划分为12个(较小的)列，您可以通过.col-*类进行引用。

Let’s take a look at what happens when we insert a new row inside a column:

让我们看一下在列中插入新行时会发生什么：

<div class="row">
    <div class="col-md-8">
        ...
        <div class="row">
            <div class="col-md-5">
               ...
            </div>
            <div class="col-md-7">
               ...   
            </div>
        </div>
      </div>     
    </div>
    <div class="col-md-4">
       ...
    </div>
</div>

You can see the code live on CodePen.

您可以在CodePen上实时查看代码。

Knowing this, you can go many levels deep to organise your information. The columns will provide a simple way for you to manage your space.

知道了这一点，您可以深入多个层次来组织信息。这些列将为您提供管理空间的简单方法。

This wraps up the basic knowledge regarding the Bootstrap 4 responsive grid system. If you have questions, please let me know in the comments, I will be glad to answer.

总结了有关Bootstrap 4响应式网格系统的基本知识。如果您有任何疑问，请在评论中让我知道，我将很乐意回答。

进一步阅读 (Further Reading)

If you have more time, here are some useful resources:

如果您有更多时间，这里有一些有用的资源：

Official Grid Documentation from GetBootstrap
GetBootstrap的官方网格文档
Video Tutorial from Scrimba
Scrimba的视频教程

This article was initially posted on the BootstrapBay Blog. It is part of a larger series of Bootstrap 4 tutorials called 14 Days of Bootstrap 4. If you want to continue learning about the Bootstrap 4 components, these articles are a good place to start.

本文最初发布在BootstrapBay博客上。它是更大系列的Bootstrap 4教程(称为14 Days of Bootstrap 4)的一部分。如果您想继续学习Bootstrap 4组件，那么这些文章是一个不错的起点。

And if you want to jump start your development with a Bootstrap template, you can check out our marketplace.

如果您想使用Bootstrap模板快速开始开发，则可以查看我们的市场。

But before delving deeper, take a moment to celebrate your newly acquired skills!?

但是在深入研究之前，请花一点时间来庆祝您新获得的技能！

翻译自: https://www.freecodecamp.org/news/learn-the-bootstrap-4-grid-system-in-10-minutes-e83bfae115da/

bootstrap网格系统

cumian8165

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap网格系统_在10分钟内学习Bootstrap 4网格系统

bootstrap网格系统by Elena-Cristina Conacel 由Elena-Cristina Conacel 在10分钟内学习Bootstrap 4网格系统 (Learn the Bootstrap 4 Grid System in 10 Minutes)The Bootstrap 4 Grid System is used for responsive layouts. B...
复制链接

扫一扫