Question

我正在使用Bootstrap 4创建一个网站，并希望在移动设备上更改导航栏。

Here's how I want it to look like on medium, large, xl devices (Invisible bar)

此代码：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="index.php"><img src="assets/img/logo-toitures.png" alt=""></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="index.php">Accueil</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="a_propos.php">A propos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="services.php">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="nous_joindre.php">Nous joindre</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="assets/EN/index.php">English</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

On mobile, Black background for the navbar

使用Bootstrap 4，可以添加类bg-dark和navbar-dark来获得第二张图片中所示的黑色navbar。这是我唯一要更改为黑色的东西。

  <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">

我相信jQuery是在媒体查询中添加这些类的导航栏的方法，但是我缺乏有关如何做到这一点的知识。

谢谢！

Answer 1

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

  <!-- Dont forget to add font awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <style>
    @media only screen and (max-width: 600px){
        .navbar-overlay {
        background: #333333;
        }
    }
    .navbar-overlay {
        margin-bottom: -104px; 
        z-index: 1; 
    }
    #menuBar {
    color: darkgrey !important;
    }
  </style>
</head>
<body>

<nav class="navbar navbar-expand-sm navbar-overlay navbar-inverse">
    <button  class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span id="menuBar" class="navbar-toggler-icon"><i style="font-size:24px" class="fa">&#xf0c9;</i></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
        <ul class="navbar-nav">
            <li class="nav-item">
            <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Link 3</a>
            </li>
         </ul>
    </div>
</nav>

</body>

希望这会有所帮助

bootstrap 4 + jQuery-更改手机上的背景外观

1 个答案: