Membuat Bootstrap List
Kalian dapat membuat tiga jenis daftar HTML:
- Unordered list – Daftar item yang urutannya tidak penting. Daftar item dalam unordered list ditandai dengan bullet.
- Ordered list – Daftar item yang urutannya penting secara eksplisit. Daftar item dalam ordered list yang diurutkan ditandai dengan angka, mis. 1, ⅵ, dll.
- Definition list – Daftar istilah dengan deskripsi yang terkait.
Unstyled Ordered dan Unordered List
Terkadang kalian mungkin perlu menghapus styling form default dari list item. Kalian dapat melakukan ini dengan hanya menerapkan kelas .list-unstyled ke masing-masing elemen <ul> atau <ol>.
<ul class="list-unstyled">
<li>Home</li>
<li>Products
<ul>
<li>Gadgets</li>
<li>Accessories</li>
</ul>
</li>
<li>About Us</li>
<li>Contact</li>
</ul>
Output dari contoh di atas akan terlihat seperti ini:
Catatan: Kelas .list-unstyled menghapus list-style standar dan left padding-nya hanya dari item daftar yang merupakan turunan langsung dari elemen <ul> atau <ol>.
Menempatkan Ordered dan Unordered List Items Dalam Baris yang Sama
Jika kalian ingin membuat menu horizontal menggunakan ordered atau unordered list, kalian perlu menempatkan semua item daftar dalam satu baris, yaitu berdampingan. Kalian dapat melakukan ini hanya dengan menerapkan kelas .list-inline ke masing-masing <ul> atau <ol>, dan kelas .list-inline-item ke elemen <li>.
<ul class="list-inline">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">Products</li>
<li class="list-inline-item">About Us</li>
<li class="list-inline-item">Contact</li>
</ul>
Output dari contoh di atas akan terlihat seperti ini:
Membuat Horizontal Definition List
Istilah dan deskripsi dalam definition list juga dapat disejajarkan secara horizontal berdampingan menggunakan kelas yang telah ditentukan sistem grid Bootstrap. Berikut contohnya:
<dl class="row">
<dt class="col-sm-3">User Agent</dt>
<dd class="col-sm-9">An HTML user agent is any device that interprets HTML documents.</dd>
<dt class="col-sm-3 text-truncate">Client-side Scripting</dt>
<dd class="col-sm-9">Client-side scripting generally refers to the category of computer programs on the web that are executed by the user's web browser.</dd>
<dt class="col-sm-3">Document Tree</dt>
<dd class="col-sm-9">The tree of elements encoded in the source document.</dd>
</dl>
Output dari contoh di atas akan terlihat seperti ini:
Catatan: Untuk istilah definisi yang lebih panjang, kalian bisa menerapkan class .text-truncate pada elemen <dt> untuk memotong teks dengan ellipsis (…).
