Dalam kerangka bootstrap, navigasi independen sebagai komponen navigasi. Menurut versi yang berbeda, kode sumber yang sesuai dapat ditemukan:
Kurang: Navs.Less
Sass: _navs.scss
Navigasi berbentuk tag, juga dikenal sebagai navigasi tab
Navigasi berbentuk tag diimplementasikan melalui gaya .NAV-Tabs. Saat membuat navigasi berbentuk tag, Anda perlu menambahkan nama kelas .Nav-tab ke wadah dengan nama kelas navigasi asli .NAV
<ul> <li> <a href = "#"> Judul Navigasi 1 </a> </li> <li> <a href = "#"> Judul Navigasi 2 </a> </li> <li> <a href = "#"#Judul navigasi 3 </a> </li> <li> <a href = "#"> Judul navigasi 4 Navigasi 4 Judul 5 </a> </li> </ul>
prinsip:
Tampilkan item menu Li dalam blok dan atur pada level yang sama, lalu tentukan efek suspensi gaya dan mouse dari menu non-highlight
.nav-tabs {border-bottom: 1px solid #ddd;}. nav-tabs> li {float: left; margin-bottom: -1px;}. nav-tabs> li> a {margin-right: 2px; line-height: 1.42857143; Border: 1px transpar; nav-t-height: 1.42857143; Border: 1px Transpar; nav-t-height: 1.42857143; Border: 1PX Transparent; navspx; LiAbx: 1.42857143; Border: 1PX Transpar; > A: hover {border-color: #eee #eee #ddd;}Secara umum, tab akan memiliki item yang saat ini dipilih, Anda hanya perlu menambahkan nama kelas. Aktif ke tag (LI) -nya.
<ul> <li> <a href = "#"> Judul Navigasi 1 </a> </li> <li> <a href = "#"> Judul Navigasi 2 </a> </li> <li> <a href = "#"#Judul navigasi 3 </a> </li> <li> <a href = "#"> Judul navigasi 4 Navigasi 4 Judul 5 </a> </li> </ul>
.nav-tabs> li.active> a, .nav-tabs> li.active> a: hover, .nav-tabs> li.active> a: focus {color: #555; kursor: default; Latar Belakang-Color: #FFF; Perbatasan: 1px solid #ddd; Border-Bottom-Color: Transparan;}Selain opsi saat ini, beberapa tab juga memiliki keadaan cacat. Untuk mencapai efek ini, cukup tambahkan nama kelas yang dinonaktifkan pada item tag.
.nav> li.Disabled> a {color: #999;}. nav> li.Disabled> a: hover, .nav> li.Disabled> a: focus {color: #999; Dekorasi Teks: Tidak Ada; kursor: tidak diizinkan; latar belakang-warna: transparan;}Jika Anda ingin mencapai efek mengklik pada item menu untuk beralih konten, Anda perlu bekerja sama dengan plug-in JS
Navigasi kapsul (pil)
Saat ini disorot dengan efek sudut bulat, metode implementasinya mirip dengan navigasi tab, dan dengan struktur yang sama, Anda hanya perlu mengganti nama kelas .NAV-tab dengan nama kelas .nav-pills
Pills> Li {float: left;}. nav-pills> li> a {border-radius: 4px;}. nav-pills> li + li {margin-left: 2px;}. nav-pills> li.active> a: hover, .nav-pills> li.active> a: focus {focus {focus {focus {focus {focus {focus {focus {focus {focus {focus; latar belakang-warna: #428bca;}Navigasi bertumpuk vertikal
Selain navigasi horizontal, ada juga navigasi vertikal. Untuk membuat navigasi bertumpuk vertikal, Anda hanya perlu menambahkan nama kelas .NAV-ditumpuk berdasarkan .NAV-Pills.
Dibandingkan dengan navigasi kapsul, yang utama adalah menjaga item navigasi dari mengambang, untuk mengaturnya secara vertikal, dan kemudian meninggalkan jarak tertentu untuk item navigasi yang berdekatan.
.nav-stacked> li {float: none;}. nav-stacked> li + li {margin-top: 2px; margin-left: 0;} <ul> <li> <a href = "#"> Judul navigasi 0 </a> </li> <li> <a href = "#"> Judul Navigasi 1 </a> </li> <li> <a href = "#"> Navigasi 2 </a> </li> <li> <a href = "#"> Navigasi 2 </a> </li> <li> <a href = "#"#navigasi 2 </a> </li> <li> <a href = "#" href = "#"> Judul Navigasi 4 </a> </li> <li> <a href = "#"> Judul Navigasi 5 </a> </li> </ul>Navigasi penumpukan vertikal seperti garis terpisah antara grup menu drop-down dan grup, dan ada juga garis split antara item navigasi. Cukup tambahkan <li class = "Divider"> </li> Antara item navigasi.
<ul> <li> <a href = "#"> Judul navigasi 0 </a> </li> <li> <a href = "#"> Judul navigasi 1 </a> </li> <li> <a href = "#" <a href = "navigasi </li> <li> <li> <li> <li> <li> <a href =" href = "#"> Judul Navigasi 4 </a> </li> <li> <a href = "#"> Judul Navigasi 5 </a> </li> </ul>
.nav .nav-divider {Height: 1px; margin: 9px 0; overflow: tersembunyi; latar belakang-warna: #e5e5e5;}Navigasi adaptif
Navigasi adaptif mengacu pada navigasi yang menempati seluruh lebar wadah, dan item menu dapat beradaptasi dengan lebar sel meja. Navigasi adaptif sama dengan komponen tombol adaptif yang dibuat oleh .btn-group-dibenarkan disebutkan sebelumnya, tetapi ketika membuat navigasi adaptif, nama kelas .NAV-dibenarkan harus digunakan dengan .NAV-tabs atau .Nav-pills.
prinsip:
Atur lebar menjadi 100% pada daftar UL, lalu atur tampilan: sel tabel untuk setiap item menu li, sehingga daftar mensimulasikan bentuk sel tabel;
.nav-dibenarkan {width: 100%;}. NAV-dibenarkan> li {float: none;}. nav-dibaca> li> a {margin-bottom: 5px; Text-Align: center;}. Nav-dibenarkan> .dropdown .dropdown-menu {top: auto; Kiri: auto;}@media (min-lebar: 768px) {.nav-justified> li {display: Table-sel; Lebar: 1%; } .nav-dibenarkan> li> a {margin-bottom: 0; }}Ada kondisi kueri media di atas: @Media (Min-lebar: 768px) {...} berarti bahwa navigasi adaptif hanya dapat ditampilkan dalam gaya di atas jika lebar jendela browser lebih besar dari 768px, tetapi ketika lebar jendela browser kurang dari 768px, itu akan ditampilkan dalam gaya di bawah.
.NAV-tab dan .NAV-dibenarkan digunakan bersama, yang berarti navigasi tab adaptif. Ketika lebar jendela browser kurang dari 768px, pemrosesan tambahan dilakukan dalam gaya.
.nav-tabs.nav-dibenarkan {lebar: 100%; Border-Bottom: 0;}. nav-b-tabs.nav-dibenarkan> li {float: none;}. nav-bs.nav-dibenarkan> li> a {margin-bottom: 5px; Text-Align: center;}. nav-b-tabs.nav-dibenarkan> .dropdown .dropdown-menu {top: auto; Kiri: auto;}@media (min-lebar: 768px) {.nav-bs.nav-dibenarkan> li {display: Table-sel; Lebar: .Active> a: hover, .nav-abs.nav-dibenarkan> .active> a: hover, .nav-bs.nav-dibenarkan> .active> a: fokus {border: 1px solid #ddd;} media (min-width: 768px) {.nav-tabs. Border-Radius: 4px 4px 0 0; } .nav-bs.nav-dibenarkan> .Active> a, .nav-bs.nav-dibenarkan> .active> a: hover, .nav-bs.nav- dibenarkan> .active> a: fokus {border-bottom-color: #fff; }}Navigasi ditambah menu pull-down (navigasi sekunder)
Untuk membuat navigasi sekunder, Anda hanya perlu menggunakan Li sebagai wadah induk, menggunakan nama kelas.
<ul> <li> <a href = "#"> menu navigasi1 </a> </li> <li> <a href = "#"> menu navigasi2 </a> </li> <li> <a href = "#"> menu navigasi3 </a> </li> <li> <a href = "#"> navigasi = navigasi </a> </li> <li> <a href = "#"> navigasi = navigasi <a> </li> <li> <a href = "#"> navigasi = navigasi = <a> </li> <li> <a href = "#"> navigasi = navigasi = <a> </a> <li> <a href = "#"> navigasi = navigasi = <a> Menu4 </a> </li> <li> <adata-koggle = "dropdown"> menu navigasi5 <span> </span> </a> <ul> <li> <a href = "#"> Menu drop-down1 </a> </li> <li> <a href = "#"##"> Menu tarik ke bawah2 </a> </li> <li> <a href ="#" Menu3 </a> </li> <li> <a href = "#"> Turunkan menu4 </a> </li> </li> </li> <li> <a href = "#"> menu navigasi 6 </a> </li> </ul>
Navigasi remah roti
Breadcrumbs umumnya digunakan untuk navigasi, dan fungsi utamanya adalah untuk memberi tahu pengguna lokasi halaman saat ini. Breadcrumbs juga merupakan komponen modul independen dalam kerangka bootstrap.
Kurang: Breadcrumbs.Less
Sass: _breadcrumbs.scss
<Ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> Buku saya </a> </li> <li> Diilustrasikan CSS </li> </l>
.breadcrumb {padding: 8px 15px; margin-Bottom: 20px; List-style: none; latar belakang-warna: #f5f5f5; border-radius: 4px;}. Breadcrumb> li {display: inline-block;}. BREDCRUMB> Li + li: sebelum {padding: 0 5px; brook; .active {color: #999;}Di atas menggunakan Li+Li: Sebelum menerapkan pemisah antara Li dan Li. Solusi ini tidak didukung dalam versi IE yang lebih rendah.
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
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.