Navigation Bar (NAVBAR) adalah komponen independen dalam bootstrap, dan ada perbedaan yang jelas antara bilah navigasi (NAVBAR) dan navigasi (NAV) di Bootstrap. Ada warna latar belakang di bilah navigasi (NAVBAR), dan bilah navigasi dapat dalam berbagai bentuk seperti tautan murni, bentuk, bentuk, dan navigasi.
1. Praktis Combat One-Navigation Bar Dengan Menu dan Formulir Level 2
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> bar navigasi </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/csssstrap.csstrap.cin. body {margin: 30px; padding: 30px;} </tyle> </pead> <body> <div role = "navigation"> <!-judul diimplementasikan melalui "navbar-header" dan "navbar-brand"-> <v> <a href = "##"> judul </a> </div> <Div> <a href = "##"> Judul </a> </Div> <v> <lia> <a href = "##"> </a> </div> <v> <lia> <a href = "##"> </a> </div> <v> <lia> <a href = "##"> </a> </div> <v> <lo> <a href = "##"> </a> </div> <v> <lo> <a li> <a href = "##" data-koggle = "dropdown"> blog <span> </span> </a> <!-menu kedua-> <ul> <li> <a href = "##"> menu kedua </a> </li> </li> </li> <li> <a href = "##"> Forum </li> </li> <li> <a href = "##"> Forum </a> </a> </li> <li> <a href = "##"> forum </a> </a> ROL = "Search"> <Div> <input type = "text" placeholder = "Harap masukkan kata kunci"/> </div> <typute type = "kirim"> Cari </button> </form> </div> <!-Tempatkan di akhir dokumen untuk membuat halaman lebih cepat-> <!-jika Anda ingin menggunakan plugin js bootstrap, Anda harus menggunakan js bootstrap,> <! src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-termasuk semua plugin JS untuk plugin bootstrap atau js yang dapat digunakan sesuai kebutuhan-> <skrip src = "http://maxcdn.boottrappcdn.com/boottrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>Rendering adalah sebagai berikut:
Selain menggunakan elemen A dalam merek navbar dan bentuk UL dan navbar dari Navbar-NAV, elemen lain dapat digunakan di bilah navigasi bootstrap:
1) Tombol di Bilah Navigasi Navbar-BTN
2) Teks di navigasi bar navbar
3) Tautan normal di navigasi bar navbar-link
2. Praktis Combat 2 Navigasi Bilah Navigasi
<!-Top Navigation Bar-> <Div Role = "Navigation"> <ver> <a href = "##"> judul </a> </div> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> blog </a> </li> <li> <a href = "##"> Blog </a> </li> <li> </ul> </div> <!-Bar Navigasi Bawah-> <Div Role = "Navigation"> <ver> <a href = "##"> judul </a> </div> <ul> <li> <a href = "##"> home </a> </li> <li> <li> <a href = "##"> </a> href = "##"> forum </a> </li> </ul> </div> <!-Konten teks-> <ver> Konten teks halaman web </div>
Rendering adalah sebagai berikut:
3. Bar Navigasi Tiga-Responsif Praktis
<div role="navigation"> <div> <!-- .navbar-toggle style is used to content that shrinks toggle, that is, the element where the nav-collapse collapse style is located --> <button type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span></span> <span></span> <span></span> <span></span> <!-Pastikan merek navbar ditampilkan di layar lebar dan sempit-> <a href = "##"> judul </a> </div> <!-Ketika lebar layar kurang dari 768px, konten dalam wadah div.navbar-responsive-collapse akan disembunyikan, dan ikon Icon-Bar ditampilkan. Ketika ikon ikon-bar diklik, perluas lagi. Ketika layar lebih besar dari 768px, itu akan ditampilkan secara default. -> <liv> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> blog </a> </li> <li> <a href = "##"> forum </a> </li> </ul> </div> </div>
Rendering adalah sebagai berikut:
Terkadang ada kebutuhan untuk membalikkan warnanya. Bootstrap menyediakan bilah navigasi terbalik untuk ini, tetapi hanya menggantikan nama kelas navbar-devel dengan navbar-inverse, dan kemudian warna latar belakang bilah navigasi dan warna teks akan dimodifikasi.
4. Navigasi empat paginasi praktis
1) Navigasi pagination dengan nomor halaman
<!-Pagination: ukuran normal pagination-lg: buat navigasi pagination pagination pagination-sm: membuat pagination lebih kecil-> <ul> <li> <a href = "#"> «home </a> </li> <li> <a href ="#"> </a> </a> </a> <li> <li> <a href ="#"> </a> </a> </a> <li> <li> <a href ="#"</a> </a> </a> </li> <li> <li> <li> <a href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> </a- nonaktifkan-> <li> <a href = "#"> halaman terakhir »</a> </a> </ul> <a> <a href ="#">
Rendering adalah sebagai berikut:
2) Halaman Turn dan Navigasi Pagination
<ul> <li> <a href = "#"> «halaman sebelumnya </a> </li> <!-Status Dinonaktifkan-> <li> <a href ="#"> halaman berikutnya» </a> </li> </ul> <"« «« «« «« «« «« «« «« «« «« «« «« «« «« «« «« «« «« «« «« «« «« A. Halaman »</a> </li> </ul>
Rendering adalah sebagai berikut:
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.