Artikel sebelumnya telah berbicara tentang beberapa langkah dan beberapa penggunaan dasar bootstrap. Klik untuk dilihat
Blog ini terus memperkenalkan kepada Anda beberapa efek umum, terutama termasuk komponen berikut
1. Menu Tarik Down
2. Bilah navigasi
3. Bar Kemajuan
4. Objek Media
5. Pagination
6. Daftar
Pertama, impor CSS dan JS Bootstrap
<tautan rel = "stylesheet" href = "css/bootstrap.min.css"> <!-yang terbaik adalah mengutip CSS CDN, beberapa file gaya tidak-> <tautan rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3.5.5/bref =" // cdn.bootcss.com/bootstrap/3.5.5/pripss/scrips.scraps.Min. src = "js/jQuery-3.1.0.min.js"> </script> <script src = "js/bootstrap.min.js"> </script>
1. Menu Tarik Down
Ini terutama terdiri dari tombol dan ul, dan dapat menambahkan subtitle dan garis terpisah
<div> <button type="button" data-toggle="dropdown" aria-expanded="false"> Subway line<!--This is a downward triangle symbol--> <span></span> </button> <ul role="menu"> <!--This is a subtitle--> <li>Subway</li> <li><a href="#">Line 1</a> </li> <li><a href="#">Line 2</a> </li> <li><a href="#">Line 3</a> </li> <li><a href="#">Line 4</a> </li> <!--This is a dividing line--> <li></li> <li><a href="#">Line 5</a> </li> </ul> </div>
2. Bilah navigasi
Bilah navigasi adalah standar untuk hampir setiap halaman web, jadi benar sekali untuk mempelajari cara menggunakannya.
Ini adalah bilah navigasi di bagian atas halaman
<!-Atur kelas NAV menjadi lebih kelas atas, atur ke Navbar-Static-Top untuk menghapus sudut-sudut bulat navbar dan memperbaikinya di atas-> <nav role = "navigasi"> <Div> <!-Awal bilah navigasi, biasanya teks atau gambar-> <v> "Tombol ini dapat mengklik pada menu ketika posisi tidak cukup-> <> <Div> <! data-target = "#bs-example-navbar-collapse-1"> <span> sakelar navigasi </span> <span> </span> <span> </span> <span> </span> <span> </span> </buton> </coulk-nev ke Img-> <-href = "#"> Brand-n. retracted and clicked on--> <div id="bs-example-navbar-collapse-1"> <ul> <li><a href="#">Member Management</a></li> <li><a href="#">Member Management</a></li> <li><a href="#">Member Management</a></li> <li><a href="#">Member Manajemen </a> </li> <li> <a href = "#"> Manajemen Anggota </a> </li> <li> <a href = "#"> Manajemen anggota </a> </li> <li> <a href = "#"> Naviation </a> </li> <li> <a href = "#"> naviation </a> </li> <li> <a href = "#"> navor </a> </li> <li> <a href = "#"> navor </a> </li> <li> <a href = "#"#"> naviation </a> </li> <li> <a href ="#"#"> naviation </a> </a> <a-down <a href = "#" data-koggle = "dropdown" role = "tombol" aria-expanded = "false"> pemeliharaan sistem <span> </span> </a> <role = "menu"> <li> <a href = "#"> mengembalikan sistem </a> </li> <li> <a> <a href = "#"> Back </a> </a> <li> <li> <a> <a href = "#"> href = "#"> Putuskankan </a> </li> <li> <a href = "#"> hapus pengguna </a> </li> </li> </li> </ul> <!-Tulis navbar-hak pertama dan kanan <//FORMULIT </FORMASI DI NAVIGASI-> <TYPET TYPET = "TOLONT"> TANDAT </" <input type = "text" placeholder = "Masukkan konten pencarian"> </div> <typute type = "summit"> Cari </aton> </form> </div> </div> </av nav> </av nav>
Saat kami menggunakan halaman web untuk menelusuri blog atau file, kami memiliki level. Pada saat ini, jika kita ingin kembali ke level sebelumnya atau beberapa level, kita membutuhkan bilah navigasi lokasi.
<!-bilah navigasi-> <ol> <li> <a href = "#"> backend saya </a> </li> <li> <a href = "#"> analisis sistem </a> </li> <!-Lokasi saat ini tidak dapat diklik untuk melompat-> <li> Access Statistics </li> </ol>
3. Bar Kemajuan
<div> <!--progress-bar-striped sets the stripes, and active sets animation--> <!--Show the percentage of progress bar according to the percentage of style width--> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span>30%</span> <!--Text is displayed in the middle of the progress bar--> 30% </div> </div>
4. Objek Media
Ini pada dasarnya adalah pesan yang sama di Weibo atau Twitter
Avatar di sebelah kiri, judul dan teks di sebelah kanan
<div> <div> <mmg src = "gambar/1.jpg"> </div> <div> <h4> Heading media </h4> <p> Cra duduk dan libero nibh, di Gravida nulla. Nulla Vel Metus Sclerisque Ante Sollicitudin Commodo. CRAS PURUS ODIO, Vestibulum dalam Vulputate AT, Tempus Viverra Turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis di faucibus. </p> </div> </div>
5. Pagination
Ini adalah beberapa halaman
<ul> <li> <a href = "#" aria-label = "sebelumnya"> <!-panah ganda ke kiri-> <span aria-hidden = "true"> «</span> </a> </li> <!-Opsi pertama diaktifkan-> <a href ="#"#"> 1 </a> </li> <li> <a href = "#"#"> 1 </a> </li> <li> <a href ="#"#"> 1 </a> </li> <li> <a "<"#"#"#"#"> 1 </a> </Li> <li> <a href = "#"#"#" </a> </li> <li> <a href = "#"#"#" </a> </li> <li> <a href = "#"#"#"> 1 </a> </Li> <li> <li> <a href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> 6 </a> </a> <li> <li> <a href = "#"> 6 </a> </a> <li> <li> <a href = "#"> 6 </a> </a> </li> <a href = "#" href = "#"> 7 </a> </li> <li> <a href = "#"> aria-label = "next"> <!-panah ganda ke kanan-> <span aria-hidden = "true"> »</span> </a> </li> </ul>
Ini hanya halaman sebelumnya dan halaman berikutnya
<ul> <li> <a href = "#"> <span aria-hidden = "true"> ← </span> halaman sebelumnya </a> </li> <li> <a href = "#"> <span aria-hidden = "true"> </span> halaman berikutnya </a> </li> </ul> </ul>
Di atas ditulis dengan dua tombol yang terhubung bersama
Berikut ini ditulis karena dua tombol didistribusikan di kedua sisi
<ul> <li> <a href = "#"> <span aria-hidden = "true"> ← </span> halaman sebelumnya </a> </li> <li> <a href = "#"> <span aria-hidden = "true"> </span> halaman berikutnya </a> </li> </ul> </ul>
6. Daftar
Efek dari daftar ini sangat umum dan sangat mudah digunakan
<dv> <!-Item pertama dipilih-> <a href = "#"> statistik akses </a> <a href = "#"> statistik informasi </a> <a href = "#"> statistik log </a> </a </ "statistik a href =" a href = "a href ="#" href = "#"> statistik informasi </a> <a href = "#"> statistik informasi </a> </div>
Saya menggunakan komponen di atas untuk membuat halaman web statis backend
Efeknya seperti yang ditunjukkan pada gambar
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.