📌  相关文章
📜  如何使用Bootstrap使可折叠按钮仅出现在移动视图中？(1)

📅  最后修改于: 2023-12-03 14:52:02.815000             🧑  作者: Mango

如何使用Bootstrap使可折叠按钮仅出现在移动视图中？

在Bootstrap中，您可以使用折叠组件来创建带有可折叠面板的响应式导航栏。但是，您可能只想在移动设备上显示这些折叠面板，而在桌面设备上隐藏它们。在这篇文章中，我们将介绍如何使用Bootstrap使可折叠按钮仅出现在移动视图中。

步骤1：添加Bootstrap文件

首先，您需要将Bootstrap文件添加到您的项目中。您可以使用Bootstrap的CDN（内容分发网络）来加载Bootstrap文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha512-y2BGy798N4Jt4ES+4Iw8t/OWoF/ZJbHv+9SjW8I1gzWrTq3BlT+jjxk/kw8dh+/YlJOLFIBnIKsI9Kzry8sa6w==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha512-5gFzJ7DyjxnKfeN/1i/tWJG8/+2+cTXVmLScjIZi5rNz5o7CrRyC6UcYY2bJi6UzeKjivL3nB3HWroX+WThmUg==" crossorigin="anonymous"></script>
步骤2：创建导航栏

接下来，我们将创建一个基本的Bootstrap导航栏，并添加一个可折叠按钮。

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="navbar-brand" href="#">My Website</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Page 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Page 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Page 3</a>
      </li>
    </ul>
  </div>
</nav>

这将创建一个带有标志和基本链接的导航栏。我们已添加一个导航栏折叠器按钮，以便在移动设备上折叠导航栏内容。但是，此按钮将在所有视图中都可见。

步骤3：使用媒体查询隐藏导航栏折叠器

为了使导航栏折叠器仅在移动设备上显示，我们可以使用媒体查询来隐藏该按钮。在以下代码中，我们将使用@media查询仅在最大宽度为768px时显示该按钮：

@media (min-width: 768px) {
  .navbar .navbar-toggler {
    display: none;
  }
}

这将在768px或更大的视图大小上隐藏导航栏折叠器按钮。

整个代码
<!DOCTYPE html>
<html>
<head>
  <title>How to use Bootstrap to show the collapsible button only on mobile view?</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha512-y2BGy798N4Jt4ES+4Iw8t/OWoF/ZJbHv+9SjW8I1gzWrTq3BlT+jjxk/kw8dh+/YlJOLFIBnIKsI9Kzry8sa6w==" crossorigin="anonymous" />
  <style>
    @media (min-width: 768px) {
      .navbar .navbar-toggler {
        display: none;
      }
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href="#">My Website</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Page 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Page 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Page 3</a>
        </li>
      </ul>
    </div>
  </nav>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha512-5gFzJ7DyjxnKfeN/1i/tWJG8/+2+cTXVmLScjIZi5rNz5o7CrRyC6UcYY2bJi6UzeKjivL3nB3HWroX+WThmUg==" crossorigin="anonymous"></script>
</body>
</html>

这将在移动设备上显示导航栏折叠器按钮，并在桌面设备上隐藏它。