【MDB 企业网站】3 colors, spacing 和响应式

Step 1

看一下页脚代码。您将看到它包含类.container-fluid。如果您已阅读上一课，您将会知道，使用.container-fluid可以将内容扩展到整个可用宽度。

在某些情况下，这是理想的选择，但是在我们当前的项目中，它看起来并不是很好。因此，我们将.container-fluid，改为.container。

<!--Footer Links-->
<div class="container">

这样它的宽度就和上面的内容保持了一致。

调整 footer

Step 2

同样，我们将对导航栏链接执行相同的操作。将其包裹在一个 container 中。

<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark primary-color">

  <!-- Additional container -->
  <div class="container">

    <!-- Navbar brand -->
    <a class="navbar-brand" href="#">Navbar</a>

    <!-- Collapse button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
      aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="basicExampleNav">

      <!-- Links -->
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>

        <!-- Dropdown -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>

      </ul>
      <!-- Links -->

      <form class="form-inline">
        <div class="md-form my-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        </div>
      </form>
    </div>
    <!-- Collapsible content -->

  </div>
  <!-- Additional container -->

</nav>
<!--/.Navbar-->

这样导航条的宽度也和下面的内容保持了一致。

调整导航条

Step 3

我们的导航栏是深蓝色的，看起来很不错。我们的页脚为浅蓝色，看起来也不错。但是它们不会共同创造出一致的构图。因此，让我们对其进行修复。

转到我们的“**颜色文档” **。您可以在其中找到300多种定义的颜色类别，只需在文档中添加颜色名称即可在我们的项目中使用。

我们将使用.indigo颜色类。

我们分别为页脚.indigo以替换.blue：

<!-- Footer -->
<footer class="page-footer font-small indigo pt-4 mt-4">

导航栏替换.primary-color为.indigoclass。：

<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark indigo">

以及项目的每个按钮中.btn-primary的类替换该类.btn-indigo。

<a href="#" class="btn btn-indigo">Button</a>

调整后的效果如下：

调整色彩

Step 4

为了修复我们的布局，我们现在将调整元素间的间距。MDB 提供了用于调整间距样式的实用代码，下面是示例：
注意：在MDB 1 rem=16 px

1.如果将类添加.mr-4到给定的元素，它将获得1.5 rem的右边距。

2.如果将class class添加.pt-2到给定元素，它将获得0.5 rem top padding。

3.如果将class class添加.mx-1到给定的元素，它将获得0.25 rem的左右边距。

4.如果将class class添加.py-5到给定的元素，它将获得3 rem顶部和底部填充。

5.如果将class class添加.m-5到给定的元素，它将获得3 rem的上，右，下和左页边距。

要了解有关间距实用程序的更多信息，请查看我们的SPACING DOCUMENTATION。

最后我们将类.mt-5添加到<main>元素，为其设置5em 的 margin-top。

Step 5

接下来，我们为第一行的元素添加 margin-bottom，需要将两栏都分别加上 .mb-4。
第一栏：

<!--Grid column-->
<div class="col-md-7 mb-4">

第二栏：

<!--Grid column-->
<div class="col-md-5 mb-4">

为两栏都加上 margin-bottom 是考虑到，当在小屏幕上，第二栏移到第一栏的底部时，就需要一个额外的 margin-bottom 了。

image.png

Step 6

接下来我们处理第二行。同样为三蓝分别添加 .mb-4。
不过你可能会注意到，第一栏的 class 属性设置为 col-lg-4 col-md-12 而另外两栏设置为 col-lg-4 col-md-6，这是为什么呢？
首先 col-lg-4 告诉浏览器，在大屏幕（lg =屏幕宽于1200px）时，三列的宽度占 4 份，因此三列等宽分割 12 份的浏览器宽度。

image.png

而col-md-6 则告诉浏览器，当在中屏幕时，第一列占 12 份（整个页面宽度），另外两列等分页面宽度（分别占 6）。

image.png

恭喜你！您已经完成了第一个MDB教程。