Artikel ini terutama akan memperkenalkan menu dan navigasi Bootstrap.
Dimulai dengan artikel ini, kami akan memperkenalkan file yang berhubungan dengan JavaScript, sebagai berikut:
<!-Tempatkan di ujung tag tubuh untuk membuat halaman dimuat lebih cepat->
<!-Jika Anda ingin menggunakan plugin JS Bootstrap, Anda harus terlebih dahulu menelepon jQuery->
<skrip src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script>
<!-Termasuk semua plugin JS Bootstrap atau plugin JS yang dapat digunakan sesuai kebutuhan->
<skrip src = "http://maxcdn.boottrapcdn.com/boottrap/3.2.0/js/boottrap.min.js"> </script>
Di Bootstrap, komponen menu drop-down adalah komponen mandiri. Efek interaksi dari komponen Bootstrap adalah semua berdasarkan plugin yang ditulis oleh jQuery Library, jadi sebelum menggunakan bootstrap.min.js, Anda harus terlebih dahulu memuat jQuery.min.js agar berlaku.
1. Penggunaan Menu Basic Tarik-Down
<! Doctype html> <html> <adep> <meta charset = "utf-8"> <itement> penggunaan dasar menu tarik-turun </iteme> <link 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 <tyle> body {margin: 50px; padding: 50px;} </tyle> </head> <body> <vov> <tombol type = "tombol" id = "dropdownMenu1" data-kilat = "dropdown"> Menu drop-down </span> </span> </buton> <role = "" "" "" "" "" "" "" " Role = "MenuUtem" TabIndex = "-1" href = "#"> menu1 </a> </li> <role = "presentasi"> <a role = "menuUtem" tabindex = "-1" href = "#"> role </a> </li> <!-Tetapkan status item menu ke status saat ini (. " TabIndex = "-1" href = "#"> menu3 </a> </li> <!-Tetapkan status item menu menjadi dinonaktifkan (.disabled)-> <role = "presentasi"> <role = "MenuUtem" Tabindex = "-1" href = "#"> menu 4 tabIndex = "-1" href = "#"> menu 4 </a> </li> <role = "presentasi"> <role = "menuUtem" Tabindex = "-1" href = "#"> menu 4 </a> </li> <li> role = "presentasi"> <role = "menuitem" tabindex = "-liu ="-"" "-"-"-"-"-"-"-"-"-"-"-1"-"Li-" Tabindex = 1 " role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu 6</a></li> </ul></div> <!-- Place it at the end of the document to make the page load faster--><!-- If you want to use the js plugin of Bootstrap, you must first call jQuery --><script 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.bootstrapcdn.com/boottrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>Catatan: Terkadang ada kebutuhan untuk bangkit ke atas, jadi Anda hanya perlu menambahkan nama kelas "dropup" ke nama kelas "dropdown".
Rendering adalah sebagai berikut:
2. Pull-down menu-alignment
Menu drop-down di Bootstrap dijalankan kiri secara default. Jika Anda ingin menu drop-down relatif relatif terhadap wadah induk, Anda dapat menambahkan nama kelas "tarik-kanan" atau "dropdown-menu-right" ke "dropdown-menu", seperti yang ditunjukkan di bawah ini:
<!--Omitted part such as code in 1-->...<div> <button type="button" id="dropdownMenu1" data-toggle="dropdown"> dropdown menu<span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#"> dropdown Item menu </a> </li> <rance = "presentasi"> <a role = "menuUtem" tabIndex = "-1" href = "#"> item menu dropdown </a> </li> </ul> </div> ...
Rendering adalah sebagai berikut:
3. Grup tombol tombol
Grup tombol juga merupakan komponen independen. Perlu mengandalkan plugin tombol.js untuk dijalankan secara normal. Dan bootstrap.js telah mengintegrasikan fungsi plug-in tombol.js.
Penggunaan: Gunakan wadah "BTN-Group" dan masukkan beberapa tombol ke dalam wadah ini. Seperti yang ditunjukkan di bawah ini:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> grup tombol </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/csssssstrap.min.min.min. margin: 30px; padding: 30px; } </style></head><body><div> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type = "Tombol"> <span> </span> </button> <tombol type = "Tombol"> <span> </span> </button> <tombol type = "Tombol"> <span> </span> </button> <tombol type = "Tombol"> </span> </span> </tombol </Tombol "> </span> </span> </span> </span> </tombol </Tombol =" Tombol "> <pan> </span> </span> </span> </Tombol </tombol =" Tombol "> <pan> </span> </span> </span> <button" Tombol = "Tombol"> <pan> </span> </span> </span> </tombol </Tombol = "Tombol"> <pan> </span> </span> </span> type = "Tombol"> <span> </span> </button> <tombol type = "Tombol"> <span> </span> </button> <tombol type = "Tombol"> <span> </span> </button> <tombol type = "Tombol"> </span> </span> </tombol </Tombol "> </span> </span> </span> </span> </tombol </Tombol =" Tombol "> <pan> </span> </span> </span> </Tombol </tombol =" Tombol "> <pan> </span> </span> </span> <button" Tombol = "Tombol"> <pan> </span> </span> </span> </tombol </Tombol = "Tombol"> <pan> </span> </span> </span> type = "Tombol"> <span> </span> </button> </div> <!-Tempatkan di akhir dokumen untuk membuat halaman dimuat lebih cepat-> <!-Jika Anda ingin menggunakan plugin JS bootstrap, Anda harus pertama-tama menelepon JQuery-> <script src = "http://libs.beryu.com/jyery." Termasuk semua plugin JS bootstrap atau plugin JS yang dapat dipanggil sesuai kebutuhan -> <skrip src = "http://maxcdn.boottrapcdn.com/bootstrap/3.2.0/js/boottrap.min.js"> </script> </body> </html>
Rendering adalah sebagai berikut:
4. Tombol - Pengelompokan bersarang
Sering kali, kami sering mengatur menu drop-down dan grup tombol biasa untuk mencapai efek yang mirip dengan menu navigasi. Saat menggunakan pengelompokan tombol bootstrap bersarang, Anda hanya perlu mengganti "dropdown" wadah yang membuat menu dropdown dengan "BTN-Group" dan menempatkannya pada level yang sama dengan tombol biasa. Seperti yang ditunjukkan di bawah ini:
<!-Bagian yang dihilangkan seperti kode dalam 3-> ... <v Div> <tombol type = "Tombol"> home </button> <div> <tombol data-koggle = "dropdown" type = "Tombol"> Pengembangan seluler <span> </span> </buttpry> <ul> <li> <a href = "##"> dan </span> </li> <li> <a href = "##"> dan haid </san> </l9 </div> <typute type = "tombol"> Java Web Development </aton> <tombol type = "Tombol"> PHP Development </aton> <tombol type = "tombol"> data besar </button> </div> ...
Rendering adalah sebagai berikut:
Dalam penggunaan aktual, efek tampilan vertikal akan selalu ditemui. Gaya ini juga disediakan di Bootstrap. Kita hanya perlu mengubah nama kelas "btn-group" dari pengelompokan horizontal menjadi "btn-group-vertikal" untuk mewujudkan pengelompokan vertikal tombol.
5. tombol setara tombol
Metode implementasi tombol penyetaraan (tombol pengelompokan adaptif) juga sangat sederhana. Anda hanya perlu menambahkan nama kelas "btn-group-dibenarkan" ke grup tombol "BTN-group" seperti yang ditunjukkan di bawah ini:
<div> <a href = "#"> sepertiga </a> <a href = "#"> sepertiga </a> <a href = "#"> sepertiga </a> <a href = "#"> sepertiga </a> </div>
Rendering adalah sebagai berikut:
6. Navigasi - Penggunaan Dasar
Bilah navigasi terutama dibuat di bootstrap melalui gaya ".nav". .nav "harus dilampirkan dengan gaya lain agar efektif, seperti" tab-tab "," nav-pills ", dll.
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> penggunaan navigasi-basic </iteme> <link 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><ul> <li><a href="##">Home</a></li> <li><a href="##">News</a></li> <li><a href="##">Blog</a></li> <!--Tag-shaped tab navigation--> <li> <a href = "##"> forum </a> </li> <!-Status Dinonaktifkan-> <li> <a href = "##"> umpan balik </a> </li> </ul> <!-Tempatkan di akhir dokumen untuk membuat halaman yang lebih cepat-> <!-jika Anda ingin menggunakan js plugin untuk membuat halaman, Anda ingin menggunakan js plugin untuk menggunakan js plugin untuk menggunakan js plugin untuk menggunakan js plugin js js js boottre,> src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-termasuk semua plugin JS untuk plugin bootstrap atau js yang dapat disebut sesuai kebutuhan-> <skrip src = "http://maxcdn.bootstrapcdn.com/boottrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>Rendering adalah sebagai berikut:
7. Navigasi-kapsul (pil) Navigasi
Navigasi kapsul (pil), item saat ini disorot, dan memiliki efek sudut bulat. Cukup ganti nama kelas "nav-tab" dengan "nav-pills":
<ul> <!-Status Saat Ini-> <li> <a href = "##"> home </a> </li> <!-status tersuspensi-> <li> <a href = "##"> berita </a> </li> <li> <a/sang href = "##" DATA-COGGLE = "dropdown"> <li> <a/SPAN HREF = "##" DATAGGLE = "dropdown"> <li> <a/SPANET/SPAN href = "##"> blog front-end </a> </li> <li> <a href = "##"> blog java </a> </li> </li> </li> <li> <a href = "##"> </a> </li> <!-status tidak dapat disangkal-> <li> </UL </a> </li> <!
Rendering adalah sebagai berikut:
8. Navigasi - Navigasi bertumpuk vertikal
Untuk membuat navigasi tumpukan vertikal, Anda hanya perlu menambahkan nama kelas "bertumpuk" berdasarkan "nav-pills":
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> berita </a> </li> <li> <a href = "##"> blog </a> </li> <li> <a href = "##"> forum </a> </Li> <a! href = "##"> umpan balik </a> </li> </ul>
Rendering adalah sebagai berikut:
9. Navigasi - Navigasi Adaptif
Navigasi adaptif "NAV-dibenarkan" (silakan merujuk ke file bootstrap.css, baris 3585 ke baris 3607) perlu digunakan bersama dengan "nav-tab" atau "nav-pills". menyukai:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> berita </a> </li> <li> <a href = "##"> blog </a> </li> <li> <a href = "##"> forum </a> </Li> <a! href = "##"> umpan balik </a> </li> </ul>
Rendering adalah sebagai berikut:
10. Navigasi-Breadcrumb
Breadcrumb juga merupakan komponen modul independen, umumnya digunakan untuk navigasi, dan fungsi utamanya adalah untuk memberi tahu pengguna lokasi halaman saat ini (lokasi saat ini). Metode penggunaannya sangat sederhana, tambahkan kelas remah roti ke ol:
<Ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> cina </a> </li> <li> Beijing </li> </ol>
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.