Building our scaffolding_Bootstrap 4 By Example-QQ阅读男生玄幻网

书名：Bootstrap 4 By Example
作者名：Silvio Moreto
本章字数：939字
更新时间：2021-07-09 20:01:19

Building our scaffolding

For our landing page, we will use the grid presented in the following image. As you can see, it is represented by seven rows, each containing a different number of columns. In this first example, we will use a nonmobile viewport, which we will discuss in the next chapter.

Setting things up

To start that, let's use our default layout presented in Chapter 1, Getting Started. Add inside the p.container tag another p with the .row class:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Landing page</title>

    <link rel="stylesheet" href="css/bootstrap.css">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
    <![endif]-->
  </head>
  <body>
    <p class="container">
      <p class="row"></p>
    </p>

    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>

The hierarchy for the grid system always follows the sequence of a container that wraps rows and multiple columns. Keep in mind to always use this sequence to get a proper output.

Now that we have our .container with the first .row, let's create our first column. Every row is subpided into 12 parts, so you can have up to 12 columns in a single row.

To identify a column, we must follow the template of .col-*-*. The first asterisk means the viewport for the column, and the other one means the size of the column. We will explain more about that, but to create our first column, we create a column identified by .col-md-12 inside our row:

<p class="container">
  <p class="row">
 <header class="col-md-12">
 HEADER
 </header>
  </p>
</p>

In this column, the md in.col-md-12 means that for the viewport medium (which means the md identifier), the column must have a 12-column width. In other words, the column fills the entire width of this row. This column will fill the complete width because it is our header, and as we can see in the previous image, this row is composed of just a single row.

So, to create a column in the Bootstrap grid system, you must follow the recipe of .col-*-* for every column. While you can set an integer from 1 to 12 for the width, for the viewport, you must set the correct class prefix. In this table, you can see the breakdown of class prefix usage and on which resolution it can be used:

Tip

What will happen if I create a row with more than 12 columns?

Try adding a number of columns with a number higher than 12, for instance, five columns with the .col-md-3 class. Knowing that every row is treated as a unit of 12 columns, the next ones will wrap in a new line.

Offset columns

Our second row is pided into three equal-sized columns, and the first one is an offset column, or in other words, an empty column that will be filled by a left margin. Therefore, the second row will be like this:

<p class="row">
  <p class="col-md-offset-4 col-md-4">1/3</p>
  <p class="col-md-4">1/3</p>
</p>

As you can see, by adding the .col-md-offset-4 class, we create a margin to the left four, sized in just this .row. By having each row independent of the others, we can properly customize the layout to appear just as it is supposed to be.

Tip

What happens if I add more than two offsets in a single column?

If you do that, you will find yourself in a funny situation. As a tip, only one offset is applied for an element, but which one? The answer is, the smallest offset!

Completing the grid rows

Now we will advance to the third row in our scaffolding. If you've got the spirit, you should have no problems with this row. For training, try doing it by yourself and check the solution in the book afterwards! I am sure you can handle it.

So, this row is composed of two columns. The first column must fill 4 out of the 12 parts of the row and the other column will fill the rest. The row in the HTML should look like this:

<p class="row">
  <p class="col-md-4"></p>
  <p class="col-md-8"></p>
</p>

About the fourth row—it is composed of a quarter pisor, followed by a half pisor, followed by a last quarter pisor. Using this in base 12, we will have the following grid in the row:

<p class="row">
  <p class="col-md-3">1/4</p>
  <p class="col-md-6">1/2</p>
  <p class="col-md-3">1/4</p>
</p>

Nesting rows

In the fifth and sixth rows, we will show how you can create a row using two options. In the fifth row, we will create just as we are doing in the other rows, while in the sixth row, we will use the concept of nesting rows.

So, in the fifth row, create it just as you were doing before; create a row with four equally sized rows, which means that each column will have the .col-md-3 class:

<p class="row">
  <p class="col-md-3">1/4</p>
  <p class="col-md-3">1/4</p>
  <p class="col-md-3">1/4</p>
  <p class="col-md-3">1/4</p>
</p>

For the sixth row, we will use nesting rows. So, let's create the first .row, having three columns:

<p class="row">
  <p class="col-md-3">1/4</p>
  <p class="col-md-6"></p>
  <p class="col-md-3">1/4</p>
</p>

As you can see, the first and the last column use the same class of columns in row five—the .col-md-3 class—while the middle column is double the size, with the .col-md-6 class.

Let's nest another .row inside the middle column. When you create a new nested row, the columns inside of it are refreshed and you have another set of 12-sized columns to put inside it. So, inside this new row, create two columns with the .col-md-6 class to generate two columns representing a fourth of the row:

<p class="row">
  <p class="col-md-3">1/4</p>
  <p class="col-md-6">
    <p class="row">
      <p class="col-md-6">1/4</p>
      <p class="col-md-6">1/4</p>
    </p>
  </p>
  <p class="col-md-3">1/4</p>
</p>

The concept of nesting rows is pretty complex, since you can infinitely subpide a row, although it is great to create small grid components inside your page that can be used in other locations.

Finishing the grid

To create the last row, we need to create the .col-md-2 column, followed by .col-md-7 and .col-md-3. So, just create a row using the <footer> tag with those columns. The complete scaffolding will be this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Landing page</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
    <![endif]-->
  </head>
  <body>
    <p class="container">
      <!-- row 1 -->
      <p class="row">
        <header class="col-md-12">
          HEADER
        </header>
      </p>

      <!-- row 2 -->
      <p class="row">
        <p class="col-md-offset-4 col-md-4">1/3</p>
        <p class="col-md-4">1/3</p>
      </p>

      <!-- row 3 -->
      <p class="row">
        <p class="col-md-4"></p>
        <p class="col-md-8"></p>
      </p>

      <!-- row 4 -->
      <p class="row">
        <p class="col-md-3">1/4</p>
        <p class="col-md-6">1/2</p>
        <p class="col-md-3">1/4</p>
      </p>

      <!-- row 5 -->
      <p class="row">
        <p class="col-md-3">1/4</p>
        <p class="col-md-3">1/4</p>
        <p class="col-md-3">1/4</p>
        <p class="col-md-3">1/4</p>
      </p>

      <!-- row 6 – nesting rows -->
      <p class="row">
        <p class="col-md-3">1/4</p>
        <p class="col-md-6">
          <p class="row">
            <p class="col-md-6">1/4</p>
            <p class="col-md-6">1/4</p>
          </p>
        </p>
        <p class="col-md-3">1/4</p>
      </p>

      <!-- row 7 -->
      <footer class="row">
        <p class="col-md-2">1/2</p>
        <p class="col-md-7">7/12</p>
        <p class="col-md-3">1/4</p>
      </footer>
    </p>

    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>