ブートストラップ4ナビゲーションバーを折りたたむ方法

ザガーノ

私は自分のプロジェクトにBootstrapWebサイトの最初のナビゲーションバーを使用しました。すべてのコードをコピーしてページに貼り付けました。ページを最小化すると、折りたたみアイコンが表示されます。ただし、クリックしても何も起こりません。何が問題ですか?

https://getbootstrap.com/docs/4.5/components/navbar/#toggler

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
ウォーミック

その前にCDNバージョンのjQueryを含める必要があります。これはブートストラップのドキュメントに記載されています。https://getbootstrap.com/docs/4.4/getting-started/download/

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ブートストラップ4のナビゲーションバーの右側にあるボタンを折りたたむ

分類Dev

ブートストラップ4-別のナビゲーション選択を上に配置して1つに折りたたむ方法

分類Dev

スクロールバーでブートストラップナビゲーションバーを折りたたむ

分類Dev

ブートストラップ-ホバーに境界線を追加するときにナビゲーションバーのバグを折りたたむ

分類Dev

カードアコーディオンでナビゲーションタブを折りたたむブートストラップ4

分類Dev

ブートストラップ42つのナビゲーションバーを1つのトグルボタンに折りたたむ

分類Dev

特定の幅でブートストラップナビゲーションバーを折りたたむ/切り替える

分類Dev

特定の解像度でブートストラップナビゲーションバーを折りたたむことはできません

分類Dev

ブートストラップ3ナビゲーションバーの折りたたみ

分類Dev

ブートストラップ3-> 5ナビゲーションバー折りたたみ可能

分類Dev

ブートストラップマルチレベル折りたたみナビゲーションバー

分類Dev

折りたたみ可能なブートストラップナビゲーションバー

分類Dev

ページ内で複数のブートストラップ折りたたみナビゲーションバーを操作する方法。

分類Dev

ブートストラップ4で折りたたまれたナビゲーションバーを閉じた後、ナビゲーションバーアイテムはしばらく表示されたままになります

分類Dev

ブートストラップ4-折りたたまれたナビゲーションバーのスタイリング

分類Dev

ブートストラップ4の積み重ねられた折りたたみ可能なナビゲーションバー

分類Dev

ブートストラップ4ナビゲーションバートグルでアイテムが折りたたまれないようにする

分類Dev

ブーストラップナビゲーションバーの折りたたみブレークポイントを変更する

分類Dev

カスタムの高さのナビゲーションバーでのブートストラップ4の折りたたみの問題

分類Dev

ブートストラップ4ナビゲーションバーの折りたたみが機能しない

分類Dev

ブートストラップナビゲーションバーは、折りたたまれたときに要素を同じ行に保つ

分類Dev

ブートストラップは、ナビゲーションバーの折りたたまれたアイテムを中央に揃えます

分類Dev

折りたたみ時にスタイリングブートストラップナビゲーションバーを発行する

分類Dev

特定の解像度からブートストラップナビゲーションを折りたたむにはどうすればよいですか?

分類Dev

ブートストラップ4:ナビゲーションバーの折りたたみ時にアクティブなナビゲーションアイテムを表示する

分類Dev

ブートストラップ4:ナビゲーションバーの折りたたみ時にアクティブなナビゲーションアイテムを表示する

分類Dev

画像を縮小する代わりに、ブートストラップ3ナビゲーションバーが2行に折りたたまれます

分類Dev

ブートストラップ4は、折りたたみ可能なナビゲーション要素と折りたたみ不可能なナビゲーション要素を組み合わせたものです

分類Dev

ブートストラップ3ナビゲーションバーが2行に折りたたまれないようにする方法

Related 関連記事

  1. 1

    ブートストラップ4のナビゲーションバーの右側にあるボタンを折りたたむ

  2. 2

    ブートストラップ4-別のナビゲーション選択を上に配置して1つに折りたたむ方法

  3. 3

    スクロールバーでブートストラップナビゲーションバーを折りたたむ

  4. 4

    ブートストラップ-ホバーに境界線を追加するときにナビゲーションバーのバグを折りたたむ

  5. 5

    カードアコーディオンでナビゲーションタブを折りたたむブートストラップ4

  6. 6

    ブートストラップ42つのナビゲーションバーを1つのトグルボタンに折りたたむ

  7. 7

    特定の幅でブートストラップナビゲーションバーを折りたたむ/切り替える

  8. 8

    特定の解像度でブートストラップナビゲーションバーを折りたたむことはできません

  9. 9

    ブートストラップ3ナビゲーションバーの折りたたみ

  10. 10

    ブートストラップ3-> 5ナビゲーションバー折りたたみ可能

  11. 11

    ブートストラップマルチレベル折りたたみナビゲーションバー

  12. 12

    折りたたみ可能なブートストラップナビゲーションバー

  13. 13

    ページ内で複数のブートストラップ折りたたみナビゲーションバーを操作する方法。

  14. 14

    ブートストラップ4で折りたたまれたナビゲーションバーを閉じた後、ナビゲーションバーアイテムはしばらく表示されたままになります

  15. 15

    ブートストラップ4-折りたたまれたナビゲーションバーのスタイリング

  16. 16

    ブートストラップ4の積み重ねられた折りたたみ可能なナビゲーションバー

  17. 17

    ブートストラップ4ナビゲーションバートグルでアイテムが折りたたまれないようにする

  18. 18

    ブーストラップナビゲーションバーの折りたたみブレークポイントを変更する

  19. 19

    カスタムの高さのナビゲーションバーでのブートストラップ4の折りたたみの問題

  20. 20

    ブートストラップ4ナビゲーションバーの折りたたみが機能しない

  21. 21

    ブートストラップナビゲーションバーは、折りたたまれたときに要素を同じ行に保つ

  22. 22

    ブートストラップは、ナビゲーションバーの折りたたまれたアイテムを中央に揃えます

  23. 23

    折りたたみ時にスタイリングブートストラップナビゲーションバーを発行する

  24. 24

    特定の解像度からブートストラップナビゲーションを折りたたむにはどうすればよいですか?

  25. 25

    ブートストラップ4:ナビゲーションバーの折りたたみ時にアクティブなナビゲーションアイテムを表示する

  26. 26

    ブートストラップ4:ナビゲーションバーの折りたたみ時にアクティブなナビゲーションアイテムを表示する

  27. 27

    画像を縮小する代わりに、ブートストラップ3ナビゲーションバーが2行に折りたたまれます

  28. 28

    ブートストラップ4は、折りたたみ可能なナビゲーション要素と折りたたみ不可能なナビゲーション要素を組み合わせたものです

  29. 29

    ブートストラップ3ナビゲーションバーが2行に折りたたまれないようにする方法

ホットタグ

アーカイブ