Question

我有 html 代码，当我调整浏览器屏幕大小时，我遇到了一个问题，即当我点击它时，切换按钮不显示（它是透明的），导航栏项目根本不显示Screenshot of my web< /p>

<html>
    <head>
        <title>
            profile 
        </title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap CSS-->
        <link rel="stylesheet" href="../css/bootstrap/bootstrap.css">
        <!-- w3 CSS-->
        <link rel="stylesheet" href="../css/W3.css">
         <!-- profile CSS-->
         <link rel="stylesheet" href="../css/accueil.css">
        <!-- flaticon CSS-->
        <link rel="stylesheet" href="../icons/font/flaticon.css">
        <!--Scripts-->
        <!-- JQuery script-->
        <script src="../js/jQuery.js"></script>
        <!-- Bootstrap script-->
        <script src="../js/bootstrap/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <header>
            <nav class="navbar navbar-expand-md fixed-top">
                <div class="container-fluid">
                    <a class="navbar-brand" href="accueil.html">
                        <h4>LOGO</h4>
                    </a>
                    <!--Collapse button -->
                    <button type="button" class="navbar-toggler" 
                    data-bs-toggle="collapse" data-bs-target="#coll_target"
                    aria-controls="coll_target" aria-expanded="false"
                    aria-label="Toggle Navbar" >
                        <span class="navbar-toggler-icon" ></span>
                    </button>
                    <!--Collapse Div -->
                    <div class="collapse navbar-collapse" id="coll_target">
                        <div class="mx-auto"></div>
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item"><a class="nav-link"><span><i class="flaticon-ringing" style="color: white;"></i></span></a></li>
                            <li class="nav-item"><a class="nav-link"><span><i class="flaticon-email" style="color: white;"></i></span></a></li>
                            <li class="nav-item"><a class="nav-link"><span><i style="color: white;" class="flaticon-down-arrow"></i></span></a></li>
                            <li class="nav-item"><a class="nav-link"><span><i style="color: white;" class="flaticon-translation"></i></span></a></li>
                            <li class="nav-item"><a class="nav-link"><span><i class="flaticon-settings" style="color: white;"></i></span></a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
           
    </body>
</html>

Answer 1

您应该在这里阅读文档https://getbootstrap.com/docs/5.0/getting-started/introduction/

我假设你有 CSS 和 HTML 的基础知识，为了使用 Bootstrap，你首先需要将它正确地集成到你的开发环境中，要么远程加载，要么下载本地使用；

长话短说，您的页面应如下所示：

   

 <!doctype html>
        <html lang="en">
          <head>
           <!-- Required meta tags -->
            <meta charset="utf-8">
             <meta name="viewport" content="width=device-width, initial-scale=1">
              <!-- Bootstrap CSS -->
               <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
                 <title>Hello, world!</title>
                 </head>
                  <body>
        
<!---include navbar components to demonstrate what you need----->

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
            </body>
        </html>

Bootstrap 有很多响应式类可以满足您的需求

bootstrap 5 导航栏切换按钮不起作用

1 个答案: