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">

Menambah Dua Baris

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.

<div class="collapse navbar-collapse flex-column">

Menambah Pautan Navigasi

Sekarang kita mempunyai dua baris, kita boleh menambah pautan navigasi padanya. Kami akan mencipta dua elemen ul, satu untuk setiap baris.

<div class="collapse navbar-collapse flex-column">

Hasil

Berikut ialah bar navigasi yang terhasil dengan dua baris:

Atas ialah kandungan terperinci Bagaimana Saya Membuat Navbar Dua Baris Menggunakan Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!