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. Tempur Praktis Bilah navigasi 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. Tempur Praktis 2- Bilah Navigasi Tetap
<!-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. Praktis Bar Navigasi Tiga Responsif
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 pagination 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:
5. Tag lima praktis
Di beberapa halaman web, tag sering ditambahkan untuk memberi tahu pengguna beberapa informasi tambahan, seperti:
Efek ini diekstraksi dalam bootstrap ke dalam komponen label dan disorot dengan gaya ".label". Mirip dengan tombol elemen tombol, gaya label juga menyediakan berbagai warna, terutama melalui nama kelas ini untuk memodifikasi warna latar belakang dan warna teks:
Rendering adalah sebagai berikut:
6. Tempur Praktis Enam - Lencana
Lencana sebagian besar digunakan untuk mengingatkan Anda tentang berapa banyak pesan yang belum dibaca yang dibutuhkan. Di Bootstrap, gaya "lencana" digunakan untuk mencapai efek lencana.
<!-Navbar-Default Navigation Bar Medal-> <Div Role = "Navigation"> <ver> <a href = "##"> judul </a> </div> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> blog </a> </a> <li> <a> <a href = "##"> blog </a> </a> href = "##"> forum <span> 10 </span> </a> </li> <li> <a href = "##"> umpan balik </a> </li> </ul> </div>
Rendering adalah sebagai berikut:
7. Praktis Tujuh - Kotak Pop -Up yang Menggerakkan Transisi Animasi
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> kotak pop-up transisi animasi </iteme> <tautan rel = "stylesheet" href = "http://netDna.boottrapcdn.com/boottrap/3.1.1.1/netDna.boottrapcdn.com/boottrap/3.1.1.1/netDna.boottrapcdn.com/boottrap/3.1.1.1/netDna.boottrapcdn.com <style > body{margin:30px;padding:30px;} </style></head><body><button type="button">Click me</button><div id="mymodal"> <div> <div> <div> <button type="button" data-dismiss="modal"> <span aria-hidden="true">×</span><span>Close</span> </button> <h4> Judul Popt-Up </h4> </div> <div> <p> Konten badan popt-up </p> </div> <vect "<tombol type =" Tombol "Data-Dismiss =" Modal "> Tutup </button> </div> </div> <!-/.modal-content-> </Div> <!-/.modal <!-/.modal-content-> </Div> <!-/.modal <! Di akhir dokumen untuk membuat halaman dimuat lebih cepat-> <!-Jika Anda ingin menggunakan plugin JS Bootstrap, Anda harus pertama-tama memanggil jQuery-> <script src = "http://libs.baidu.com/jquery/all can orlry untuk j. src = "http://maxcdn.boottrappcdn.com/boottrap/3.2.0/js/bootstrap.min.js"> </script> <script> $ (function () {$ (". }); </script> </body> </html>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.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan dua topik menarik kepada Anda: Tutorial Pembelajaran Bootstrap Bootstrap Tutorial Praktis