Bilah navigasi adalah fitur yang bagus dan merupakan fitur penting dari situs web Bootstrap. Bilah navigasi adalah komponen meta responsif yang bertindak sebagai judul navigasi untuk aplikasi atau situs web. Bilah navigasi runtuh dalam tampilan perangkat seluler dan bilah navigasi meluas secara horizontal saat lebar viewport yang tersedia meningkat. Di inti bilah navigasi bootstrap, bilah navigasi mencakup definisi gaya untuk nama situs dan navigasi dasar.
Langkah -langkah untuk membuat bilah navigasi default adalah sebagai berikut:
Untuk menambahkan tautan ke bilah navigasi, cukup tambahkan daftar yang tidak dipesan dengan kelas .nav, .navbar-nav.
Contoh -contoh berikut akan berbagi dengan Anda bilah navigasi yang dibuat menggunakan bootstrap3. Konten spesifiknya adalah sebagai berikut
Misalnya
Jadi bagaimana menulis komponen yang nyaman
Gunakan bootstrap3!
Beri tahu kami secara langsung
Secara umum, navigasi ditempatkan dalam struktur berikut
<nav role = "navigation"> <verv> <verv> <a href = "#"> <img src = "..."> </a> </div> </div> </av nav>
1. Tag Nav
Di kelas pertama, Navbar diperlukan. Properti lain adalah opsional.
Menambahkan Navbar-Default menciptakan navigasi paling dasar, dan tidak akan diperbaiki di mana warnanya transparan.
Tambahkan warna kelas invers navbar untuk berubah menjadi hitam
Tambahkan Navbar-Fixed-Top Untuk Memperbaiki Di Atas, Tambahkan Navbar-Fixed-Bottom Untuk Memperbaiki Di Bawah
Efek menambahkan navbar-static-top adalah sebagai berikut
<div>
Header navigasi, misalnya, log situs web, klik di beranda, atau nama situs web
Efeknya seperti di atas
Saya pikir efeknya akan lebih baik jika saya dapat mengubahnya menjadi teks di sini
2. Formulir
Menambahkan formulir dalam navigasi, seperti pencarian, login, dll juga umum
Misalnya, pencarian saya di atas
<Form role = "Search"> <ver> <input type = "text" placeholder = "search"> </div> <tombol type = "kirim"> Cari </button> </form>
Jelaskan bahwa kelas Navbar-Left akan memposisikan formulir ini di sebelah kiri
Tentu saja, ada juga kelas navbar-right
Demikian pula, tombol dapat ditambahkan seperti ini
<type type = "tombol"> Masuk </atton>
Teks dapat ditambahkan seperti ini
<p> Masuk sebagai Mark Otto </p>
Tautan dapat ditambahkan seperti ini
<p> Masuk sebagai <a href = "#"> Mark Otto </a> </p>
Dan dengan cara ini, Anda dapat menambahkan kelas Navbar-Right atau Navbar-Left
Navigasi saya
<!-Navigasi-> <v> <div id = "navcontainer"> <nav role = "navigation"> <ver> <ver> <a href = "#"> Perpustakaan Xiansheng </a> </div> <bentuk role = "uc" <v> <input type = "Text" Placeholder = "Search"> </Div> Tipe = "KUPLAST =" Teks "Teks" <li> <a data-koggle = "modal" data-target = "#register"> register </a> </li> <li> <a data-koggle = "modal" data-target = "#Signin"> Login </a> </li> </ul> </div> </Div> </Div> </v> </li> </ul> </div> </Div> </Div> </v> </Div> </Ul> </div> </Div> </Div> </v> </Div>
Efeknya adalah sebagai berikut
Untuk konten lebih lanjut, Anda dapat merujuk ke artikel untuk belajar:
Bootstrap mengimplementasikan efek bilah navigasi default
Bootstrap harus belajar setiap hari (ii)
Bootstrap harus mempelajari setiap hari plugin navigasi tambahan (imbuhan)
Lebih banyak konten tentang bootstrap juga dapat ditemukan dalam topik khusus: "Tutorial Pembelajaran Bootstrap"
Di atas adalah bilah navigasi yang dibuat menggunakan bootstrap3. Saya harap ini akan membantu untuk belajar semua orang dan membuat bilah navigasi Anda sendiri