Bagaimana Saya Membuat Navbar Dua Baris Menggunakan Bootstrap 4?

Bootstrap 4 Navbar dengan Dua Baris

Dalam tutorial Bootstrap 4 ini, kami akan menunjukkan kepada anda cara membuat navbar dengan dua baris. Ini ialah corak reka bentuk biasa untuk tapak web yang mempunyai banyak pilihan navigasi atau ingin memisahkan jenis navigasi yang berbeza.

Prasyarat

Untuk mengikutinya, anda memerlukan:

• Pemahaman asas HTML dan CSS
• Bootstrap 4 dipasang pada anda sistem

Mencipta Navbar

1. Mulakan dengan mencipta fail HTML baharu.
2. Tambahkan kod berikut pada fail anda untuk mencipta struktur navbar asas:

<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">
<h3 id="Menambah-Dua-Baris">Menambah Dua Baris</h3>
<p>Untuk menambah dua baris ke navbar, kami akan menggunakan kelas flex-column pada div navbar-collapse. Ini akan menyebabkan elemen anak bagi div navbar-collapse untuk disusun secara menegak.</p>
<pre class="brush:php;toolbar:false"><div class="collapse navbar-collapse flex-column">
<h3 id="Menambah-Pautan-Navigasi">Menambah Pautan Navigasi</h3>
<p>Sekarang kita mempunyai dua baris, kita boleh menambah pautan navigasi padanya. Kami akan mencipta dua elemen ul, satu untuk setiap baris.</p>
<pre class="brush:php;toolbar:false"><div class="collapse navbar-collapse flex-column">
<h3 id="Hasil">Hasil</h3>
<p>Berikut ialah bar navigasi yang terhasil dengan dua baris:</p>
<pre class="brush:php;toolbar:false"><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 flex-column"></div></nav>