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.
Daftar grup adalah komponen yang fleksibel dan kuat yang tidak hanya dapat digunakan untuk menampilkan serangkaian elemen sederhana, tetapi juga untuk konten khusus yang kompleks. List Group dapat digunakan untuk membuat daftar daftar, navigasi vertikal dan efek lainnya, dan juga dapat membuat komponen yang lebih indah dengan komponen lain. List Group juga merupakan komponen independen dalam kerangka Bootstrap, jadi ia juga memiliki kode sumber independen sendiri:
Kurang: Daftar-kelompok.Less
Sass: _list-group.scss
Grup daftar terlihat seperti item daftar simbol daftar dihapus dan dilengkapi dengan beberapa gaya tertentu. Grup daftar dasar dalam kerangka bootstrap terutama mencakup dua bagian:
GROUP Daftar: Wadah grup daftar, yang biasa digunakan adalah elemen UL, atau dapat berupa elemen OL atau div
Daftar-kelompok-item: Item daftar, yang biasa digunakan adalah elemen LI, atau bisa menjadi elemen div
Tidak ada terlalu banyak pengaturan gaya untuk grup daftar dasar, dan jarak, perbatasan, dan sudut bulat terutama ditetapkan;
.list-group {Padding-left: 0; margin-bottom: 20px;}. Daftar-gulung-item {position: relatif; display: block; padding: 10px 15px; margin-bottom: -1px; latar belakang-color: #fff; perbatasan: 1px solid #ddd; 4px; Border-top-right-radius: 4px;}. Daftar-grup-item: anak-anak terakhir {margin-bottom: 0; border-bottom-radius-radius: 4px; border-bottom-leftom-radius: 4px;}Mari kita lihat contoh:
<h1>Basic List Group</h1><ul><li>Braised Potato Rice</li><li>Spicy Fried Chicken Noodles</li><li>Corilla Chop Egg Tofu</li><li>Fried Horseshoe in Dutch Beans</li><li>Hawthorn Ribs</li><li>Fried River Shrimp with Chives</li></ul>
Daftar grup dengan lencana
Grup daftar dengan lencana sebenarnya merupakan efek menggabungkan komponen lencana dan komponen daftar dasar dalam kerangka bootstrap. Metode spesifiknya sangat sederhana. Cukup tambahkan komponen lencana "lencana" ke .list-group-item.
Prinsip Implementasi:
Atur float kanan untuk lencana, tentu saja, jika dua lencana muncul dalam item daftar pada saat yang sama, jarak di antara mereka juga ditetapkan.
.list-group-item> .badge {float: right;}. List-group-item> .badge + .badge {margin-right: 5px;}contoh:
<h1>List group with badge</h1><ul><li><span>13</span>Baised rice with bacon and potatoes</li><li><span>20</span>Spicy flavor fried chicken nuggets</li><li><span>12</span>Corilla peeled egg tofu</li><li><span>5</span>Fried horseshoe in Dutch Kacang </li> <li> <span> 8 </span> Hawthorn Ribs </li> <li> <span> 15 </span> Udang Sungai Goreng di Biak </li> </ul>
Daftar grup dengan tautan
Grup daftar dengan koneksi sebenarnya berarti bahwa setiap item daftar memiliki efek tautan. Apa yang orang umumnya pikirkan adalah menambahkan tautan ke teks item daftar berdasarkan grup daftar dasar, seperti:
<ul><li><a href="#">Bao pork braised rice</a></li><li><a href="#">Spicy fried chicken nuggets</a></li><li><a href="#">Corilla peeled egg tofu</a></li><li><a href="#">Fried horseshoe in Dutch Kacang </a> </li> <li> <a href = "#"> Hawthorn Ribs </a> </li> <li> <a href = "#"> Udang sungai goreng di lemak kaki </a> </li> </ul>
Efeknya adalah sebagai berikut:
Ada kerugian untuk ini, yaitu, area klik tautan hanya valid dalam teks; Tetapi sering kali saya berharap bahwa setiap area item daftar dapat diklik, jadi saya perlu menambahkan gaya tambahan ke label tautan: Tampilan: blok; Tetapi dalam kerangka kerja bootstrap, metode implementasi lain masih diadopsi, yaitu untuk menggantikan UL.list-group dengan div.list-group, dan Li.list-group-item dengan a.list-group-item, sehingga efek yang diinginkan dapat dicapai.
Prinsip Implementasi:
Jika Anda menggunakan a.list-group-item, gaya perlu diproses, seperti: Menghapus garis bawah teks, meningkatkan efek suspensi, dll.; Berikut ini adalah kode sumber CSS:
a.list-group-item {warna: #555;} a.list-group-item .list-group-item-heading {color: #333;} a.list-group-item: hover, a.list-group-item: fokus {color: #555; Teks-Dekorasi: Tidak Ada; Latar Belakang: #F5: F5 F5: #555; Text-Decoration: None; #F5 F5: #f5 f5: #555; Text-Decoration: None-None; #f5 f5 f5Penggunaan grup daftar tautan:
<h1> Daftar grup dengan tautan </h1> <ul> <a href = "#"> Bacon dan nasi kentang yang dikenakan </a> <a href = "#"> nugget ayam goreng goreng </a> <a href = "#"> corilla peeled egg tofu </a> </a href = "#"> corilla peeled egg tofu </a> <a href = "#"#"> corilla egg lega tofu </a> <a href =" href = "#"> Hawthorn Ribs </a> <a href = "#"> udang sungai goreng dengan daun bawang </a> </ul>
Efeknya adalah sebagai berikut:
Grup daftar khusus
Kerangka Bootstrap menambahkan dua gaya ke grup daftar tautan:
.list-group-item-heading: Digunakan untuk menentukan gaya header item daftar
.list-group-item-text: Digunakan untuk menentukan konten utama dari item daftar
Fungsi terbesar dari dua gaya ini adalah membantu pengembang menyesuaikan konten dalam item daftar
Prinsip Implementasi:
Dua gaya ini terutama mengontrol warna teks dalam keadaan yang tidak kompatibel. Berikut ini adalah kode sumber CSS:
a.list-group-item.list-group-item-heading {color: #333;}. Daftar-grup-item. warisan;}. Daftar-grup-item. .list-group-item-heading, .list-group-item.active: fokus .list-group-item-heading, .list-group-item.active .list-group-item-heading> .list-group- item.active: hover. Small, .list-group-item.active .list-group-item-heading> .small, .list-group- item.active: hover .list-group-item-heading> .small, .list-group-item.active: fokus .list-group-item-heading> .small {wol color: wol color: wol color: insinit; {{{{{wol color-grup-grup. .list-group-item-text, .list-group-item.active: hover .list-group-item-text, .list-group-item.active: focus .list-group-item-text {color: #e1edf7;}. List-group-item-heading {margin-Top: 0; {margin-bottom: 0; line-height: 1.3;}Penggunaan grup daftar khusus
<h1> Grup Daftar Kustom </h1> <ul> <a> <h4> Daftar 1 Judul </h4> <p> Daftar 1 Daftar Konten Daftar Konten 1 Daftar Konten 1 Daftar Konten 1 Daftar Konten 1 Daftar Konten 1 Daftar Konten Daftar Konten 2 Daftar Konten 2 Daftar Konten 2 Daftar Konten Konten Daftar Konten Konten Konten Daftar Konten 1 Konten Daftar Konten 2 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 2 content list 3 content list 3 content list 3 content list 3 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten Daftar Konten 3 Daftar Konten Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 4 Daftar Konten 4 Daftar Konten 3 Konten Daftar Konten 3 Konten Daftar Konten 3 Konten Daftar Konten 3 Konten Daftar Konten 3 list 4 content list 4 content list 4 content list 4 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 content list 3 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 4 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Daftar Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Konten Daftar Konten 6 Konten Daftar Konten 6 Daftar 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten
Pengaturan Status untuk Item Daftar
Kerangka Bootstrap juga memberikan efek keadaan untuk menggabungkan item daftar, terutama grup daftar daftar. Metode implementasi mirip dengan komponen yang diperkenalkan di atas. Di grup daftar, Anda hanya perlu menambahkan nama kelas ke item daftar yang sesuai: .Active (mewakili keadaan saat ini), .Disabled (mewakili keadaan yang dinonaktifkan)
Prinsip Implementasi:
Dalam hal gaya, warna latar belakang dan teks item daftar terutama ditata. Berikut ini adalah kode sumber CSS:
.list-group-item.disabled, .list-group-item.disabled: hover, .list-group-item.disabled: fokus {color: #777; latar belakang-color: #eee;}. List-group-item.active, .list-group-item.active: hover ,. #fff; latar belakang-warna: #428bca; border-color: #428bca;}contoh:
<h1> Daftar Pengaturan Status Grup </h1> <ul> <a> <h4> Daftar 1 Judul </h4> <p> Daftar 1 Daftar Konten 1 Daftar Konten 1 Daftar Konten 1 Daftar Konten 1 Daftar Konten 1 Daftar Konten 1 Daftar Konten Daftar Konten 1 Daftar Konten 2 Daftar Konten 2 Daftar Konten Daftar Konten 1 Konten Daftar Konten 1 Daftar Konten Daftar Konten 2 Daftar Konten 2 Daftar Konten Daftar Konten 2 Daftar Konten 2 Daftar Konten 2 Daftar Konten 2 Daftar Konten 2 Daftar Konten 3 Daftar Konten Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten Daftar Konten 4 Daftar Konten 4 Daftar Konten 4 Daftar Konten 4 Daftar Konten 4 Daftar Konten 4 Daftar Konten 4 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Konten Daftar Konten 3 Konten Daftar Konten 4 Daftar Konten 4 Daftar Daftar 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten Daftar Konten 3 Daftar Konten Daftar Konten 3 Daftar Konten 3 Daftar Konten 4 Daftar Konten 4 Daftar Konten 3 Daftar Konten Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 3 Daftar Konten 4 Daftar Konten Daftar Konten 4 Daftar Konten 4 Daftar Konten 4 4 Daftar Konten 4 Daftar Konten 4 Daftar Konten 4 Daftar Konten 4 Daftar Konten 4 Daftar Konten 4 Daftar Konten 5 Daftar Konten 5 Daftar Konten 5 Konten Daftar Konten 5 Daftar Konten Konten 4 Konten Daftar Konten 4 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 5 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Content list 6 Daftar Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Konten Daftar Konten 6 Konten Daftar Konten 6 Daftar 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Daftar Konten 6 Konten Konten
Efeknya adalah sebagai berikut (item daftar ketiga dinonaktifkan. Ada ikon yang dinonaktifkan ketika mouse dipindahkan. Berikut ini adalah tangkapan layar langsung, dan efek ini tidak dapat dilihat):
Grup daftar warna -warni
Komponen grup daftar sama dengan komponen peringatan. Bootstrap menyediakan warna latar belakang dan warna teks yang berbeda untuk berbagai negara. Anda dapat menggunakan nama kelas ini untuk mendefinisikan item daftar dengan warna latar belakang yang berbeda:
.list-group-item-success: sukses hijau (warna latar belakang) .list-group-item-info: informasi biru (warna latar belakang) .list-group-item-warning: peringatan kuning (warna latar belakang) .list-group-item-danger: kesalahan merah (warna latar belakang)
Prinsip Implementasi:
Nama -nama kelas ini hanya memodifikasi warna latar belakang dan warna teks, dan kode sumber yang sesuai adalah sebagai berikut:
.list-group-item-success {color: #3c763d; latar belakang-color: #dff0d8;} a.list-group-item-success {color: #3c763d;} a.list-group-item-success .list-group-item-heading {: color: warisan;} a.list-group-item-success: hover, a.list-group-item-success: fokus {warna: #3c763d; latar belakang-warna: #d0e9c6;} a.list-group-item-success.active, a.list-group-item-success. #fff; latar belakang-warna: #3c763d; border-color: #3c763d;}Untuk kode gaya negara lainnya, silakan periksa file kode sumber. Jika Anda ingin menambahkan warna latar belakang ke item daftar, cukup tambahkan nama kelas yang sesuai ke class.lis-group-item.
Penggunaan grup daftar warna -warni:
<h1> grup daftar warna -warni </h1> <ul> <a href = "#"> daftar item1 <span> 10 </span> </a> <a href = "#"> Daftar item1 <span> 10 </span> </a> <a href = "#"> Daftar item1 <span> 10 </span> </a> <a href = "#" href = "#"> Daftar item1 <span> 10 </span> </a> </ul>
Efeknya adalah sebagai berikut: