Bilah navigasi adalah komponen meta responsif yang bertindak sebagai header navigasi di aplikasi atau situs web Anda.
1. Bilah navigasi default
Bilah navigasi dapat dilipat (dan dapat dihidupkan dan dimatikan) pada perangkat seluler dan menjadi mode yang diperluas secara horizontal karena lebar viewport yang tersedia meningkat
Kustomisasi ambang batas untuk mode lipat dan mode horizontal
Bergantung pada panjang apa yang Anda letakkan di bilah navigasi, mungkin Anda perlu menyesuaikan ambang batas untuk bilah navigasi untuk memasuki mode lipatan dan mode horizontal. Anda dapat mencapai kebutuhan Anda dengan mengubah nilai variabel @grid-float-breakpoint atau menambahkan kode css kueri media Anda sendiri.
Langkah Pertama:
Tag Nav Container terluar dan tambahkan kelas gaya nav-bar untuk menunjukkan bahwa itu milik bilah navigasi
<nav role = "navigasi"> </av>
Memengaruhi:
Langkah 2 : Tambahkan header
<nav role = "navigasi"> <viv> <tombol type = "Tombol" data-koggle = "collapse" data-target = "#bs-example-navbar-collapse-1"> <span> navigasi navigasi </span> <pan> </span> <pan> </span> <pan> </span> <span> <pan> <pan> </span> </span = "Span> </span> <span> <pan> <pan> <pan> <pan ="
Label tombol bersarang dengan tiga ikon rentang. Kemudian berikan kelas gaya navbar-kunyah dan atribut collapse (collapse), dan targetnya adalah target data saat mengklik.
Ketika jendela menyempit sampai batas tertentu, efek di sebelah kanan muncul.
Langkah 3: Menu drop-down bersarang, bentuk formulir, menu tarik-turun.
Kode:
<h1>Navigation bar</h1> <nav role="navigation"> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href = "#"> merek </a> </div> <div id = "bs-example-navbar-collapse-1"> <!-menu drop-down bersarang-> <ul> <li> <a href = "#"> tautan </a> </li> <a "#"#"#"> tautan </a> </li> <li> <a "#"#"#"> tautan </a> </li> <a "<a"#"#"#"#"> tautan </a> </li> <li> <a "#"#"#"#"> tautan </a> </li> <a" <a "#"#" <li> <a href = "#" data-koggle = "dropdown"> pulldown <b> </b> </a> <ul> <li> <a href = "#"> aksi </a> </li> <li> <a href = "#"> Action </a> </li> <li> <li> <a href = "#"> Action </a> </li> <li> <li> <a href = "#" href = "#"> Tindakan </a> </li> <li> <a href = "#"> tindakan </a> </li> <li> <a href = "#"> Tindakan </a> </li> </li> </li> </ul> <!-Formulir Nested-> <Form Action = "" Pencarian "> </ul> <=" Teks-> <Form Action = "" Role = ">"> </ul> <! type = "Tombol"> Kirim </attond
Pratinjau:
Tingkatkan aksesibilitas batang navigasi
Untuk meningkatkan aksesibilitas, pastikan untuk menambahkan peran = "navigasi" ke setiap bilah navigasi.
2. Formulir
Menempatkan formulir di dalam .Navbar-Form memberikan keselarasan vertikal yang baik dan keadaan runtuh dalam viewport yang lebih sempit. Gunakan opsi Alignment untuk menentukan di mana muncul di bilah navigasi.
Banyak kode dibagikan dengan menggunakan Mixin, .Navbar-Form dan .Form-inline.
Kode
<Form Action = "" Role = "Search"> <Div> <input type = "text"/> </div> <tombol type = "tombol"> Kirim </button> </form>
Tambahkan label label ke kotak input
Jika Anda tidak menambahkan tag label ke kotak input, pembaca layar akan memiliki masalah. Untuk formulir di bilah navigasi, Anda dapat menyembunyikan label label melalui kelas .sr saja.
3. Tombol
Kode:
<typle type = "Tombol"> Login </button>
Pratinjau:
4. Teks
Saat membungkus teks di .Navbar-text, tag <p> biasanya digunakan untuk jarak dan warna garis yang benar.
Cuplikan kode:
<p> Teks </p>
5. Tautan non-navigasi
Mungkin Anda ingin menambahkan tautan standar di luar komponen navigasi standar, kemudian menggunakan .NavBar-Link Class dapat memberikan tautan pada warna default dan terbalik yang benar.
Cuplikan kode:
Salin kode sebagai berikut: <p> Ini adalah tautan <a href = "#"> </a> </p>
6. Penyelarasan Komponen
Gunakan kelas alat .Navbar-kiri atau .Navbar-Right untuk menyelaraskan tautan, formulir, tombol, atau teks. Kedua kelas menggunakan gaya mengambang CSS ke arah tertentu. Misalnya, untuk menyelaraskan tautan navigasi, Anda perlu menempatkannya di kelas alat terpisah <ul>.
Kelas-kelas ini adalah versi mixin dari .Pull-left dan .Pull-right, tetapi mereka terbatas pada kueri media, yang membuatnya lebih mudah untuk menangani komponen bilah navigasi pada layar dengan berbagai ukuran.
7. diperbaiki di atas
Menambahkan .Navbar-fixed-top memungkinkan bilah navigasi untuk diperbaiki di bagian atas. Efeknya tidak cukup.
Perlu mengatur padding untuk tag tubuh
Bilah navigasi tetap ini akan mengaburkan konten lain pada halaman kecuali Anda mengatur padding di atas <body>. Gunakan nilai Anda sendiri atau gunakan kode yang diberikan di bawah ini. Kiat: Ketinggian default bilah navigasi adalah 50px.
tubuh {padding-top: 70px; }
Itu harus ditempatkan setelah file inti CSS bootstrap. (Masalah Cakupan)
8. diperbaiki di bagian bawah
Gunakan .Navbar-fixed-bottom sebagai gantinya.
Perlu mengatur internal (padding) untuk tag tubuh
Bilah navigasi tetap ini akan mengaburkan konten lain pada halaman kecuali Anda mengatur padding di bagian bawah <body>. Gunakan nilai Anda sendiri atau gunakan kode yang diberikan di bawah ini. Kiat: Ketinggian default bilah navigasi adalah 50px.
body {padding-bottom: 70px; }
Pastikan untuk menggunakannya setelah memuat inti CSS Bootstrap.
9. Tetap di atas
Buat bilah navigasi dengan halaman dengan menambahkan .navbar-statis-top. Itu menghilang saat halaman menggulung ke bawah. Berbeda dengan kelas .navbar-fixed-*, Anda tidak perlu menambahkan padding ke tubuh.
10. Bilah navigasi warna terbalik
Penampilan bilah navigasi dapat diubah dengan menambahkan kelas.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah pengantar terperinci tentang cara menggunakan bilah navigasi bootstrap. Saya berharap ini akan membantu untuk pembelajaran semua orang.