Cara menetapkan bar navigasi bootstrap

Bootstrap Menyediakan Panduan Mudah Untuk Menyiapkan Bar Navigasi: Memperkenalkan Perpustakaan Bootstrap Untuk Membuat Bekas Bar Navigasi Tambahkan Identiti Jenama Buat Pautan Navigasi Tambah Elemen Lain (Pilihan) Laraskan Gaya (Pilihan)

Panduan Tetapan Bar Navigasi Bootstrap

Bootstrap menyediakan alat yang berkuasa untuk membuat bar navigasi yang responsif dan kuat. Langkah -langkah berikut akan membimbing anda untuk menyediakan bar navigasi bootstrap:

1. Memperkenalkan Perpustakaan Bootstrap

Dalam fail HTML anda, pautan perpustakaan bootstrap ke halaman anda:

 <code><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbszth/b1EixfHpvwxNxQ8p5m8178fX2RC1tiIsu3nT3UpHvmwHuH 89y k9/nl8" crossorigin="anonymous"></code>

2. Buat bekas bar navigasi

Buat bekas bar navigasi menggunakan elemen nav :

 <code><nav class="navbar navbar-expand-lg navbar-light bg-light"></nav></code>

• Kelas navbar akan menggunakan gaya bar navigasi bootstrap.
• Kelas navbar-expand-lg akan menjadikan bar navigasi secara automatik berkembang pada skrin yang lebih besar.
• Kelas navbar-light dan bg-light akan memohon tema berwarna terang.

3. Tambahkan identiti jenama

Gunakan kelas navbar-brand untuk menambah identiti jenama ke bar navigasi:

 <code><a class="navbar-brand" href="#">我的网站</a></code>

4. Buat pautan navigasi

Buat pautan navigasi menggunakan kelas nav-item dan nav-link :

 <code><ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">主页</a> </li> <li class="nav-item"> <a class="nav-link" href="#">关于</a> </li> <li class="nav-item"> <a class="nav-link" href="#">联系我们</a> </li> </ul></code>

5. Tambah elemen lain (pilihan)

Anda boleh menambah elemen tambahan seperti yang diperlukan, seperti medan carian, butang, atau menu drop-down.

6. Laraskan gaya (pilihan)

Anda boleh menggunakan kelas CSS yang dilampirkan untuk menyesuaikan penampilan dan tingkah laku bar navigasi, seperti menukar warna teks, warna latar belakang, atau saiz fon.

Contoh kod:

 <code><nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">我的网站</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 ms-auto"> <li class="nav-item"> <a class="nav-link" href="#">主页</a> </li> <li class="nav-item"> <a class="nav-link" href="#">关于</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">更多</a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">联系我们</a></li> <li><a class="dropdown-item" href="#">帮助</a></li> </ul> </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> </nav></code>

Atas ialah kandungan terperinci Cara menetapkan bar navigasi bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!