Question

我一直在youtube上关于使用bootstrap制作网站的一些教程。每个视频都以导航栏开头，我并不真正理解导航栏的每个部分，所以有人可以描述这些不同概念的含义吗？

<nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mNavbar">

Answer 1

您收到了这些downvotes，因为您甚至没有尝试阅读Bootstrap文档。因为我是一个非常善良的人，我将解释这些组件。

我们遇到的第一个标记就是这一行：

<nav class="navbar navbar-inverse">

它创建了一个包含两个类的导航栏。类navbar用于导航栏的标准布局。班级navbar-inverse与navbar-default相反。这两个班是你唯一的两个选择。他们负责导航栏的设计。在这种情况下，会有一个黑暗的导航栏。

第二行是这一行：

<div class="container-fluid">

我认为你不止一次遇到过这个。它创造了一个流动的容器。你应该知道。

<div class="navbar-header">

再次成为典型班级的标准div。 navbar-header用于创建导航栏标题的布局。通常它包含品牌名称。这将用这一行完成：

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

你的最后一行有很多属性：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mNavbar">

这会创建一个非常清晰的按钮，类为navbar-toggle。它用于切换移动设备上的导航栏。数据切换使您更清楚它的作用。请注意，您需要Javascript文件才能使其正常工作。目标是用于包装ul的div的ID。

那是你所有的问题，所以那对我来说就是这样。如果您还有其他问题：

https://getbootstrap.com/docs/4.0/components/navbar/

每个部分在Navbar中做了什么？

1 个答案: