Hari ini kita akan melihat efek dari komponen CSS dan kelas yang lebih penting. Kelas -kelas ini tidak sulit. Kuncinya adalah menguasai mereka dengan mahir, menggunakannya dalam kombinasi, dan menggunakannya secara fleksibel. Untuk artikel tentang gaya dan tata letak CSS di dua artikel pertama, Anda dapat membacanya di artikel sebelumnya.
1. Komponen navigasi
Saya membuat navigasi sendiri. Saat ini hanya ada menu tingkat pertama. Pada artikel berikutnya, menu tingkat kedua akan diberikan, melibatkan JS Plug-in, jadi saya tidak akan menjelaskannya di sini.
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* be placed first, and any other content * harus * mengikuti mereka! -> <Title> menu tingkat kedua </iteme> <tyle> .sidebar-menu {margin: 20px auto; lebar: 180px;}/*Tulis ulang gaya geser mouse*/. Nav-Pills Li A: Hover {latar belakang-color: #337AB7; Warna: #fff;} </tyle> <tautan href = "css/bootstrap.css" rel = "stylesheet"> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <link href = "css/style.css" rel = "stylesheet"> <link href = "css/style.css" rel = "stylesheet"> <link href = "css/style.css" rel = "stylesheet"> src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <script src = "http://cdn.bootcss.com/boottrap/3.3.4/js/boottrap.min.min Menu-> <ver> <ul> <li role = "presentasi"> <a href = "#"> <span> </span> home </a> </li> <rance = "presentasi"> <a href = "#"> <pan> </span> tentang saya </a> </li> <li> <li> <ran = "presentasi"> </span = "</a> </li> <li> <Li role =" presentasi "> </span ="#"#" role="presentation"><a href="#"><span></span>Missing</a></li> <li role="presentation"><a href="#"><span></span>Message Board</a></li> <li role="presentation"><a href="#"><span></span>Emotional Words</a></li> </ul> </div> </body> </html>Efeknya adalah sebagai berikut:
Poin -poin berikut harus dicatat dalam navigasi:
1: Komponen navigasi tergantung pada kelas NAV. (Yaitu saat menggunakan kelas lain, Anda harus menulis kelas ini)
2: Pastikan aksesibilitas komponen navigasi (tambahkan atribut peran)
3: Kelas-kelas yang terlibat termasuk tab-tab, nav-pil (buat kapsul navigasi), nav-stacked (buat navigasi horizontal ke dalam navigasi vertikal), NAV-dibenarkan (buat navigasi yang sama dengan pengaturan lebar))
4: Untuk kelas yang dinonaktifkan, saat menambahkan tautan di halaman navigasi (termasuk tab dan halaman navigasi), itu hanya dinonaktifkan di permukaan (warna menjadi abu -abu, bentuk mouse berubah), dan fungsi aktual masih ada.
5: Gunakan navigasi dengan menu drop-down.
Mari kita lihat sub-: Anda dapat menempelkan kode dan mengujinya sendiri, dan tidak lagi mengambil tangkapan layar.
<!-Navigasi tergantung pada kelas NAV kelas Nav-Tabs kelas NAV-> <ul> <rance = "presentasi"> <a href = "#"> home </a> </li> --- Tambahkan atribut peran <role = "presentasi"> <a href = "#"> Profil </a> </li> <a rane = "A HREF ="#" </ul> <!-Tab Kapsul Diatur Secara Vertikal Nav-stacked-> <ul> <li role = "presentasi"> <a href = "#"> home </a> </li> <li role = "presentasi"> <a href = "#"> </a> </li> <li> <li role = "presentasi"> <"#"> </a> </li> <Li Role = "presentasi"> <a href = "" <" <!-Menyelaraskan navigasi di kedua ujungnya Nav-dibenarkan untuk mencapai penyelarasan kolom navigasi-> <ul> <rance = "presentasi"> <a href = "#"> home </a> </li> <role = "presentasi"> <a href = "#"> Profil </a> </li> <lier "ran ="> <a href = "#" <br> <br>
Mari kita lihat status navigasi dengan menu tarik-turun:
<ul> <rance = "presentasi"> <a data-koggle = "dropdown" href = "#" role = "tombol" aria-haspopup = "true" aria-expanded = "false"> dropdown <span> </span> </a> <ul> <l> <a href = "#"> Action </span> </a> <ul> <l> <a href = "#"> Action </san> </a> </li> <a "<a href ="#"#"> ACTION </a> </Li> <l> <a "<a href ="#"#"> Action </san> </Li> <li> <a "<a href ="#"#"> ACTION </a> </Li> <li> <a "<a href ="#"#"> ACTION </a> </Li> <li><a href="#">Action 222</a></li> <li><a href="#">Action 333</a></li> </li> </li> <li><a href="#">Action 333</a></li> </li> </li> <li><a href="presentation"></li> --divider means adding Pembagi, biasanya menggunakan Li atau Span kosong. <li role = "presentasi"> <a href = "#"> profil </a> </li> <rance = "presentasi"> <a href = "#"> pesan </a> </li> </ul>
Bahkan, untuk menggunakan dropdown menu dropdown dropdown, format dasar seperti di atas, atau jika Anda mengubah tautan ke tombol, dll., Anda dapat menggunakannya secara fleksibel.
2. Komponen bilah navigasi
Catatan:
1: Bilah navigasi adalah untuk mengatur semua komponen secara horizontal dan membungkus komponen, mirip dengan navigasi horizontal
2: Pastikan aksesibilitas. Gunakan tag <av> atau <div role = "navigasi">
3: Kelas-kelas yang terlibat dalam bilah navigasi meliputi: navbar-inverse (untuk mengimplementasikan warna latar belakang sebagai hitam dan putih), navbar-fixed-top | navbar-fixed-bottom (batang navigasi tetap di bagian atas dan bawah)
navbar-left | navbar-right (biasanya menambahkan navbar-kanan ke elemen terakhir), navbar-text, navbar-link (atur warna koneksi), navbar-btn (untuk tombol yang tidak termasuk dalam formulir, Anda bisa
Gunakan kelas ini untuk mencapai efek pemusatan vertikal), navbar-form (untuk mencapai penyelarasan vertikal), Navber-merek (Ikon Merek Set), Navbar-Collapse (Rollapse)
Mari kita lihat efek lipat navbar-collapse, kodenya adalah sebagai berikut:
<!-- Navigation bar collapsed means folding--><nav> <div> <div> --Navigation bar header<button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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">-lipat kolom <ul> <li> <a href = "#"> tautan saat ini </span> </a> </li> <li> <li> <a href = "#"> </span> </a> </li> <li> <li> <li> <a href = "#"> </span> </a> </li> <li> <li> <Li> <a href = "#"> Data-koggle = "dropdown" role = "Tombol" aria-haspopup = "true" aria-expanded = "false"> dropdown <span> </span> </a> <ul> <li> <a href = "#"> aksi </a> </li> <a href = "#"> Tindakan lain </a> </li> <a href = "#"> Tindakan lain </a> </Li> <a "#"#" Di sini </a> </li> <li> <a href = "#"> tautan terpisah </a> </li> <rance = "pemisah"> </li> <li> <a href = "#"> satu lagi tautan yang terpisah </a> </li> </li> </li> </ul> <bentuk peran = "pencarian"> </li> </li> </li> </ul> <bentuk peran = "pencarian"> </li> </li> </li> </ul> <bentuk peran = "pencarian"> </li> </li> </li> </ul> <bentuk peran = "pencarian"> </li> </li> </li> </ul> <bentuk peran = "Search"> </li> </li> </li> </ul> <bentuk peran = "pencarian"> </li> type="submit">Submit</button> </form> <ul> <li><a href="#">Link</a></li> <li> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> </li> </li> </div><!-- navbar-collapse 可以可以可--><div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href="#">Brand</a></div>
Efeknya adalah sebagai berikut:
Artinya, ketika layar browser saya menyusut, komponen asli akan menjadi garis terlipat (tiga garis horizontal) di sisi kanan garis merek. Klik tombol tiga horizontal dan komponen akan ditampilkan.
3. Komponen pagination
Catatan:
1: Gunakan pagination kelas (tambahkan kelas pagination-lg untuk membuatnya lebih besar)
2: Mencapai halaman putar perataan dan mengimplementasikan penyelarasan halaman (bagian depan dan belakang terletak di kedua ujungnya masing -masing).
Kodenya adalah sebagai berikut:
<!-Kategori pagination-> <av> <ul> <li> <a href = "#" aria-label = "sebelumnya"> <span aria-hidden = "true"> «</span> </a> </li> <li> <a href ="#"> </a> </li> <li> <a href ="#"> </a> </li> <li> <a href ="#"</a> </li> <li> <a href ="#" href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <li> <a href = "#"> 5 </a> </li> <li> <li> <a href = "#" aria-hidden = "true"> »» </span> </a> </li> </ul> </bav>
Jika Anda menerapkan paging, cukup tambahkan <ul>.
Efek turn halaman adalah sebagai berikut: terutama gunakan kelas pager
<!-flip-up-> <av> <ul> <li> <a href = "#"> Sebelumnya </a> </li> <li> <a href = "#"> Berikutnya </a> </li> </ul> </bav> <!-tautan Alignment telah menambahkan kelas sebelumnya dan berikutnya di kedua ujungnya-> </ul> <nav> <ul> <a Li> telah menambahkan kelas sebelumnya dan berikutnya di kedua ujungnya-> <nav> <a nav> <a nav> <a. " aria-hidden = "true"> ← </span> lebih tua </a> </li> <li> <a href = "#"> <span aria-hidden = "true"> → </span> </a> </li> </ul> </nav>
Efek dari dua di atas adalah sebagai berikut:
4. Lencana
Fungsi: Sajikan informasi dalam angka yang menarik.
<!-lencana-> <a href = "#"> inbox <span> 42 </span> </a> <tombol type = "tombol"> Pesan <span> 4 </span> </attond>
Efeknya adalah sebagai berikut:
Menambahkan jenis kelas lencana ini juga dapat digunakan dengan navigasi, dll.
5. Komponen Thumbnail
Gunakan dengan sistem raster dan kelas thumbnail. Kode ini adalah sebagai berikut: dapat diuji sendiri
<!-- Thumbnail thumbnail --><div> <div> <div> <img src="111.png"> <div> <h3>Thumbnail label</h3> <p><a href="#" role="button">Button</a></p> </div> </div> </div> <!-- Second --> <div> <div> <img src = "111.png"> <div> <h3> label thumbnail </h3> <p> <a href = "#" role = "Tombol"> </a> </p> </div> </div> <!-ketiga-> <v> <vg> <mg src = "111.png"> <div> <v> <vg src = "111.png"> <div> <v> <vg SRC = "111.png"> <div> <v> <vg> <mg src = "111.png"> <div> <v> <vg> <mg src = "111.png"> <div> <v> <vg> <mg src = "111.png"> <div> <v> <vg> <IMG SRC = "111.png"> href = "#" role = "Tombol"> Tombol </a> </p> </div> </div> <!-ketiga-> <div> <div> <img src = "111.png"> <dv> <h3> label div </h3> <p> <a href = "#" role = "> </h3> <p> <a href ="#"role"> </h3> <p> <p> <a href = "#"#"role"> Tombol "> </h3> <p> <p> <p> </div> </div> </div> </div> </div> </div>
6. Kotak Peringatan Tertutup
Gunakan Kelas: Peringatan-Dismisibel dan tombol diposting sebagai berikut:
<!-Berikan tombol Tutup untuk kotak peringatan-> <Div Role = "Alert"> <Tombol type = "tombol" data-dismiss = "waspada" aria-label = "tutup"> <span aria-hidden = "true"> × </span>-Tampil ARIA TERSEDI ARIA </buton> <strong> PERINGATAN </KUAT> Cek lebih baik, Anda tidak melihat sendiri, Anda tidak melihat sendiri, Anda tidak melihat sendiri. perangkat ->
Mengenai adegan itu, Anda dapat menggantinya sendiri. Tidak ada lagi deskripsi. Atur Alert-Link untuk mengatur warna yang cocok dengan kotak peringatan saat ini.
7. Bar Kemajuan
Gunakan kelas: bilah kemajuan dan kemajuan untuk mengimplementasikan animasi
<!-Progress Bar-> <div> <Div Role = "ProgressBar" aria-valuenow = "60" aria-valuemax = "100" aria-valuemin = "0"> 60% </div> </div> <!-Tetapkan lebar minimum-> <v> <Div Role = "Progressbar" ARIA-"" 80 "80" <v> <v> <Div Role = "Progressbar" ARIA-" aria-valuemax = "100"> 80% </div> </div> <div> <div role = "progressBar" aria-valuenow = "2" aria-valuemin = "0" aria-valuemax = "100" style = "min-width: 2em;"> 2% </div> </div>
Untuk mencapai bilah kemajuan efek animasi, gunakan progres-bar-striped untuk mencapai efek animasi dan tambahkan aktif. Kode ini adalah sebagai berikut: Tidak ada lagi tangkapan layar
<!-Gunakan progres-bar-striped di kelas Stripe-> <div> <div role = "progressBar" aria-valuenow = "100" aria-valuemin = "0" aria-valuemax = "100"> <span> 40% Lengkap </span> 100% </div> </div>
Anda juga dapat mengubah warna garis -garis batang kemajuan dalam kombinasi dengan warna adegan.
8. Daftar Grup, Komponen Grup Input
Mari kita lihat grup daftar pertama, terutama menggunakan kelas daftar-kelompok, dan kedua, item daftar ditulis dengan daftar-grup-item. Kodenya adalah sebagai berikut:
<!-List Group-> <ul> <li> <span> 3 </span> 1111 </li> <li> <span> 5 </span> 2222 </li> <li> 3333 </li> <li> 4444 </li> <li> 5555 </li> </ul> <!-Tautan juga dapat menambahkan Kelas Scenario sebagai DAFT-DAFTM-</li>. href = "#"> 2222 </a> <a href = "#"> 33333 </a> <a href = "#"> 44444 </a> <a href = "#"> 5555 </a> </div> <!-Tombol sebagai grup daftar, gunakan div, dan tidak dapat menggunakan. type = "Tombol"> 2222 </button> <tombol type = "Tombol"> 3333 </button> <tombol type = "Tombol"> 4444 </button> <!-item grup daftar-> <ver> <a href = "#" <h4> grup daftar </h4> <p> 11111 </a> </a> <href = "h4> <p> 11111 </a> </a> <href ="#"href =" href = " <p> 22222 </p> </a> </div>
Mari kita lihat grup input, gunakan kelas input-group untuk membungkus komponen bersama. Kodenya adalah sebagai berikut:
<!-Input Group-> <SEV>-Komponen disertakan dalam inout-group <span> <tombol type = "Tombol"> go </button> </span> <input type = "text" aria-label = "text"> </div>
9. Embed konten fitur responsif
Pahami apa artinya dan apa itu konten tertanam? Bagaimana cara menyematkannya? Jadi bagaimana cara merespons?
Embed: Artinya, gunakan tag seperti <fiframe>, <sembed>, <Video> dan <Peject> untuk memperkenalkan konten file eksternal. Saya percaya bahwa semua orang tahu atribut baru di HTML5. Video, radio, dll.
Respons: Secara otomatis membuat skala tetap berdasarkan lebar wadah eksternal yang tertanam, memungkinkan browser untuk secara otomatis menentukan ukuran video atau konten, dan dapat skala pada berbagai perangkat.
Jika Anda ingin gaya terakhir mencocokkan properti lain, Anda juga dapat secara eksplisit menggunakan kelas yang diturunkan.
Kodenya adalah sebagai berikut:
<div> <iframe src = "..."> </iframe> </div> <div> <iframe src = "..."> </iframe> </div>
Mari kita lihat apa arti masing-masing.
Mari kita lihat konsolnya:
. Embed-responsive-4by3 {--- 4 mewakili horizontal, 3 mewakili vertikal, yaitu, rasio penskalaan, yaitu, skala 4: 3 padding-bottom: 75%;} .. embed-responsive-16by9 {padding-bottom: 56.25%;}Pertahankan rasio aspek, jika lebar dihitung pada 100%, 100% * 3/4 = 75%. Pada saat ini, atur rasio aspeknya dengan mengatur padding-botomnya. Saat Anda memperbesar di browser,
Akhirnya, simpan rasio penskalaan ini untuk penskalaan.
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 semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.