Bootstrap-实践指南-二-Bootstrap 实践指南（二）三、目标项目 1 在前一章中，您已经了解了 Twi

Bootstrap 实践指南（二）

原文：Practical Bootstrap

协议：CC BY-NC-SA 4.0

三、目标项目 1

在前一章中，您已经了解了 Twitter Bootstrap 网格系统。在这一章中，你将开发一个顶部固定有导航栏的网页，如图 3-1 所示。

img/497763_1_En_3_Fig1_HTML.jpg

图 3-1

带有顶部导航栏的基本模板

这个导航条是响应性的，这意味着它可以在小显示设备上同样显示。在这些情况下，菜单隐藏在汉堡图标后面(图 3-2 )。

img/497763_1_En_3_Fig2_HTML.jpg

图 3-2

这是一个网站在移动设备上的外观

当用户点击汉堡图标时，菜单展开，如下图(图 3-3 )。

img/497763_1_En_3_Fig3_HTML.jpg

图 3-3

菜单选项出现在汉堡图标上点击

您将开发这个网页，但同时，您将理解 Twitter 引导类是如何工作的。

学习目标

学习一步一步地为你的网站建立一个导航栏。
让导航栏有反应。
了解如何创建一个汉堡包形状的按钮，以及如何使它展开菜单选项。
学习如何让一个段落的内容突出。
了解如何使您的主要内容区域不被导航栏隐藏。

介绍

这一章和接下来的章节将会教你框架的概念，同时尝试创建一个项目。让我们从我们的第一个项目开始。

假设我们要构建图 3-4 中的如下网站。

img/497763_1_En_3_Fig4_HTML.jpg

图 3-4

目标项目 1—带有顶部导航栏的基本模板

本项目具有以下特点:

img/497763_1_En_3_Fig5_HTML.jpg

图 3-5

这是一个网站在移动设备上的样子

它有一个导航栏。这个导航栏是有反应的。这意味着当你调整浏览器的大小来模拟手机的大小时，你会看到类似图 3-5 的东西。

正如你所看到的，菜单选项已经被折叠，变成了一个汉堡包图标。如果用户想要获得菜单选项列表，他们需要点击这个图标(图 3-6 )。

img/497763_1_En_3_Fig6_HTML.jpg

图 3-6

菜单选项出现在汉堡图标上点击

在这个网站上，你可以从 Twitter Bootstrap 免费获得其他功能。例如，当您将鼠标悬停在选项上时，您会看到选项的颜色和强度会发生变化。

让我们尝试使用 Twitter Bootstrap 从零开始建立这个网站。

从 HTML 开始

让我们从基本的 HTML 开始，它包括一个导航栏和一个将成为菜单选项的项目列表，如下所示(清单 3-1 )。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Listing 3-1</title>
</head>
<body>
    <nav>

        <ul>
            <li ><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>

    </nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 3-1Starting with a nav Element and List of Menu Items

将前面的代码保存到文件index.html中，并在浏览器上加载页面。注意引用的stylesheets/main.css暂时不包含任何东西。但是创建这个文件以便您的页面可以找到它。

您将看到以下内容(图 3-7 )。

img/497763_1_En_3_Fig7_HTML.jpg

图 3-7

有导航栏和菜单项但没有样式的页面

我想这是意料之中的。body元素只包含一个块元素nav和一个带有菜单选项的ul。注意，我们使用语义 HTML5 元素nav，而不仅仅是一个div。

上课了`nav`

您将首先在保存菜单选项的ul元素上添加类nav。这将从列表中删除项目符号。进行以下更改。而不是<ul>,写<ul class="nav">。保存文件并重新加载页面。您将看到以下内容(图 3-8 )。

img/497763_1_En_3_Fig8_HTML.jpg

图 3-8

在ul元素上添加了类nav

导航项目和导航链接

现在让我们在菜单项周围留出一些空间，因为现在它们是一个紧挨着一个的。

为了实现这一点，您将在li元素上添加类nav-item，在锚a元素上添加类nav-link。阅读清单 3-2 ，看看你的 HTML 页面的当前状态应该是怎样的。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Listing 3-2</title>

</head>
<body>
    <nav>

        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#about">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#contact">Contact</a>
            </li>
        </ul>

    </nav>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 3-2Menu Items on the Same Line, One Separate from the Other

如果您在浏览器上加载前面的页面，您将看到以下内容(图 3-9 )。

img/497763_1_En_3_Fig9_HTML.jpg

图 3-9

菜单项分开

折叠和展开

为了使菜单项列表可折叠，也就是说，在小设备上被替换为汉堡包图标，当点击时，将获得菜单选项，您需要在nav元素上添加一个特殊的类，并且您需要用特殊的类将可折叠/可展开的内容包装到一个div中，如清单 3-3 所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Listing 3-3</title>
</head>
<body>
    <nav class="navbar-expand-lg">

        <div class="collapse navbar-collapse">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>

    </nav>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 3-3Make Menu Options Collapse and Expand

为了使菜单选项折叠和展开，您所做的工作如下:

您已经在nav元素上添加了类navbar-expand-lg。这指示浏览器在lg断点处展开内容，即显示大于或等于 992 像素的内容。显然，如果您希望菜单扩展为宽度为> =768px 的显示，您可以使用另一个断点，例如md断点。
您已经用类collapse和navbar-collapse将ul元素包装成了一个div元素。这使得浏览器知道它需要折叠和展开哪些内容。

如果你将新的 HTML 内容加载到你的浏览器中，并将像素宽度设置为 991px，那么你会看到一个如下图所示的空白页(图 3-10 )。

img/497763_1_En_3_Fig10_HTML.jpg

图 3-10

宽度小于 992 像素的空白页

但是，如果您扩展到 992px，那么您会看到菜单选项再次出现(图 3-11 )。

img/497763_1_En_3_Fig11_HTML.jpg

图 3-11

菜单选项出现在 992px 上

品牌链接

如果你回过头再看最后的结果，你会看到有带文本John Woo的链接，当页面缩小到移动大小时没有隐藏。它总是可见的，它应该是一个将用户带到网站主页的链接。它不是菜单项列表的一部分。

让我们把它放在可折叠的div之上，但是仍然在nav元素之内(列表 3-4 )。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Listing 3-4</title>
</head>
<body>
    <nav class="navbar-expand-lg">

        <a href="#">John Woo</a>

        <div class="collapse navbar-collapse">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>

    </nav>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 3-4Add the Link That Would Take the User to the Home Page

如果您保存前面的代码并重新加载您的页面，您将在左侧看到John Woo链接，如果您缩小页面，它仍然可见，不会像菜单选项一样消失(图 3-12 )。

img/497763_1_En_3_Fig12_HTML.jpg

图 3-12

品牌链接独立于菜单选项

让品牌链接突出

左上角的品牌链接需要和菜单在同一层；它需要突出一点。让我们这样做吧

将类navbar添加到nav包装元素
将类navbar-brand添加到锚元素

Caution

nav包装元素上的navbar类对于导航栏的整体风格至关重要，而不仅仅是品牌链接。

清单 3-5 是你需要在你的 HTML 页面中拥有的，以使这个工作。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Listing 3-5</title>

</head>
<body>
    <nav class="navbar navbar-expand-lg">

        <a class="navbar-brand" href="#">John Woo</a>

        <div class="collapse navbar-collapse">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>

    </nav>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 3-5Brand Link on the Same Line and Standing Out

如果您在浏览器上加载前面的 HTML 页面，您将看到图 3-13 所示的内容。

img/497763_1_En_3_Fig13_HTML.jpg

图 3-13

左侧突出的品牌链接

给你的导航条添加一些颜色

让我们给你的导航条添加一些颜色。为了做到这一点，你必须

在nav元素中使用navbar-dark或navbar-light类之一。
将它与背景颜色实用程序类结合起来。

前者主要处理字体颜色，而后者处理背景颜色。通常你想将*-dark类与深色背景色结合，将*-light类与浅色背景色结合。

背景颜色实用程序在图 3-14 中列出。

img/497763_1_En_3_Fig14_HTML.jpg

图 3-14

背景颜色实用程序类

Caution

颜色类navbar-dark和navbar-light被设计成期望ul元素拥有类navbar-nav。所以我们也要加上这个。

在清单 3-6 中，我们应用了bg-dark背景颜色工具类，结合了导航栏的navbar-dark配色方案。我们还将类navbar-nav添加到ul元素中。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Listing 3-6</title>

</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

        <a class="navbar-brand" href="#">John Woo</a>

        <div class="collapse navbar-collapse">
            <ul class="navbar-nav nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>

    </nav>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 3-6Coloring the Navigation Bar

如果您在浏览器上加载前面的 HTML 页面，您将看到图 3-15 所示的内容。

img/497763_1_En_3_Fig15_HTML.jpg

图 3-15

给导航栏着色

另外，将鼠标指针悬停在菜单选项上。你会看到链接变得越来越轻。

在小型设备上添加按钮以展开菜单选项

让我们添加一个按钮。这将被点击以展开小型设备上的菜单选项。参见清单 3-7 。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Listing 3-7</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

        <a class="navbar-brand" href="#">John Woo</a>

        <button type="button">
        </button>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>

    </nav>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 3-7Add a Button That Will Toggle the Menu On and Off on Small Devices

您已经将按钮添加为品牌锚的同级，但是在它之后。如果您在浏览器上加载该 HTML 页面，您将看到以下内容(图 3-16 )。

img/497763_1_En_3_Fig16_HTML.jpg

图 3-16

打开和关闭菜单的非样式按钮

这太糟糕了。确实如此。但这是一个开始。

使按钮只出现在小型设备上

目前，按钮的问题是它总是出现。您希望它只出现在宽度小于您在nav元素上设置的扩展断点的设备上。您设置的断点是lg，这意味着您希望按钮出现在宽度为< 992px 的显示器上。

为了做到这一点，您可以添加类navbar-toggler。就这么办吧。参见清单 3-8 。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Listing 3-8</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

        <a class="navbar-brand" href="#">John Woo</a>

        <button type="button" class="navbar-toggler">
        </button>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>

    </nav>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 3-8Make the Button Appear Only on Widths Below the Expanded Breakpoint

现在，当您的显示器> =992px 时，该按钮不会出现(图 3-17 )。

img/497763_1_En_3_Fig17_HTML.jpg

图 3-17

菜单可见；用于切换的按钮不可见(> =992px)

当你缩小 1 个像素，到 991px，那么你会看到菜单消失，按钮出现(图 3-18 )。

img/497763_1_En_3_Fig18_HTML.jpg

图 3-18

菜单隐藏，但按钮存在(< 992 像素)

按钮以一种很难看到的方式出现。这是固定的下一步。

创建汉堡图标

这个按钮在小设备上看起来不太好，这是因为它里面没有实际的内容。为了创建汉堡的视觉图标，Twitter Bootstrap 为您提供了类navbar-toggler-icon。您需要将它应用到button元素中的span元素上。参见清单 3-9 。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Listing 3-9</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

        <a class="navbar-brand" href="#">John Woo</a>

        <button type="button" class="navbar-toggler">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>

    </nav>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 3-9Creating the Hamburger Icon

如果在宽度为 991 像素的显示器上加载前面的 HTML 页面，您将看到以下内容(图 3-19 )。

img/497763_1_En_3_Fig19_HTML.jpg

图 3-19

汉堡图标现在出现

向按钮添加行为

如果你试着点击汉堡包按钮，什么也不会发生。您现在需要向按钮添加行为。单击该按钮时，菜单选项会展开。您将通过向button元素添加两个data-*属性来实现这一点:

data-toggle="collapse"，它告诉 Twitter Bootstrap 这个按钮用于折叠/展开 HTML 文档的特定区域
data-target="#navbar"，它告诉 Twitter Bootstrap 需要折叠/展开的特定区域是用 CSS 选择器#navbar选择的区域。当然，由于在您的 HTML 文档中没有这样的元素(id 为navbar)，但是您想要折叠/展开的元素是保存菜单项列表的容器，您将向这个特定的div添加值为navbar的id属性。让我们这样做(清单 3-10 )。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Listing 3-10</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

        <a class="navbar-brand" href="#">John Woo</a>

        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>

    </nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 3-10Make the Button Toggle the Menu

如果您保存前面的内容并在浏览器上加载页面，您现在将会看到该按钮可以打开和关闭菜单。在图 3-20 中，我展示了菜单展开后的样子。

img/497763_1_En_3_Fig20_HTML.jpg

图 3-20

单击按钮后展开的菜单

对我们的导航栏的最后润色

fixed-top on nav元素将固定导航栏在页面顶部的位置。
您还将添加一些元素和属性，以使整个导航栏准备好用于辅助技术，例如，屏幕阅读器。
您还将把类active添加到第一个菜单项中，以表明您位于该链接所对应的页面上。

这是你的页面的最终版本，导航栏已经准备好了(清单 3-11 )。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Listing 3-11</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">John Woo</a>

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

        <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 3-11Final HTML Page

如果保存前面的内容并在 992 像素宽的显示器上加载页面，您将看到图 3-21 。

img/497763_1_En_3_Fig21_HTML.jpg

图 3-21

992px 上带有导航栏的最终页面

你的导航栏工作得很好，你没有写一行 CSS 或 JavaScript 代码。是不是很神奇？这都要感谢 Twitter Bootstrap。

添加主要内容

您已经添加/创建了导航栏。现在让我们添加页面的主要内容(清单 3-12 )。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Listing 3-12</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">John Woo</a>

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

        <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container">

        <h1>John Woo Portfolio</h1>
        <p>Full-Stack Web Developer that can turn your ideas to fantastic responsive Web applications</p>

    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 3-12We Add the Main Content

您已经在nav元素下面添加了一个带有类container的div。在这个新的div中，您添加了一个h1和一个p元素，其中包含一些内容。

让我们保存内容并在浏览器上加载页面。您将看到以下内容(图 3-22 )。

img/497763_1_En_3_Fig22_HTML.jpg

图 3-22

隐藏在顶部导航栏后面的主要内容

我猜你能看出问题所在。h1标题隐藏在顶部导航栏的后面。

为了解决这个问题，我们必须添加一些自定义的 CSS。你将不得不要求body把它的实际内容放在顶部以下很多像素的位置，就像导航条的高度一样。图 3-23 描述了如何在开发者工具的帮助下找出顶部导航栏的高度。

img/497763_1_En_3_Fig23_HTML.jpg

图 3-23

计算顶部导航栏的高度

从开发者工具中可以看到，顶部导航栏的高度是 56px，通过添加顶部和底部填充和内容高度计算得出。

有了 56px，让我们在stylesheets/main.css文件中添加一些内容(列出 3-13 )。

body {
    padding-top: 56px;
}

Listing 3-13Content of the main.css File

现在，如果你再次加载你的页面(确保它引用了stylesheets/main.css)，它将看起来如下(图 3-24 )。

img/497763_1_En_3_Fig24_HTML.jpg

图 3-24

h1 现在可见

突出段落内容

与原网站有一些小的不同。一种是段落内容是普通的、正常大小的文本。你想让它突出。您将为此使用类lead(再次由 Twitter Bootstrap 提供给我们)。

让p元素拥有那个类(清单 3-14 )。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Listing 3-14</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">John Woo</a>

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

        <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container">

        <h1>John Woo Portfolio</h1>
        <p class="lead">Full-Stack Web Developer that can turn your ideas to fantastic responsive Web applications</p>

    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 3-14Make the Paragraph Stand Out

如果您保存并再次加载您的页面，您将会看到图 3-25 。

img/497763_1_En_3_Fig25_HTML.jpg

图 3-25

段落突出

将导航栏内容与主页内容对齐

到目前为止，一切顺利，但是还有一个问题需要解决。导航栏的内容与页面的主要内容不一致。见图 3-26 中的问题。

img/497763_1_En_3_Fig26_HTML.jpg

图 3-26

导航栏内容与主页内容不对齐

您可以通过用类container将导航栏内容包装到一个div中来解决这个问题，就像您对页面主要内容所做的那样(清单 3-15 )。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Listing 3-15</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">John Woo</a>

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

            <div class="collapse navbar-collapse" id="navbar">
                <ul class="nav navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">About</a>

                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">

        <h1>John Woo Portfolio</h1>
        <p class="lead">Full-Stack Web Developer that can turn your ideas to fantastic responsive Web applications</p>

    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 3-15Wrap Nav Bar Content into a Container

如果您在浏览器上保存并加载该页面，您将看到以下内容(图 3-27 )。

img/497763_1_En_3_Fig27_HTML.jpg

图 3-27

导航栏内容与页面主要内容对齐

干得好！这与您想要构建的原始页面相匹配。

结束语

您已经创建了一个具有响应导航栏的网站，而没有编写任何 CSS 代码。Twitter Bootstrap 为你提供了一切。您只需要使用正确的类(在一种情况下，使用两个data-*属性)。

任务和测验

TASK DETAILS

请注意以下事项:
1. 主要内容要居中。
2. 主要内容上方和导航栏下方有大量空白。确保你的页面上有相同的内容。
3. 导航栏应该有反应，当你在小显示器上加载你的页面时，菜单项应该是隐藏的。在它们的位置，应该显示一个汉堡包图标。单击图标时，将展开带有菜单选项的列表。
You need to implement a web page with a responsive navigation bar, like the following (Figure 3-28).

图 3-28

带有导航栏的任务项目

祝你好运！

关键要点

恭喜你！现在，您知道了如何实现一个响应式导航栏。以下是你学到的一些重要东西:

如何实现一个带有菜单选项的导航栏，这些菜单选项在小型设备上是隐藏的，在大型设备上是可见的。
对于小型设备，您实现了一个按钮，单击该按钮可以打开/关闭带有选项的菜单。
您还了解了如何给导航栏着色以及如何定位它。
您已经学习了如何将内容放在主页上，而不被顶部导航栏隐藏。
你已经学会了如何让一个段落引人注目。

在下一章，你将会熟悉最流行的 Twitter 引导组件，比如按钮、徽章、标签等等。

四、主题参考：第一部分

在前一章中，您已经创建了一个小型的 Twitter Bootstrap 项目。现在，您将创建一个引用一些最常用的 Twitter 引导组件的页面。

在这个主题参考项目的第一部分，你将学习如何在导航栏中创建下拉菜单(图 4-1 )。

img/497763_1_En_4_Fig1_HTML.jpg

图 4-1

导航栏中的下拉菜单

您将学习如何创建突出的文本区域，称为大屏幕(图 4-2 )。

img/497763_1_En_4_Fig2_HTML.jpg

图 4-2

大屏幕示例

你将学习如何快速创建好看的按钮，如下所示(图 4-3

img/497763_1_En_4_Fig3_HTML.jpg

图 4-3

按钮示例

以及如图 4-4 所示的表格。

img/497763_1_En_4_Fig4_HTML.jpg

图 4-4

表格示例

您还将学习如何创建好看的标签和标记(图 4-5

img/497763_1_En_4_Fig5_HTML.jpg

图 4-5

标签示例

以及徽章(图 4-6 )。

img/497763_1_En_4_Fig6_HTML.jpg

图 4-6

徽章示例

在主题参考项目的第二部分中，您将学习如何在选项卡下对信息进行分组(图 4-7 )。

img/497763_1_En_4_Fig7_HTML.jpg

图 4-7

制表符示例

您将学习如何创建警报(图 4-8

img/497763_1_En_4_Fig8_HTML.jpg

图 4-8

警报示例

还有好看的进度条(图 4-9 )。

img/497763_1_En_4_Fig9_HTML.jpg

图 4-9

进度条示例

您将学习如何创建具有突出标题和独立正文的卡片(图 4-10 )。

img/497763_1_En_4_Fig10_HTML.jpg

图 4-10

卡片示例

最后，您将学习如何创建令人印象深刻的图像旋转木马。

在第二部分结束时，您将被要求创建一个页面，该页面要求您使用前面的大部分组件(图 4-11 )。

img/497763_1_En_4_Fig11_HTML.jpg

图 4-11

包含各种元素的 Twitter 引导示例页面

学习目标

这是您将在第一部分学习的内容列表:

了解如何在导航栏中添加下拉菜单。
了解各种下拉菜单组件和类。
了解一下大屏幕。
了解页眉。
了解按钮样式。
了解如何设置表格样式。
了解如何创建标签和标记。

介绍

您将继续处理 Twitter Bootstrap 项目，现在您将构建一个项目，作为对各种 Twitter Bootstrap 组件的引用。

我们开始吧。

带有导航栏的基本引导页面

您从带有导航栏的基本引导页面开始，就像我们在上一章中构建的那样。参见清单 4-1 。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Twitter Bootstrap Reference Page</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">Bootstrap Ref. Page</a>

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

            <div class="collapse navbar-collapse" id="navbar">
                <ul class="nav navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 4-1Start with a Navigation Bar

确保您的stylesheets/main.css文件包含必要的主体填充，这将允许页面的主要内容显示在导航栏下方(清单 4-2 )。

body {
    padding-top: 56px;
}

Listing 4-2stylesheets/main.css for Listing 4-1

如果您保存前面的内容并在浏览器上加载页面，您将看到以下内容(图 4-12 )。

img/497763_1_En_4_Fig12_HTML.jpg

图 4-12

起始页

添加下拉菜单

现在你将学习如何添加一个下拉菜单，如下所示(图 4-13 )。

img/497763_1_En_4_Fig13_HTML.jpg

图 4-13

带有下拉菜单的页面

这很容易。必须在菜单项目列表中添加额外的li项目。这个新的li项目需要包含另一个列表，这将是下拉菜单中的选项列表，如下所示(列表 4-3 )。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Twitter Bootstrap Reference Page</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">Bootstrap Ref. Page</a>

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

            <div class="collapse navbar-collapse" id="navbar">
                <ul class="nav navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a>
                    </li>

                    <!-- Drop down Menu -->
                    <li class="nav-item dropdown">
                        <a href="#"
                           class="nav-link dropdown-toggle"
                           data-toggle="dropdown">
                            Dropdown <span class="caret"></span>
                        </a>
                        <div class="dropdown-menu">
                            <a href="#" class="dropdown-item">Action</a>
                            <a href="#" class="dropdown-item">Another action</a>
                            <a href="#" class="dropdown-item">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <div class="dropdown-header">Nav header</div>
                            <a href="#" class="dropdown-item">Separated link</a>
                            <a href="#" class="dropdown-item">One more separated link</a>

                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 4-3Dropdown Menu in the Navigation Bar

如果您保存前面的代码并在浏览器上加载页面，您将在最右边看到新的下拉菜单。

让我们对用于构建下拉菜单的代码做一些说明(清单 4-4 )。

将作为下拉菜单的列表项(li)需要有类dropdown。
下拉列表项文本，在我们的例子中是Dropdown，需要被包装到一个锚< a> HTML 元素中。这将使指针改变，当用户悬停在它上面。请注意，锚点需要具有与dropdown相等的dropdown-toggle类和data-toggle属性。
下拉菜单的选项列表可以在div中给出。
div需要有类dropdown-menu。
每个菜单选项都有一个锚a，锚的类别是dropdown-item。
如果你想在菜单项之间创建一条线作为分隔线，你可以在类divider中使用一个特殊的空div。
你也可以使用另一个特殊的div作为子菜单标题，它实际上并不是用户选项的一部分，也就是说，不能点击和选择。如果 div 有类dropdown-header，就可以做到这一点。

  <!-- Drop down Menu -->
  <li class="nav-item dropdown">
    <a href="#"
      class="nav-link dropdown-toggle"
      data-toggle="dropdown">
      Dropdown
    </a>
    <div class="dropdown-menu">
      <a href="#" class="dropdown-item">Action</a>
      <a href="#" class="dropdown-item">Another action</a>
      <a href="#" class="dropdown-item">Something else here</a>
      <div class="dropdown-divider"></div>
      <div class="dropdown-header">Nav header</div>
      <a href="#" class="dropdown-item">Separated link</a>
      <a href="#" class="dropdown-item">One more separated link</a>
    </div>
  </li>

Listing 4-4Looking into the Details of the Dropdown Menu

（电视机的）超大屏幕

Twitter Bootstrap 允许你创建超大屏幕，用很大的字体显示信息、标题或两者。让我们这样做:

在nav之后，您将创建一个.container div来包含页面的内容。
您创建的第一个东西是一个带有类.jumbotron的 div。

让我们来看看清单 4-5 中带有大屏幕的页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Twitter Bootstrap Reference Page</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">Bootstrap Ref. Page</a>

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

            <div class="collapse navbar-collapse" id="navbar">
                <ul class="nav navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a>
                    </li>

                    <!-- Drop down Menu -->
                    <li class="nav-item dropdown">
                        <a href="#"
                           class="nav-link dropdown-toggle"
                           data-toggle="dropdown">
                            Dropdown
                        </a>
                        <div class="dropdown-menu">
                            <a href="#" class="dropdown-item">Action</a>
                            <a href="#" class="dropdown-item">Another action</a>
                            <a href="#" class="dropdown-item">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <div class="dropdown-header">Nav header</div>
                            <a href="#" class="dropdown-item">Separated link</a>
                            <a href="#" class="dropdown-item">One more separated link</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- main content container -->
    <div class="container">
        <div class="jumbotron">
            <h1>Jumbotron</h1>
            <p class="lead">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
    <!-- end of main content container -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 4-5Page with Jumbotron

在您将该页面保存并加载到浏览器之前，请确保您的stylesheets/main.css文件包含以下内容(列表 4-6 )。

body {
    padding-top: 70px;
          padding-bottom: 70px;
}

Listing 4-6CSS File for Listing 4-5

如果您这样做并保存您的页面，您将在浏览器上看到以下内容(图 4-14 )。

img/497763_1_En_4_Fig14_HTML.jpg

图 4-14

带有标题和引导段落的大屏幕

请注意，导航栏底部和大屏幕顶部之间的空间是由main.css文件中的padding-top规则创建的。

这里的方法非常简单。我们使用类jumbotron来表示div。我们也使用标题h1作为大屏幕内的标题文本。

最后，在前一章中，我们已经看到了应用在p元素上的类lead使文本突出。

带水平线的页眉:页眉

有时候你想创建一个标题，也就是一段像标题一样突出的文本，例如h1或h2，在它下面是一条水平线。

您可以在您的h1元素下面的hr元素的帮助下快速完成这项工作。添加以下内容作为主内容容器中的最后一个元素(清单 4-7 )。

<h1>Page Header</h1>
<hr class="my-4">

Listing 4-7How to Have a Header with a Horizontal Line Below It

如果你保存并重新加载你的页面，你应该会得到如下的结果(图 4-15 )。

img/497763_1_En_4_Fig15_HTML.jpg

图 4-15

带水平线的页眉

您已经在类my-4中使用了hr元素。这门课是怎么回事？这是 Bootstrap 调用的实用程序类之一。这个特殊的元素属于间距类别，它与它所附着的元素的边距和填充有关。特别

前缀m代表边距。因此，在您的示例中，您对hr元素应用了一些边距。
y指的是垂直 y 轴。本质上，它是关于元素的顶部和底部。因此，在您的示例中，您对hr元素应用了一些顶部和底部边距。
数字4是尺寸。尺寸可以是一个
- 0:将边距或填充的大小设置为 0
- 1:将尺寸设置为0.25乘以$spacer尺寸($spacer * 0.25)
- 2:将尺寸设置为0.5乘以$spacer尺寸($spacer * 0.5)
- 3:将尺寸设置为等于$spacer尺寸
- 4:将尺寸设置为1.5乘以$spacer尺寸($spacer * 1.5)
- 5:将尺寸设置为3乘以$spacer尺寸($spacer * 3)
- Auto:自动设置尺寸(仅适用于页边距)

好的！坚持住。什么是$spacer？$spacer是一个 Sass(语法超棒的样式表)变量。注意 Bootstrap 是用 Sass 编写的，然后被编译成实际的 CSS。$spacer变量的默认值是1rem。

如果这太复杂，除了玩和尝试之外，没有其他方法来澄清它。还有，你最好的朋友是你浏览器的开发者工具。

例如，在大屏幕页面上打开开发者工具，找到元素hr。看看上边距和下边距是如何设置的，这要感谢附加在它上面的my-4类(图 4-16 )。

img/497763_1_En_4_Fig16_HTML.jpg

图 4-16

24px 的利润顶部和底部，感谢my-4

为什么是24px？这是因为my-4上的4被解释为$spacer * 1.5，又因为$spacer是1rem，我们最后得到1.5rem。您还可以看到，如果您将开发人员工具的选定选项卡切换到样式，而不是计算的(图 4-17 )。

img/497763_1_En_4_Fig18_HTML.jpg

图 4-18

根元素的字体大小为 16px

img/497763_1_En_4_Fig17_HTML.jpg

图 4-17

my-4 提供 1.5 雷姆的顶部和底部边距

还有为什么1.5rem计算出来是24px？rem是一个 CSS 单元，它计算一个元素相对于页面根元素的font-size的大小，即html元素的大小。如果您使用开发工具检查html元素的font-size属性，您将看到它的大小等于16px(图 4-18 )。

因此，16px * 1.5计算为24px。

Note

我做了一个小小的偏离来讨论 CSS 单元以及它们如何在 HTML 文档中使用。这不是 Twitter Bootstrap 的一部分。你可以在我的书掌握 HTML & CSS 中了解更多关于 HTML 和 CSS 的知识。

小跟班

现在，您将学习如何创建按钮:

所有按钮都应该有类btn。
然后，您可以应用一个处理按钮颜色的类:
1. btn-default
2. btn-primary
3. btn-secondary
4. btn-success
5. btn-danger
6. btn-warning
7. btn-info
8. btn-light
9. btn-dark
除了颜色，你还可以应用一个类来把一个按钮变成一个链接:btn-link。
或者您可以在类名中插入*-outline-*这个词，以便为透明的背景色按钮设计一个边框，例如btn-outline-primary。
然后，您可以使用相应的类来指定按钮的大小:
btn-lg对于大按钮。
不要为正常大小的按钮指定类。
btn-sm用于小按钮。
btn-block适用于跨越整个可用宽度的区块。

让我们看看实际情况。清单 4-8 是你的页面现在应该有的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Twitter Bootstrap Reference Page</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">Bootstrap Ref. Page</a>

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

            <div class="collapse navbar-collapse" id="navbar">
                <ul class="nav navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a>
                    </li>

                    <!-- Drop down Menu -->
                    <li class="nav-item dropdown">
                        <a href="#"
                           class="nav-link dropdown-toggle"
                           data-toggle="dropdown">
                            Dropdown
                        </a>
                        <div class="dropdown-menu">
                            <a href="#" class="dropdown-item">Action</a>
                            <a href="#" class="dropdown-item">Another action</a>
                            <a href="#" class="dropdown-item">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <div class="dropdown-header">Nav header</div>
                            <a href="#" class="dropdown-item">Separated link</a>
                            <a href="#" class="dropdown-item">One more separated link</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- main content container -->
    <div class="container">
        <div class="jumbotron">
            <p class="lead">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>

        <h1>Buttons</h1>
        <hr class="my-4">

        <h2>Small Sizes</h2>
        <p>
            <button type="button" class="btn btn-sm btn-primary">btn btn-sm btn-primary</button>
            <button type="button" class="btn btn-sm btn-secondary">btn btn-sm btn-secondary</button>
            <button type="button" class="btn btn-sm btn-success">btn btn-sm btn-success</button>
            <button type="button" class="btn btn-sm btn-danger">btn btn-sm btn-danger</button>
            <button type="button" class="btn btn-sm btn-warning">btn btn-sm btn-warning</button>
            <button type="button" class="btn btn-sm btn-info">btn btn-sm btn-info</button>
            <button type="button" class="btn btn-sm btn-light">btn btn-sm btn-light</button>
            <button type="button" class="btn btn-sm btn-dark">btn btn-sm btn-dark</button>
            <button type="button" class="btn btn-sm btn-link">btn btn-sm btn-link</button>
        </p>

        <h2>Normal Sizes</h2>
        <p>
            <button type="button" class="btn btn-primary">btn btn-primary</button>
            <button type="button" class="btn btn-secondary">btn btn-secondary</button>
            <button type="button" class="btn btn-success">btn btn-success</button>
            <button type="button" class="btn btn-danger">btn btn-danger</button>
            <button type="button" class="btn btn-warning">btn btn-warning</button>
            <button type="button" class="btn btn-info">btn btn-info</button>
            <button type="button" class="btn btn-light">btn btn-light</button>
            <button type="button" class="btn btn-dark">btn btn-dark</button>
            <button type="button" class="btn btn-link">btn btn-link</button>
        </p>

        <h2>Large Sizes</h2>
        <p>
            <button type="button" class="btn btn-lg btn-primary">btn btn-lg btn-primary</button>
            <button type="button" class="btn btn-lg btn-secondary">btn btn-lg btn-secondary</button>
            <button type="button" class="btn btn-lg btn-success">btn btn-lg btn-success</button>
            <button type="button" class="btn btn-lg btn-danger">btn btn-lg btn-danger</button>
            <button type="button" class="btn btn-lg btn-warning">btn btn-lg btn-warning</button>
            <button type="button" class="btn btn-lg btn-info">btn btn-lg btn-info</button>
            <button type="button" class="btn btn-lg btn-light">btn btn-lg btn-light</button>
            <button type="button" class="btn btn-lg btn-dark">btn btn-lg btn-dark</button>
            <button type="button" class="btn btn-lg btn-link">btn btn-lg btn-link</button>
        </p>

        <h2>Block Sizes</h2>
        <p>
            <button type="button" class="btn btn-block btn-primary">btn btn-block btn-primary</button>
            <button type="button" class="btn btn-block btn-secondary">btn btn-block btn-secondary</button>
            <button type="button" class="btn btn-block btn-success">btn btn-block btn-success</button>
            <button type="button" class="btn btn-block btn-danger">btn btn-block btn-danger</button>
            <button type="button" class="btn btn-block btn-warning">btn btn-block btn-warning</button>
            <button type="button" class="btn btn-block btn-info">btn btn-block btn-info</button>
            <button type="button" class="btn btn-block btn-light">btn btn-block btn-light</button>
            <button type="button" class="btn btn-block btn-dark">btn btn-block btn-dark</button>
            <button type="button" class="btn btn-block btn-link">btn btn-block btn-link</button>
        </p>

        <h2>Outline buttons (Normal Sizes)</h2>
        <p>
            <button type="button" class="btn btn-outline-primary">btn btn-outline-primary</button>
            <button type="button" class="btn btn-outline-secondary">btn btn-outline-secondary</button>
            <button type="button" class="btn btn-outline-success">btn btn-outline-success</button>
            <button type="button" class="btn btn-outline-danger">btn btn-outline-danger</button>
            <button type="button" class="btn btn-outline-warning">btn btn-outline-warning</button>
            <button type="button" class="btn btn-outline-info">btn btn-outline-info</button>
            <button type="button" class="btn btn-outline-light">btn btn-outline-light</button>
            <button type="button" class="btn btn-outline-dark">btn btn-outline-dark</button>
            <button type="button" class="btn btn-outline-link">btn btn-outline-link</button>
        </p>
    </div>
    <!-- end of main content container -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 4-8Page Demonstrating Buttons

正如您在前面的代码中看到的，这是一系列 header h2和p元素，它们适用于我前面谈到的所有类的组合。

保存文件并在浏览器上重新加载页面。你会看到类似下面的东西(图 4-19 )。

img/497763_1_En_4_Fig19_HTML.jpg

图 4-19

页面演示按钮

在这个页面上，您可以看到每个按钮是如何根据您应用的 Twitter Bootstrap 按钮类显示的。这真的令人印象深刻，因为没有一行 CSS 代码，你就可以免费获得如此多的功能。你只需要学习各种 Twitter 引导类。

桌子

你已经学习了表格以及如何用它们来显示表格数据(从我的【HTML 大师& CSS 的书中)。Twitter Bootstrap 附带了一些关于如何设计表格样式的有用类。让我们看看怎么做。

基本引导表

让我们从一个没有应用任何 Twitter 引导类的表开始。所以它只有默认的样式。

您继续在主容器的末尾追加内容。然而，清单 4-9 有完整的 HTML 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css">

    <title>Twitter Bootstrap Reference Page</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">Bootstrap Ref. Page</a>

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

            <div class="collapse navbar-collapse" id="navbar">
                <ul class="nav navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a>
                    </li>

                    <!-- Drop down Menu -->
                    <li class="nav-item dropdown">
                        <a href="#"
                           class="nav-link dropdown-toggle"
                           data-toggle="dropdown">
                            Dropdown
                        </a>
                        <div class="dropdown-menu">
                            <a href="#" class="dropdown-item">Action</a>
                            <a href="#" class="dropdown-item">Another action</a>
                            <a href="#" class="dropdown-item">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <div class="dropdown-header">Nav header</div>
                            <a href="#" class="dropdown-item">Separated link</a>
                            <a href="#" class="dropdown-item">One more separated link</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- main content container -->
    <div class="container">
        <div class="jumbotron">
            <p class="lead">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>

        <h1>Buttons</h1>
        <hr class="my-4">

        <h2>Small Sizes</h2>
        <p>
            <button type="button" class="btn btn-sm btn-primary">btn btn-sm btn-primary</button>
            <button type="button" class="btn btn-sm btn-secondary">btn btn-sm btn-secondary</button>
            <button type="button" class="btn btn-sm btn-success">btn btn-sm btn-success</button>
            <button type="button" class="btn btn-sm btn-danger">btn btn-sm btn-danger</button>
            <button type="button" class="btn btn-sm btn-warning">btn btn-sm btn-warning</button>
            <button type="button" class="btn btn-sm btn-info">btn btn-sm btn-info</button>
            <button type="button" class="btn btn-sm btn-light">btn btn-sm btn-light</button>
            <button type="button" class="btn btn-sm btn-dark">btn btn-sm btn-dark</button>
            <button type="button" class="btn btn-sm btn-link">btn btn-sm btn-link</button>
        </p>

        <h2>Normal Sizes</h2>
        <p>
            <button type="button" class="btn btn-primary">btn btn-primary</button>
            <button type="button" class="btn btn-secondary">btn btn-secondary</button>
            <button type="button" class="btn btn-success">btn btn-success</button>
            <button type="button" class="btn btn-danger">btn btn-danger</button>
            <button type="button" class="btn btn-warning">btn btn-warning</button>
            <button type="button" class="btn btn-info">btn btn-info</button>
            <button type="button" class="btn btn-light">btn btn-light</button>
            <button type="button" class="btn btn-dark">btn btn-dark</button>
            <button type="button" class="btn btn-link">btn btn-link</button>
        </p>

        <h2>Large Sizes</h2>
        <p>
            <button type="button" class="btn btn-lg btn-primary">btn btn-lg btn-primary</button>
            <button type="button" class="btn btn-lg btn-secondary">btn btn-lg btn-secondary</button>
            <button type="button" class="btn btn-lg btn-success">btn btn-lg btn-success</button>
            <button type="button" class="btn btn-lg btn-danger">btn btn-lg btn-danger</button>
            <button type="button" class="btn btn-lg btn-warning">btn btn-lg btn-warning</button>
            <button type="button" class="btn btn-lg btn-info">btn btn-lg btn-info</button>
            <button type="button" class="btn btn-lg btn-light">btn btn-lg btn-light</button>
            <button type="button" class="btn btn-lg btn-dark">btn btn-lg btn-dark</button>
            <button type="button" class="btn btn-lg btn-link">btn btn-lg btn-link</button>
        </p>

        <h2>Block Sizes</h2>
        <p>
            <button type="button" class="btn btn-block btn-primary">btn btn-block btn-primary</button>
            <button type="button" class="btn btn-block btn-secondary">btn btn-block btn-secondary</button>
            <button type="button" class="btn btn-block btn-success">btn btn-block btn-success</button>
            <button type="button" class="btn btn-block btn-danger">btn btn-block btn-danger</button>
            <button type="button" class="btn btn-block btn-warning">btn btn-block btn-warning</button>
            <button type="button" class="btn btn-block btn-info">btn btn-block btn-info</button>
            <button type="button" class="btn btn-block btn-light">btn btn-block btn-light</button>
            <button type="button" class="btn btn-block btn-dark">btn btn-block btn-dark</button>
            <button type="button" class="btn btn-block btn-link">btn btn-block btn-link</button>
        </p>

        <h2>Outline buttons (Normal Sizes)</h2>
        <p>
            <button type="button" class="btn btn-outline-primary">btn btn-outline-primary</button>
            <button type="button" class="btn btn-outline-secondary">btn btn-outline-secondary</button>
            <button type="button" class="btn btn-outline-success">btn btn-outline-success</button>
            <button type="button" class="btn btn-outline-danger">btn btn-outline-danger</button>
            <button type="button" class="btn btn-outline-warning">btn btn-outline-warning</button>
            <button type="button" class="btn btn-outline-info">btn btn-outline-info</button>
            <button type="button" class="btn btn-outline-light">btn btn-outline-light</button>
            <button type="button" class="btn btn-outline-dark">btn btn-outline-dark</button>
            <button type="button" class="btn btn-outline-link">btn btn-outline-link</button>
        </p>

        <h1>Tables</h1>
        <hr class="my-4">

        <h2>Shopping List</h2>
        <table>
            <tr><th colspan="2">Shopping List</th></tr>
            <tr><th>Item</th><th>Qt</th></tr>
            <tr><td>Cheese</td><td>1 kgr</td></tr>
            <tr><td>Rice</td><td>1.5 kgr</td></tr>
            <tr><td>Coffee</td><td>0.5 kgr</td></tr>
            <tr><td>Milk</td><td>1 ltr</td></tr>
            <tr><td>Wine</td><td>1 btl</td></tr>
        </table>

        <h2>Travel Plan</h2>
        <table>
            <tr><th colspan="2">Travel Plan</th></tr>
            <tr><th>Action</th><th>Due</th></tr>
            <tr><td>Book Ticket</td><td>Feb 20th</td></tr>
            <tr><td>Book Hotel</td><td>March 26th</td></tr>
            <tr><td>Buy Suitcase</td><td>April 20th</td></tr>
            <tr><td>Get Passport</td><td>April 30th</td></tr>
        </table>
    </div>
    <!-- end of main content container -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Listing 4-9Full HTML Code, Includes a New Table Demo

正如您在前面的代码中看到的，您只添加了两个简单的table元素。如果您保存它并重新加载页面，您将会看到以下内容(图 4-20 )。

img/497763_1_En_4_Fig20_HTML.jpg

图 4-20

没有任何额外造型的桌子

样式引导表

让我们尝试应用一些 Twitter 引导类来设计它。如果您只将类table应用于table元素，那么您不用太费力就能得到一个不错的例子。就这么办吧。而不只是

<table>

写

<table class="table">

如果你在浏览器上重新加载页面，你会看到表格显示得非常好(图 4-21 )。

img/497763_1_En_4_Fig21_HTML.jpg

图 4-21

仅包含“table”类的表

Pretty cool! Eh?

除了table类，您还可以在表上尝试更多的类。尝试将类table-striped附加到第一个表上，将类table-bordered附加到第二个表上。所以不要

<table class="table">

转到

<table class="table table-striped">

对于第一个表和

<table class="table table-bordered">

第二桌。

如果您保存并重新加载您的页面，您将看到以下内容(图 4-22 )。

img/497763_1_En_4_Fig22_HTML.jpg

图 4-22

条纹和镶边的桌子

类使表格有条纹，一行是深色背景，下一行是亮色背景。table-bordered类给表格添加边框。

你绝对可以组合表类。例如，尝试第二个表的table table-striped table-bordered。您将得到以下结果(图 4-23 )。

img/497763_1_En_4_Fig23_HTML.jpg

图 4-23

表格同时带有边框和条纹

另一个不错的表格类是类table-hover，它将突出显示鼠标悬停的行。让我们试试那个。将第一个表的类值设置为

<table class="table table-hover">

如果您在浏览器上保存并加载页面，您将只看到带有table类的表格。但是，如果您尝试将鼠标指针移到这些行上，您会看到当鼠标移到这些行上时，这些行是如何突出显示的。

另一个有用的类是table-sm，它将确保行具有相当小的高度。在第二个表和它已经拥有的其他表类上尝试一下:

<table class="table table-striped table-bordered table-sm">

如果您在浏览器上重新加载页面，您将看到以下内容(图 4-24 )。

img/497763_1_En_4_Fig24_HTML.jpg

图 4-24

小个子跟table-sm一类

如图 4-24 所示，与第一个表格的行高相比，第二个表格的精简样式的行高要小得多。

给表格行着色

此外，Twitter Bootstrap 提供了一系列对应于特定颜色的语义类。当您应用这些类时，您可以快速设置相应行(tr)或相应单元格(td或th)的背景颜色。

这些类别是

table-active
table-primary
table-secondary
table-success
table-danger
table-warning
table-info
table-light
table-dark

让我们将其中一些应用到页面上第二个表格的行中。所以第二个表格 HTML 片段变成如下(清单 4-10 )。

<table class="table table-bordered table-striped table-sm">
    <tr><th colspan="2">Travel Plan</th></tr>
    <tr class="table-active"><th>(active) Action</th><th>Due</th></tr>
    <tr class="table-success"><td>(success) Book Ticket</td><td>Feb 20th</td></tr>
    <tr class="table-info"><td>(info) Book Hotel</td><td>March 26th</td></tr>
    <tr class="table-warning"><td>(warning) Buy Suitcase</td><td>April 20th</td></tr>
    <tr class="table-danger"><td>(danger) Get Passport</td><td>April 30th</td></tr>
</table>

Listing 4-10Second Table with Various Classes at Row Level

如果您保存前面的代码并在浏览器上重新加载页面，您将看到以下内容(图 4-25 )。

img/497763_1_En_4_Fig25_HTML.jpg

图 4-25

在行级别具有不同类的表

标签和徽章

Bootstrap 允许您非常容易地创建标签和徽章。

<h1>Labels & Badges</h1>
<hr class="my-4">

<h4>
    <span class="badge badge-primary">€20.00 - Primary</span>
    <span class="badge badge-secondary">€20.00 - Secondary</span>
    <span class="badge badge-success">€20.00 - Success</span>
    <span class="badge badge-danger">€20.00 - Danger</span>
    <span class="badge badge-warning">€20.00 - Warning</span>
    <span class="badge badge-info">€20.00 - Info</span>
    <span class="badge badge-light">€20.00 - Light</span>
    <span class="badge badge-dark">€20.00 - Dark</span>
</h4>

Listing 4-11HTML Fragment That Creates Labels

保存全部内容，并在浏览器上重新加载页面。您将看到图 4-27 中描述的内容。

img/497763_1_En_4_Fig27_HTML.jpg

图 4-27

标签演示

很清楚。请注意，您将跨度包含在一个h4元素中只是为了让它们稍微大一点。

徽章

但是徽章呢？通常，你想显示一个小的或大的徽章，比如一个圆圈内的数字，来指示未读消息的数量，如图 4-28 所示。

img/497763_1_En_4_Fig28_HTML.jpg

图 4-28

徽章示例

这些与我们之前创建的标签没有什么不同。唯一的区别是它们更圆润。您可以通过在其他badge-*类旁边添加类badge-pill来实现这一点。

清单 4-12 是一个创建带有徽章的按钮的 HTML 片段。想象一个按钮，允许用户点击并进入他们的收件箱。该按钮将显示未读邮件的数量。

<button class="btn btn-light">Inbox&nbsp;<span class="badge badge-primary badge-pill">1</span></button>
<button class="btn btn-light">Inbox&nbsp;<span class="badge badge-secondary badge-pill">2</span></button>
<button class="btn btn-light">Inbox&nbsp;<span class="badge badge-success badge-pill">3</span></button>
<button class="btn btn-light">Inbox&nbsp;<span class="badge badge-danger badge-pill">4</span></button>
<button class="btn btn-light">Inbox&nbsp;<span class="badge badge-warning badge-pill">5</span></button>
<button class="btn btn-light">Inbox&nbsp;<span class="badge badge-info badge-pill">6</span></button>
<button class="btn btn-light">Inbox&nbsp;<span class="badge badge-light badge-pill">7</span></button>
<button class="btn btn-light">Inbox&nbsp;<span class="badge badge-dark badge-pill">8</span></button>

Listing 4-12Buttons with Badges

将这个 HTML 片段添加到主容器的底部，然后在浏览器上重新加载页面。您将看到带有徽章的按钮显示如下(图 4-29 )。

img/497763_1_En_4_Fig29_HTML.jpg

图 4-29

带徽章的纽扣

关键要点

带有下拉菜单列表的导航栏
各种尺寸和颜色的按钮
不同风格的桌子
标签和徽章

主题参考项目的第一部分到此结束。在下一章，项目的第二部分，您将继续学习更多关于 Twitter Bootstrap 组件的知识。

Bootstrap-实践指南-二-