Bootstrap Tutorial: Cara Membuat List Item pada Bootstrap 5 - ambiskode

List merupakan suatu atribut yang digunakan untuk membuat suatu daftar tertentu dalam sebuah web.

Daftar tersebut dapat berupa daftar menu, perincian, menu navbar, daftar subjudul artikel, dsb.

Dalam pembuatan list sendiri, terdapat tiga macam tipe yang dapat kita gunakan, yaitu:

• Ordered list - Ordered list merupakan suatu list yang dalam perinciannya sudah terurut berdasarkan angka, misal : 1,2,3. I,II,III
• Unordered list - Unordered list merupakan suatu list yang perinciannya ditandai dengan style khusus, misal  : - , • , °
• Definition list - Definition list merupakan suatu list yang dalam perinciannya didasarkan pada kata kunci atau kata yang menjadi pendefinisinya.

Untuk lebih jelasnya, mari kita pelajari tutorial berikut.

1. Ordered List

Tipe List yang pertama yaitu Ordered list.

Seperti yang sudah saya tuliskan diatas, ordered list merupakan tipe perincian yang terurut berdasarkan angka.

Perhatikan program berikut.

		 	
    <div class="container rounded-3 bg-light p-4 border border-black">
      <p>Macam-macam Framework CSS:</p>
      <ol>
        <li>Bootstrap</li>
        <li>Tailwind</li>
        <li>PureCSS</li>
      </ol>
    
    <!-- Atau kita dapat membuat dengan angka romawi -->
      <p>Macam-macam Framework JavaScript:</p>
      <ol type="I">
        <li>Next JS</li>
        <li>Vue JS</li>
        <li>Angular JS</li>
      </ol>
    </div>
  

Menghasilkan output.

Macam-macam Framework CSS:

1. Bootstrap
2. Tailwind
3. PureCSS

Macam-macam Framework JavaScript:

1. Next JS
2. Vue JS
3. Angular JS

2. Unordered List

Secara default, tipe unordered list akan menampilkan marker list dengan style •.

Perhatikan program berikut.

		 	
    <div class="container rounded-3 bg-light p-4 border border-black">
      <p>Macam-macam Framework CSS:</p>
      <ul>
        <li>Bootstrap</li>
        <li>Tailwind</li>
        <li>PureCSS</li>
      </ul>
    </div>
  

Macam-macam Framework CSS:

• Bootstrap
• Tailwind
• PureCSS

Unstyled List

Selain menggunakan cara default, kita juga dapat membuat unordered list tanpa menggunakan marker style.

Perhatikan program berikut.

		 	
    <div class="container rounded-3 bg-light p-4 border border-black">
      <ul class="list-unstyled">
        <li>Home</li>
        <li>Tutorial
          <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
          </ul>
        </li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </div>
  

• Home
• Tutorial
  • HTML
  • CSS
  • JavaScript
• About
• Contact

Inline List

Selanjutnya, jika kita ingin membuat navbar menu pada header maupun footer, kita dapat menggunakan list secara inline atau sebaris.

Perhatikan program berikut.

		 	
    <div class="container rounded-3 bg-light p-4 border border-black">
      <ul class="list-inline">
        <li class="list-inline-item">Home</li>
        <li class="list-inline-item">Tutorial</li>
        <li class="list-inline-item">About</li>
        <li class="list-inline-item">Contact</li>
      </ul>
    </div>
  

• Home
• Tutorial
• About
• Contact

3. Definition List

Secara default, list dengan type definition list ini akan tampil secara horizontal.

Dengan elemen penyusunnya yaitu data terms dan data description.

Data terms ini merupakan kata terminologi atau kata kunci yang digunakan dalam membuat list.

Sedangkan, data description merupakan deskripsi atau penjabaran dari kata kuncinya tadi.

Perhatikan program berikut.

		 	
    <div class="container rounded-3 bg-light p-4 border border-black">
      <dl class="row">
        <dt class="col-sm-3">Home</dt>
        <dd class="col-sm-9">Home merupakan menu yang didalamnya memuat informasi induk (rumah) dari sebuah website.</dd>
        <dt class="col-sm-3">About</dt>
        <dd class="col-sm-9">About merupakan menu yang didalamnya memuat informasi tentang deskripsi website. Biasanya informasi yang dimuat tentang latar belakang berdirinya sebuah website, Layanan yang diberikan, hingga tujuan atau sasaran pasar dari web tersebut.</dd>
        <dt class="col-sm-3">Contact</dt>
        <dd class="col-sm-9">Contact merupakan menu yang didalamnya memuat informasi kontak dari sebuah website.</dd>
      </dl>
    </div>
  

Home

Home merupakan menu yang didalamnya memuat informasi induk (rumah) dari sebuah website.

About

About merupakan menu yang didalamnya memuat informasi tentang deskripsi website. Biasanya informasi yang dimuat tentang latar belakang berdirinya sebuah website, Layanan yang diberikan, hingga tujuan atau sasaran pasar dari web tersebut.

Contact

Contact merupakan menu yang didalamnya memuat informasi kontak dari sebuah website.

Pada program diatas, kita menggunakan tag <dl></dl> atau description list, yang menyatakan akan dibuatnya list dengan tipe definition list.

lalu didalam tag tersebut kita buat tag <dt> (data terms) sebagai kata terminologinya dan juga tag <dd> (data description) sebagai deskripsinya.

Perbedaan Ordered List dengan Definition List.

<ul>     <li></li>     <li></li>     <li></li> </ul>

<dl>     <dt></dt>     <dd></dd>     <dt></dt>     <dd></dd> </dl>

Itulah tadi pembahasan mengenai cara macam-macam type list didalam Bootstrap 5. Selanjutnya kita akan mempelajari tentang cara pembuatan List Group.