Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)
Dalam seri ini tentang Bootstrap 3, kami mengajak Anda melalui semua fitur baru dalam versi terbaru dari kerangka kerja populer ini. Dalam tutorial terakhir kita melihat beberapa perubahan komponen, dan kali ini kami akan menyelesaikannya dengan melihat perubahan pada komponen lain, seperti label, badge, list group, dan panel.
Perubahan Label dan Badge
Ini akan menjadi bagian yang sangat singkat, karena hanya ada dua perubahan untuk label, dan satu yang besar untuk badge.
Untuk membuat label di BS2, kita hanya memberikan nama class label-xxxx, di mana xxxx mewakili status label yang digambarkan. Di bawah BS3, kita sekarang memiliki dua bagian definisi class, dan perubahan nama dari error menjadi danger untuk class warna merah, sehingga sekarang penamaannya cocok untuk segala sesuatu yang lain, dan cukup banyak.
Dan juga tidak ada ukuran class/pilihan untuk ini di BS3, seperti label mengambil ukuran dari wadah sekitarnya. Jadi, jika Anda membuat <span> dengan class label yang sesuai, dan kemudian membungkusnya di <H1>, ukuran label akan jauh lebih besar daripada yang lain.
Contoh kode berikut menunjukkan ini:
1 |
<h1><span class="label label-default">Default</span></h1> |
2 |
<h2><span class="label label-primary">Primary</span></h2> |
3 |
<h3><span class="label label-success">Success</span></h3> |
4 |
<h4><span class="label label-info">Info</span></h4> |
5 |
<h5><span class="label label-warning">Warning</span></h5> |
6 |
<h6><span class="label label-danger">Danger</span></h6> |
Badge, di sisi lain, telah mengalami perubahan yang lebih besar.
Dalam BS3, badge tidak lagi memiliki class warna kontekstual. Yaitu, tidak ada lagi label-success atau label-warning, seperti label sebelumnya dan dengan unsur-unsur lain.
Ini berarti Anda tidak dapat mewarnai badge dengan cara yang sama di BS2, dan label apapun yang Anda buat hanya dapat menggunakan warna abu-abu standar. Yah, setidaknya secara resmi Anda tidak bisa.
Jika Anda menerapkan alert-xxxxx bersama dengan class label pada <span> digunakan untuk label Anda, maka label akan mengambil warna dari class alert, dan sementara ini tidak didukung cara dalam melakukannya, itu tetap bekerja, dan memungkinkan Anda untuk menggunakan label seperti yang Anda lakukan dalam BS2.
Untuk mark up label standar, semua yang perlu Anda lakukan adalah menambahkan label dan class 'label-default' untuk <span>, dan Anda siap:
1 |
<span class="label label-default">This is a label</span> |
Jika Anda ingin meng-hack label untuk menggunakan warna yang berbeda, maka Anda dapat melakukannya sebagai berikut:
1 |
<span class="badge">Normal</span> |
2 |
<span class="badge alert-success">Success</span> |
3 |
<span class="badge alert-info">Info</span> |
4 |
<span class="badge alert-warning">Warning</span> |
5 |
<span class="badge alert-danger">Danger</span> |
Salah satu fitur bagus yang masih dimiliki komponen badge, adalah penggunaan pseudo selector empty:, memungkinkan untuk secara otomatis menghilang dari tampilan jika teksnya kosong. Ini membantu dengan perubahan internal yang dirancang untuk bekerja pada List group dan Pill list, karena itu sekarang berarti bahwa sangat mudah untuk membuat hal-hal seperti daftar pemberitahuan kotak masuk, dimana nilai-nilainya hilang ketika isi <span> dihapus. Berikut adalah contohnya:
1 |
<div class="col-md-4"> |
2 |
<ul class="nav nav-pills nav-stacked"> |
3 |
<li class="active"> |
4 |
<a href="#"> |
5 |
<span class="badge pull-right">42</span> |
6 |
Inbox |
7 |
</a>
|
8 |
</li>
|
9 |
<li class="active"> |
10 |
<a href="#"> |
11 |
<span class="badge pull-right">10000</span> |
12 |
Spam |
13 |
</a>
|
14 |
</li>
|
15 |
<li class="active"> |
16 |
<a href="#"> |
17 |
<span class="badge pull-right"></span> |
18 |
Lottery Wins |
19 |
</a>
|
20 |
</li>
|
21 |
</ul>
|
22 |
</div>
|
Jika Anda memeriksa kodenya, Anda akan melihat opsi terakhir dalam daftar tidak memiliki nilai di dalam tag span, yang disebabkan oleh pseudo selector empty:, menyebabkan browser untuk tidak menampilkannya. Namun, kedua kalinya Anda memasukkan apa pun di sana menggunakan JavaScript atau metode apapun yang dapat memanipulasi DOM, badge tersebut akan muncul kembali ke dalam keberadaannya tanpa ragu. Perhatikan juga penggunaan class kesejajaran pull-right untuk memastikan label ditempatkan di sisi kanan dari elemen, membuat segalanya tampak bagus dan selaras.
Perubahan List Group
List group adalah hal baru yang ditambahkan ke dalam BS3, dirancang untuk menggantikan navigation list BS2, dan memiliki kemampuan jauh lebih banyak daripada rekannya BS2.
Sekali Anda mulai menggunakannya, Anda akan menyadari bahwa list group lebih seperti kotak-kotak list-item yang styleable, dan jujur, semua yang diperlukan untuk membuat kotak list yang sepenuhnya styleable akan membungkus mereka dalam div mereka sendiri dan mengatur overflow menjadi tepat.
Komponen list group dasar dapat dibuat dengan markup yang mirip dengan berikut:
1 |
<ul class="list-group"> |
2 |
<li class="list-group-item">Cheese</li> |
3 |
<li class="list-group-item">Burger</li> |
4 |
<li class="list-group-item">Bun</li> |
5 |
<li class="list-group-item">Pickles</li> |
6 |
<li class="list-group-item">Tomato</li> |
7 |
</ul>
|
Seperti yang Anda lihat sebelumnya di bagian badge, Anda dapat menambahkan badge dan obyek lain ke daftar, dan jika Anda menambahkan mereka ke list group, mereka akan berbaris dengan sempurna:
1 |
<ul class="list-group"> |
2 |
<li class="list-group-item"><span class="badge pull-right">4</span>Cheese</li> |
3 |
<li class="list-group-item"><span class="badge pull-right">2</span>Burger</li> |
4 |
<li class="list-group-item"><span class="badge pull-right">1</span>Bun</li> |
5 |
<li class="list-group-item"><span class="badge pull-right"></span>Pickles</li> |
6 |
<li class="list-group-item"><span class="badge pull-right">2</span>Tomato</li> |
7 |
</ul>
|
Pengamatan paling jeli dari pemikiran Anda, "Ok, jadi list group terlihat baik, tapi mereka tetap saja <ul> yang berada di bawah permukaan, tidak sesuatu yang khusus tentang mereka."
Yah, mungkin Anda benar tentang itu... atau mungkin kita perlu bereksperimen sedikit lagi.
List group, tidak seperti class-class yang kita lihat di bagian navigation, tidak dapat hanya diterapkan pada unordered list. Sebuah list group dapat diterapkan untuk setiap kontainer induk, dan ketika melakukannya, styling akan menyebabkan semua turunan dari kontainer tersebut menjadi terkait. Lihatlah contoh berikut:
1 |
<div class="list-group"> |
2 |
<a class="list-group-item">Cheese</a> |
3 |
<a class="list-group-item">Burger</a> |
4 |
<a class="list-group-item">Bun</a> |
5 |
<a class="list-group-item">Pickles</a> |
6 |
<a class="list-group-item">Tomato</a> |
7 |
</div>
|
Sebagaimana ditunjukkan sampel kode ini, kita dapat membuat daftar link menggunakan tidak lebih dari <div> mengitari list, dan list itu kemudian langsung menjadi menu list-style dengan efek hover abu-abu terang. Namun, karena tag bagian dalam adalah tag <a>, kita dapat pergi lebih lanjut:
1 |
<div class="list-group"> |
2 |
<a class="list-group-item active"> |
3 |
<strong>Cheese</strong> |
4 |
<p>A delicious slice of ...</p> |
5 |
<img src="images/cheese.jpg" /> |
6 |
</a>
|
7 |
<a class="list-group-item"> |
8 |
<strong>Burger</strong> |
9 |
<p>Prime Aberdeen angus beef ...</p> |
10 |
<img src="images/burger.jpg" /> |
11 |
</a>
|
12 |
<a class="list-group-item"> |
13 |
<strong>Bun</strong> |
14 |
<p>A freshly baked soft sesame seed bun ...</p> |
15 |
<img src="images/bun.jpg" /> |
16 |
</a>
|
17 |
<a class="list-group-item"> |
18 |
<strong>Pickles</strong> |
19 |
<p>The finest pickles from the finest purveyors ...</p> |
20 |
<img src="images/pickle.jpg" /> |
21 |
</a>
|
22 |
<a class="list-group-item"> |
23 |
<strong>Tomato</strong> |
24 |
<p>Fresh organic tomatoes picked directly from the vine ...</p> |
25 |
<img src="images/tomato.jpg" /> |
26 |
</a>
|
27 |
</div>
|
Perhatikan bahwa kita masih mendapatkan, efek cell-hover penuh ketika mouse Anda diletakkan di atas sebuah link, dan dengan hanya menambahkan class active, seperti yang kita miliki dalam contoh lain, kita dapat menandai item sebagai yang aktif dan semuanya sambil mempertahankan satu set border dan tampilan dari setiap item yang berperilaku seperti elemen <ul> biasa.
Tapi mengapa berhenti di situ?
Seperti halnya dengan elemen lain di BS3, list group ini juga mempunyai kelas kontekstual mereka sendiri yang memberikan mereka makna dalam kumpulan warna standar:
1 |
<div class="list-group"> |
2 |
<a class="list-group-item list-group-item-success"> |
3 |
<strong>Cheese</strong> |
4 |
<p>...</p> |
5 |
<img src="images/cheese.jpg" /> |
6 |
</a>
|
7 |
<a class="list-group-item list-group-item-success"> |
8 |
<strong>Burger</strong> |
9 |
<p>...</p> |
10 |
<img src="images/burger.jpg" /> |
11 |
</a>
|
12 |
<a class="list-group-item list-group-item-success"> |
13 |
<strong>Bun</strong> |
14 |
<p>...</p> |
15 |
<img src="images/bun.jpg" /> |
16 |
</a>
|
17 |
<a class="list-group-item list-group-item-danger"> |
18 |
<strong>Pickles</strong> |
19 |
<p>...</p> |
20 |
<img src="images/pickles.jpg" /> |
21 |
</a>
|
22 |
<a class="list-group-item list-group-item-warning"> |
23 |
<strong>Tomato</strong> |
24 |
<p>...</p> |
25 |
<img src="images/tomato.jpg" /> |
26 |
</a>
|
27 |
</div>
|
Seperti yang Anda lihat, apa artine burger tanpa keju dan roti? Tomat dapat saya ambil atau tinggalkan, tetapi tetap tahan acarnya!
Perubahan Media Object dan Custom Thumbnail
Kita membahas dasar perubahan thumbnail untuk styling pada tutorial CSS sebelumnya, tetapi apa yang tidak kita masuki ke dalamnya adalah perubahan pada komponen sekitarnya.
Penggabungan yang sekarang ada di BS3 memungkinkan kita untuk menggabungkan class thumbnail dengan class grid untuk membuat daftar gambar yang mudah-digunakan. Cara yang paling dasar yang dapat kita gunakan adalah dengan menggunakan class row dan grid span, bersamaan dengan class thumbnail dasar, untuk membuat thumbnail berbaris sempurna, seperti berikut:
1 |
<div class="row"> |
2 |
<div class="col-md-3"> |
3 |
<a href="#" class="thumbnail"> |
4 |
<img data-src="holder.js/100%x180" /> |
5 |
</a>
|
6 |
</div>
|
7 |
<div class="col-md-3"> |
8 |
<a href="#" class="thumbnail"> |
9 |
<img data-src="holder.js/100%x180" /> |
10 |
</a>
|
11 |
</div>
|
12 |
<div class="col-md-3"> |
13 |
<a href="#" class="thumbnail"> |
14 |
<img data-src="holder.js/100%x180" /> |
15 |
</a>
|
16 |
</div>
|
17 |
<div class="col-md-3"> |
18 |
<a href="#" class="thumbnail"> |
19 |
<img data-src="holder.js/100%x180" /> |
20 |
</a>
|
21 |
</div>
|
22 |
</div>
|
Bagi Anda yang bertanya-tanya, saya menggunakan holder.js untuk menghasilkan gambar pengganti. Saya akan membiarkan Anda Google lokasinya (itu akan datang sebagai yang pertama tersedia); ini adalah alat yang hebat untuk ruang gambar, terutama ketika melakukan mockups untuk klien.
Contoh ini tidak ada yang benar-benar istimewa; Jika Anda telah membaca sisa seri ini, Anda mungkin sudah mengetahui betapa mudahnya untuk melakukan hal ini. Namun, jika kita menambahkan sedikit markup dan bekerja dengan ide yang sama, kita dengan mudah dapat menghasilkan sesuatu seperti berikut:
1 |
<div class="row"> |
2 |
<div class="col-md-3"> |
3 |
<div class="thumbnail"> |
4 |
<img data-src="holder.js/100%x180" /> |
5 |
<div class="caption"> |
6 |
<h3>Ecstasy requires exploration</h3> |
7 |
<p>The planet is radiating pulses. This life is nothing short of a blossoming oasis of transformative potentiality outside of the being.</p> |
8 |
<p>
|
9 |
<a href="#" class="btn btn-success" role="button">Like</a> |
10 |
<a href="#" class="btn btn-danger" role="button">Dislike</a> |
11 |
</p>
|
12 |
</div>
|
13 |
</div>
|
14 |
</div>
|
15 |
<div class="col-md-3"> |
16 |
<div class="thumbnail"> |
17 |
<img data-src="holder.js/100%x180" /> |
18 |
<div class="caption"> |
19 |
<h3>We exist as frequencies</h3> |
20 |
<p>This life is nothing short of a blossoming uprising of frequency aspiration. Potential is the richness of conscious living, and of us.</p> |
21 |
<p>
|
22 |
<a href="#" class="btn btn-success" role="button">Like</a> |
23 |
<a href="#" class="btn btn-danger" role="button">Dislike</a> |
24 |
</p>
|
25 |
</div>
|
26 |
</div>
|
27 |
</div>
|
28 |
<div class="col-md-3"> |
29 |
<div class="thumbnail"> |
30 |
<img data-src="holder.js/100%x180" /> |
31 |
<div class="caption"> |
32 |
<h3>To traverse the myth is to become one</h3> |
33 |
<p>It can be difficult to know where to begin. The totality is calling to you via sub-atomic particles. Can you hear it?</p> |
34 |
<p>
|
35 |
<a href="#" class="btn btn-success" role="button">Like</a> |
36 |
<a href="#" class="btn btn-danger" role="button">Dislike</a> |
37 |
</p>
|
38 |
</div>
|
39 |
</div>
|
40 |
</div>
|
41 |
<div class="col-md-3"> |
42 |
<div class="thumbnail"> |
43 |
<img data-src="holder.js/100%x180" /> |
44 |
<div class="caption"> |
45 |
<h3>We reflect, we heal, we are reborn</h3> |
46 |
<p>Through reiki, our essences are nurtured by purpose. You will soon be guided by a power deep within yourself.</p> |
47 |
<p>
|
48 |
<a href="#" class="btn btn-success" role="button">Like</a> |
49 |
<a href="#" class="btn btn-danger" role="button">Dislike</a> |
50 |
</p>
|
51 |
</div>
|
52 |
</div>
|
53 |
</div>
|
54 |
</div>
|
Membuat list vertikal sama mudahnya, tapi daripada menggunakan class thumbnail, kita sekarang perlu menggunakan class media object. Class-class ini dan markup terkait membuat tata letak yang mirip dengan contoh sebelumnya, tetapi bukannya muncul di bawah thumbnail, teksnya berbaris ke kanan.
Tujuan utama di sini adalah dalam komentar dan daftar pesan dengan sebuah gambar avatar, tetapi mereka dapat digunakan untuk item berita, daftar produk, dan banyak hal lainnya.
Untuk mark up sebuah media object, cukup gunakan div luar dengan class media. Kemudian, di dalamnya, gunakan class-class media-object, media-body, dan media-heading untuk mark up individu, seperti contoh berikut:
1 |
<div class="media"> |
2 |
<a class="pull-left" href="#"> |
3 |
<img class="media-object" data-src="holder.js/64x64" /> |
4 |
</a>
|
5 |
<div class="media-body"> |
6 |
<h4 class="media-heading">To follow the journey is to become one with it</h4> |
7 |
<p>The goal of ultrasonic energy is to plant the seeds of awareness rather than stagnation. You and I are beings of the quantum matrix. Purpose is a constant.</p> |
8 |
</div>
|
9 |
</div>
|
Seperti yang mungkin sudah dapat Anda bayangkan, tidak akan terlalu sulit untuk menambahkannya ke List group, atau beberapa struktur lain yang dibangun menggunakan sistem grid BS3. BS3 benar-benar membuatnya jauh lebih mudah daripada dengan menyediakan daftar class media object berdedikasi dan didukung markup.
Dengan hanya mengubah sedikit markup Anda, Anda dapat menghasilkan daftar lengkap media object, sebagai berikut:
1 |
<ul class="media-list"> |
2 |
<li class="media"> |
3 |
<a class="pull-left" href="#"> |
4 |
<img class="media-object" src="holder.js/64x64" /> |
5 |
</a>
|
6 |
<div class="media-body"> |
7 |
<h4 class="media-heading">Humankind has nothing to lose</h4> |
8 |
<p>Awareness is the growth of synchronicity, and of us. This life is nothing short of an unfolding explosion of infinite truth. We exist as sonar energy.</p> |
9 |
</div>
|
10 |
</li>
|
11 |
<li class="media"> |
12 |
<a class="pull-left" href="#"> |
13 |
<img class="media-object" src="holder.js/64x64" > |
14 |
</a>
|
15 |
<div class="media-body"> |
16 |
<h4 class="media-heading">It is a sign of things to come</h4> |
17 |
<p>Humankind has nothing to lose. We are at a crossroads of rebirth and discontinuity. We are in the midst of a consciousness-expanding maturing of guidance that will clear a path toward the quantum soup itself.</p> |
18 |
</div>
|
19 |
</li>
|
20 |
<li class="media"> |
21 |
<a class="pull-left" href="#"> |
22 |
<img class="media-object" src="holder.js/64x64" > |
23 |
</a>
|
24 |
<div class="media-body"> |
25 |
<h4 class="media-heading">Only a traveller of the galaxy may generate this canopy of life</h4> |
26 |
<p>We must learn how to lead unified lives in the face of delusion. Eons from now, we warriors will reflect like never before as we are reborn by the quantum soup. We must beckon ourselves and fulfill others.</p> |
27 |
</div>
|
28 |
</li>
|
29 |
</ul>
|
Jika Anda memasukkan <li> dan <ul> di dalam media list, BS3 secara otomatis akan inden mereka untuk memberikan efek hirarki induk/anak. Anda juga dapat menggunakan kombinasi yang berbeda dari pull-right dan pull-left di mana diperlukan untuk memposisikan gambar pada sisi yang berlawanan, sebagai contoh. Atau, untuk hal-hal yang sedikit berbeda, Anda dapat menggabungkan mereka dengan panel (yang akan segera kita lihat) dan struktur serupa lainnya untuk meletakkan border dan petunjuk kontekstual lain di sekitar semua list dan membungkus mereka sejajar untuk menghasilkan komponen komposit.
Perubahan Panel
Seperti list group, panel adalah tambahan baru untuk BS3—dan benar-benar tambahan yang berguna!
Kita semua terbiasa dengan hal-hal seperti form, misalnya, berada di dalam group box, atau bagian dari situs web yang secara logiknya dibagi dari satu sama lain. Panel BS3 memungkinkan Anda untuk dengan mudah mengontrol pemisahan ini secara logis.
Anda dapat memiliki panel dasar polos, panel dengan header, panel dengan judul di header, panel dengan footer, dan panel dengan serangkaian warna kontekstual.
Sebuah panel dasar ini dibangun dengan menggunakan dua elemen <div> dan tiga class CSS:
1 |
<div class="panel panel-default"> |
2 |
<div class="panel-body"> |
3 |
Panel content goes here |
4 |
</div>
|
5 |
</div>
|
Namun, hal ini tidak lebih baik jika tanpa judul, dan benar-benar seperti dalam contoh kode ini, adalah tidak lebih dari sebuah div dengan padding dan border di sekitarnya.
Namun, jika kita menambahkan elemen <div> ketiga, dan memberikan <div> tersebut class panel-heading, maka kita segera mendapatkan sesuatu yang sedikit lebih menarik:
1 |
<div class="panel panel-default"> |
2 |
<div class="panel-heading">Panel Header</div> |
3 |
<div class="panel-body"> |
4 |
Panel content goes here |
5 |
</div>
|
6 |
</div>
|
Header panel Anda tidak harus hanya <div> sederhana, Anda dapat menyertakan tag <hx> bersamaan dengan tag biasa lainnya, misalnya <img>, dan hal-hal yang akan mengubah ukuran yang diperlukan:
1 |
<div class="panel panel-default"> |
2 |
<div class="panel-heading"> |
3 |
<h1 class="panel-title">Panel Header</h1> |
4 |
<p>Panel sub header</p> |
5 |
</div>
|
6 |
<div class="panel-body"> |
7 |
<p>Panel content goes here</p> |
8 |
<p>Panel content goes here</p> |
9 |
<p>Panel content goes here</p> |
10 |
</div>
|
11 |
</div>
|
Anda juga dapat menerapkan panel footer dengan menambahkan elemen <div> setelah panel body dan menerapkan class panel-footer. Jika Anda ingin memberikan panel Anda lebih berarti, Anda juga dapat menggunakan warna kontekstual yang digunakan untuk segala sesuatu yang lain. Anda melakukan ini hanya dengan mengganti class panel-default dalam contoh kode sebelumnya dengan panel-primary, panel-success, panel-info, panel-warning, atau panel-danger.
panel-primarySatu hal untuk berhati-hati, meskipun—jika Anda menggunakan panel-footer dan kontekstual warna, footer TIDAK akan mengadopsi skema warna panel. Hal ini disengaja, sang pengembang BS3 merasa bahwa secara kontekstual, hanya isi panel yang penting. Semua informasi button, control, atau footer untuk menanggapi bahwa informasi tidak perlu disorot dengan cara yang sama, sehingga memungkinkan pengembang bebas untuk menambah warna kontekstual yang berbeda untuk kontrol yang berbeda sesuai yang diperlukan.
Panel juga dapat bekerja lancar dengan list group dan table. Jika Anda menggabung table dengan panel di dalam div induk, Anda mendapatkan sebuah panel seperti yang ditunjukkan sebelumnya, dan bergabung mulus dengan table di bawah ini, seperti berikut:
1 |
<div class="panel panel-primary"> |
2 |
<div class="panel-heading"> |
3 |
<h1 class="panel-title">Panel Header</h1> |
4 |
<p>Panel sub header</p> |
5 |
</div>
|
6 |
<div class="panel-body"> |
7 |
<p>Panel content goes here</p> |
8 |
<p>Panel content goes here</p> |
9 |
<p>Panel content goes here</p> |
10 |
</div>
|
11 |
<table class="table"> |
12 |
<thead>
|
13 |
<tr>
|
14 |
<th>#ID</th> |
15 |
<th>Name</th> |
16 |
<th>Twitter Handle</th> |
17 |
</tr>
|
18 |
</thead>
|
19 |
<tbody>
|
20 |
<tr>
|
21 |
<td>1</td> |
22 |
<td>Peter Shaw</td> |
23 |
<td>@shawty_ds</td> |
24 |
</tr>
|
25 |
<tr>
|
26 |
<td>2</td> |
27 |
<td>Digital Solutions UK</td> |
28 |
<td>@digitalsolut_uk</td> |
29 |
</tr>
|
30 |
</tbody>
|
31 |
</table>
|
32 |
</div>
|
Jika Anda menghapus <div> yang berisi panel body dari markup Anda, semuanya akan turun ke bawah, hanya menyisakan panel header dan border, dan mengarah langsung ke table—sangat bagus untuk hanya menyediakan table dengan header, jika itu adalah apa yang Anda butuhkan.
Menambahkan list group ke panel Anda juga sama-sama mudah, dan dilakukan dalam cara yang sama. Saya akan meninggalkan itu sebagai latihan bagi pembaca untuk bereksperimen.
Perubahan Lain
Sebelum kita akhirnya meninggalkan tutorial komponen, ada beberapa hal untuk menutupi: jumbotron, alert box, progress bar, dan well.
Jumbotron bukanlah sebuah elemen baru, tetapi penggunaannya dalam BS2 sedikit lebih berantakan daripada sekarang di BS3. Membuat jumbotron sangatlah sederhana; Anda hanya menggunakan <div> dengan class jumbotron, dan kemudian menambahkan beberapa markup opsional di dalamnya. Markup apapun yang Anda gunakan adalah sepenuhnya terserah Anda, tapi untuk mendapatkan efek yang diinginkan, markup yang direkomendasikan adalah:
1 |
<div class="jumbotron"> |
2 |
<h1>Bootstrap 3</h1> |
3 |
<p>Don't you just love this framework? It's elegant, simple to use, and frees you from so much boilerplate code.</p> |
4 |
<p><a class="btn btn-primary btn-lg" role="button">Heck yes I do</a></p> |
5 |
</div>
|
Dan hanya itu. Anda dapat menghapus rounded corner dan membuatnya lebar penuh dengan menukar urutan dan memindahnya di luar container, tetapi tidak ada class khusus atau warna opsional untuk ini—itu dirancang untuk menjadi besar dan tebal, dan menangkap perhatian Anda.
Berbicara tentang menangkap perhatian, kita juga memiliki sejumlah class alert, dan perubahan nyata antara versi BS2 dan BS3 adalah hanya mengubah nama class alert-error menjadi alert-danger. Selain itu, markup untuk menghasilkan alert masih sesederhana menggunakan <div> standar dengan class kontekstual yang sesuai ditambahkan:
1 |
<div class="alert alert-success">You did something ...</div> |
2 |
<div class="alert alert-info">Something happened you ...</div> |
3 |
<div class="alert alert-warning">Something happened that wasn't ...</div> |
4 |
<div class="alert alert-danger">You did something that was not liked ...</div> |
Jika Anda ingin menambahkan link alert menggunakan standar tag <a>, pastikan Anda menerapkan class alert-link pada tag anchor; yang akan memastikan bahwa mewarnai link tetap konsisten dengan kelas kontekstual warna yang digunakan.
Anda juga dapat menambahkan ikon cross/dismiss pada alert, memungkinkan pengguna untuk menutup dan menghilang dari layar. Untuk melakukan ini, kita perlu menambahkan elemen <button> dimark up dengan taburan data attribute dan class-class tambahan sebagai berikut:
Kita menambahkan class tambahan alert-dismissable ke <div> luar, dan kemudian menggunakan data attribute dismiss untuk menghubungkan JavaScript action ke method dismiss alert, menggunakan tombol sederhana.
Jika alert memberikan umpan balik operasional, maka ada satu lagi lainnya yang berhubungan dengan komponen umpan balik yang harus dimiliki—progress bar.
Tidak ada elemen umpan balik yang telah menghasilkan begitu banyak kebencian atau salam sederhana, bar sedikit berwarna. Dari BS2 ke BS3, satu-satunya perubahan yang dibuat di sini, seperti halnya class alert, adalah pengubahan nama warna kontekstual untuk mencocokkan skema keseluruhan di tempat lain dalam kerangka.
Markup HTML dasar untuk menghasilkan mereka tetap persis sama:
1 |
<div class="progress"> |
2 |
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> |
3 |
<span class="sr-only">60% Complete</span> |
4 |
</div>
|
5 |
</div>
|
Namun, satu hal yang benar-benar harus Anda perhatikan, (dan sesuatu yang telah saya tegaskan pada berbagai titik dalam seri ini), adalah kelompok atribut dan tambahan yang digunakan untuk membuat elemen ini ramah kepada pembaca layar dan peralatan serupa.
Sejak sebuah progress bar cenderung menjadi murni grafis secara alami, itu berarti bukan apa-apa untuk seseorang yang tidak dapat membaca layar. Unsur-unsur lainnya sebagian besar setidaknya memiliki cukup teks untuk memberikan ide kepada pembaca tentang apa yang terjadi; progress bar memerlukan semua bantuan yang mereka dapatkan. Anda akan melihat dari contoh sebelumnya bahwa kita telah menambahkan nilai-nilai aria tambahan untuk melaporkan persentase ada di nilai berapa, dan kita juga sudah menandai sebuah span hanya untuk pembaca layar, khususnya untuk memberikan laporan yang dapat didengar.
Namun, jika kita menghapus class sr-only, itu membuat bar kita terlihat sedikit lebih baik bagi mereka yang dapat melihatnya juga:
sr-only dihapus dari span bagian dalamTak usah dikatakan bahwa Anda juga dapat menambahkan progress-bar-success, progress-bar-info, progress-bar-warning dan progress-bar-danger ke <div> bagian dalam dengan class progress-bar, yang bertujuan mengambil keuntungan dari warna kontekstual yang tersedia.
Anda juga dapat menambahkan progress-striped dan/atau active ke <div> luar bersamaan dengan class progress untuk mendapatkan progress bar Anda bergaris-garis dan efek animasi. Efek progress bar ditumpuk bisa didapatkan dengan menempatkan beberapa <div> progress-bar ke dalam wadah luar progress dan menetapkan nilai-nilai mereka dengan tepat.
Elemen terakhir yang tersisa, adalah si rendah hati well. Tidak ada perubahan sejak BS3, tetapi sekarang memiliki tambahan class yang disebut well-sm. Tidak ada sihir yang terlibat di sini— jika Anda ingin area kotek sederhana, dengan latar belakang berbayang, cukup membuat elemen <div>, tambahkan class well padanya, dan kemudian tambahkan konten Anda di dalamnya. Well sangat berguna untuk sidebar dan/atau footer, atau sesuatu yang terlalu sederhana untuk menjamin dimasukkan ke dalam sebuah panel penuh atau area berbatas. Tidak ada warna kontekstual atau tindakan khusus, ini sederhana, efektif dan mudah digunakan:
1 |
<div class="well">Hello World!</div> |
Tutorial ini merupakan sebuah bab dari Bootstrap 3 Singkat, eBook gratis dari tim di Syncfusion.
