Pengantar Bootstrap
Bootstrap, dari Twitter, adalah kerangka kerja front-end paling populer saat ini. Bootstrap didasarkan pada HTML, CSS, dan JavaScript. Ini sederhana dan fleksibel, membuat pengembangan web lebih cepat.
Komponen thumbnail
Thumbnail yang paling umum digunakan di situs web adalah halaman daftar produk, yang menampilkan beberapa gambar dalam satu baris, dan beberapa memiliki judul, deskripsi konten, tombol, dan informasi lainnya di bawah gambar.
Kerangka Bootstrap memisahkan bagian ini menjadi komponen modul, dan diimplementasikan melalui nama kelas .Merat dan sistem grid bootstrap. Di bawah ini adalah file kode sumber dari berbagai versi komponen thumbnail bootstrap:
Kurang: tbumbnails.less
Sass: _tbumbnails.scss
Prinsip Implementasi:
Implementasi tata letak terutama bergantung pada sistem grid kerangka bootstrap. Berikut ini adalah gaya yang sesuai dengan thumbnail
.thumbnail {display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857143; latar belakang-warna: #fff; perbatasan: 1px solid #ddd; border-radius: 4px; -webkit-transisi: semua .2 kemudahan-dalam-keluar; transisi: all .2. img {margin-right: auto; margin-left: auto;} a.thumbnail: hover, a.thumbnail: focus, a.thumbnail.active {border-color: #428bca;}. Thumbnail .caption {padding: 9px; color: #333;}Mari kita lihat contoh:
<Div> <div> <a herf = "#"> <img src = "img/1.jpg" style = "tinggi: 180px; lebar: 100%; display: block"> </a> </div> <v> <a herf = "#"> <img src = "iMg/2.jpg" style = "height: 180#"> <img src = "iMg/2.jpg" style = "height: 180 block"></a></div><div><a herf="#"><img src="img/3.jpg" style="height:180px;width:100%;display: block"></a></div><div><a herf="#" ><img src="img/4.jpg" style="height:180px;width:100%;display: Blokir "> </a> </div> </div>
Efeknya adalah sebagai berikut:
Anda dapat melihatnya menggunakan tampilan desain responsif firefox
Atas dasar hanya thumbnail, tambahkan wadah div dengan nama kelas .caption dan tempatkan konten lain dalam wadah ini, seperti: judul, deskripsi teks, tombol, dll.
<div> <div> <div> <a href = "#"> <img src = "img/1.jpg" style = "tinggi: 180px; lebar: 100%; display: block"> </a> <div> <h3 here is the description content here is the description content here is the description content here is the description content here is the description content</p><a href="#">Begin to learn</a></div><div><a href="#"><img src="img/2.jpg" style="height:180px;width:100%;display: block"></a><div><h3>Here is the graphic title 2222 </h3> <p> Berikut ini adalah konten deskripsi 2222 tempat ini adalah konten deskripsi 2222 Herher adalah konten deskripsi 2222 HANYA Konten Deskripsi 2222 HANYA Konten Deskripsi 2222 HANYA Konten Deskripsi 2222 </p> <a href = "#"> Mulai belajar </a> </div> <div> <a href = "#" style = "Tinggi: 180px; Lebar: 100%; Tampilan: Blok"> </a> <div> <h3> Berikut adalah judul grafis 3333 </h3> <p> Berikut adalah konten deskripsi 3333 Berikut adalah konten deskripsi 3333 di sini adalah konten deskripsi 3333 di sini adalah konten deskripsi 222 Berikut adalah konten deskripsi 3333 </po/pawer <"Here adalah konten deskripsi#Berikut adalah konten deskripsi 3333 </ Pelajari </a> </div> <div> <a href = "#"> <img src = "img/4.jpg" style = "height: 180px; lebar: 100%; display: blok"> </a> <dv> <h3> di sini adalah judul grafik adalah 4444 </h3> <p> Di sini adalah konten 44 di sini adalah konten 4444444 Deskripsi Konten 4444Shere Adalah Konten Deskripsi 4444.HERI adalah Konten Deskripsi 4444 </p> <a href = "#"> Mulailah belajar </a> <a href = "#"> Studi </a> </div> </div> </div>
Komponen Kotak Peringatan
Kerangka Bootstrap menggunakan gaya .Alert untuk mencapai efek kotak peringatan. Secara default, Bootstrap menyediakan empat efek kotak peringatan yang berbeda:
1. Kotak Peringatan Sukses: Meminta pengguna untuk berhasil dalam operasi, tambahkan gaya .alert-success berdasarkan .Alert;
2. Kotak Peringatan Informasi: Berikan pengguna informasi yang cepat, dan tambahkan gaya .Alert-Info berdasarkan .Alert;
3. Kotak Peringatan PERINGATAN: Berikan informasi peringatan dan tambahkan. Gaya peringatan alert berdasarkan .Alert;
4. Kotak Peringatan Kesalahan: Meminta pengguna untuk kesalahan yang beroperasi, dan tambahkan gaya-Danger berdasarkan .Alert;
Di antara mereka, gaya .Alert terutama menetapkan warna latar belakang, perbatasan, sudut bulat, dan warna teks kotak peringatan. Selain itu, pemrosesan gaya dilakukan pada H4, P, UL dan .Alert-Link. Berikut ini adalah kode sumber CSS:
.Alert {padding: 15px; margin-Bottom: 20px; border: 1px solid transparent; border-radius: 4px;}. waspada h4 {margin-top: 0; warna: warner;}. ALERT .Alert-link {font-weight: bold;}. Peringatan> p,. 5px;}. Alert-success {color: #3c763d; latar belakang-warna: #dff0d8; border-color: #d6e9c6;}. Peringatan hr {color-color-color: #c9e2b3;}. Warni-info. #31708f; latar belakang-warna: #d9edf7; border-color: #bCe8f1;}. Peringatan-Info hr {border-top-color: #a6e1ec;} peringatan-Info .alert-link {color: #245269;}. #faebcc;}. Peringatan peringatan jam {border-top-color: #f7e1b5;}. Peringatan peringatan .Alert-link {Color: #66512c; #E4B9C0;}. Peringatan-Danger .Alert-Link {Color: #843534;}Misalnya:
<Div Role = "Alert"> Selamat atas operasi Anda yang sukses! </div> <Div Role = "Alert"> Harap masukkan kata sandi yang benar </div> <div role = "waspada"> Anda telah gagal dua kali, dan ada peluang terakhir lain </div> <div role = "waspada"> Maaf, kata sandi Anda dimasukkan secara tidak benar! </div>
Kotak peringatan yang dapat ditutup
1. Tambahkan nama kelas .Alert-Dismissable ke wadah kotak peringatan default.
2. Tambah .Close ke label tombol untuk mengimplementasikan tombol penutupan kotak peringatan
3. Pastikan bahwa atribut kustom data-dismiss = "waspada" diatur pada elemen tombol tutup (menutup kotak peringatan mengharuskan JS untuk mendeteksi atribut, sehingga mengendalikan penutupan kotak peringatan)
contoh:
<Div role = "waspada"> <tombol type = "tombol" data-dismiss = "waspada"> × </button> Selamat atas operasi Anda yang berhasil! </div> <divrole = "waspada"> <tombol type = "tombol" data-dismiss = "waspada"> × </button> Harap masukkan kata sandi yang benar </div> <div role = "waspada"> <tombol type = "tombol" data-dismiss = "alert"> × </aton> Anda telah gagal dalam operasi dua kali, dan ada kesempatan terakhir </div> </Div> <" Data-Dismiss = "Peringatan"> × </buttom> Maaf, kata sandi Anda dimasukkan secara tidak benar! </div>
Tautan ke Kotak Peringatan
Terkadang Anda perlu menambahkan tautan ke kotak peringatan untuk memberi tahu pengguna untuk melompat ke halaman baru. Tautan ke kotak peringatan disorot dalam kerangka bootstrap. Tambahkan nama kelas sebagai .Alert-tautan ke tautan yang ditambahkan ke kotak peringatan. Di bawah ini adalah gaya peringatan CSS
.Alert .Alert-link {font-weight: bold;}/*Warna teks dari tautan dalam berbagai jenis kotak peringatan*/. Peringatan-Suscess .Alert-link {color: #2b542c;}. Peringatan. .Alert-link {Color: #843534;}contoh:
<Div Role = "Alert"> <strong> Bagus sekali! </strong> Anda berhasil membaca <a href = "#"> Pesan peringatan penting ini </a> </div> <div role = "waspada"> <strong> dengan baik dilakukan! </strong> Anda berhasil membaca <a href = "#"> <strong> Pesan peringatan penting ini </a> </Div berhasil <a href = "#"> <strong> Pesan peringatan penting ini </a> </div> <a href = "#" href = "#"> Pesan peringatan penting ini </a> </div> <div role = "waspada"> <strong> Bagus sekali! </strong> Anda berhasil membaca <a href = "#"> Pesan peringatan penting ini </a> </div> <Div Role = "ALERT"> <Strong> WORT! </strong> Anda berhasil membaca <a href = "#" Role = "Alert"> <strong> Bagus sekali! </strong> Anda berhasil membaca <a href = "#"> Pesan peringatan penting ini </a> </div>
Saya akan memperkenalkan begitu banyak tentang komponen thumbnail bootstrap dan komponen kotak peringatan yang diperkenalkan oleh artikel ini kepada Anda. Saya harap ini akan membantu Anda!