Cara Pasang Component Panels pada Bootstrap

Halo teman teman.. kali ini kita akan belajar bagaimana Cara Pasang Component Panels di Bootstrap. Panels di Bootstrap yakni komponen yang di gunakan ketika kalian ingin menempatkan komponen atau unsur ke pada sebuah kotak yang telah di beri style sendiri oelh bootstrap . Nah Bootstrap sendiri telah menyediakan beberapa macam Panel yaitu :

Panel with heading

Panel with footer

Panel Contextual

Panel with Table

Panel with list Group

Contoh Mendasar kode panel kita hanya menambahkan class panel dan panel-default dan dibawahnya ada class panel-body, seperti kode di bawah ini:

<div class=panel panel-default>
  <div class=panel-body>
    Basic panel example
  </div>
</div>

yang akan menghasilkan panel seperti gambar di bawah ni

Sintak bagi Panel with heading seperti di bawah ini

<div class=panel panel-default>
  <div class=panel-heading>Panel heading without title</div>
  <div class=panel-body>
    Panel content
  </div>
</div>

<div class=panel panel-default>
  <div class=panel-heading>
    <h3 class=panel-title>Panel title</h3>
  </div>
  <div class=panel-body>
    Panel content
  </div>
</div>

hasilnya seperti di bawah ini

Sintak bagi Panel Footer seperti di bawah ini

<div class=panel panel-default>
  <div class=panel-body>
    Panel content
  </div>
  <div class=panel-footer>Panel footer</div>
</div>

Hasilnya seperti gambar di bawah

Sintax bagi Panel with contextual

<div class=panel panel-default>
  <div class=panel-heading>
    <h3 class=panel-title>Panel title</h3>
  </div>
  <div class=panel-body>
    Panel content
  </div>
</div>
<div class=panel panel-primary>
  <div class=panel-heading>
    <h3 class=panel-title>Panel title</h3>
  </div>
  <div class=panel-body>
    Panel content
  </div>
</div>
<div class=panel panel-success>
  <div class=panel-heading>
    <h3 class=panel-title>Panel title</h3>
  </div>
  <div class=panel-body>
    Panel content
  </div>
</div>
<div class=panel panel-info>
  <div class=panel-heading>
    <h3 class=panel-title>Panel title</h3>
  </div>
  <div class=panel-body>
    Panel content
  </div>
</div>
<div class=panel panel-warning>
  <div class=panel-heading>
    <h3 class=panel-title>Panel title</h3>
  </div>
  <div class=panel-body>
    Panel content
  </div>
</div>
<div class=panel panel-danger>
  <div class=panel-heading>
    <h3 class=panel-title>Panel title</h3>
  </div>
  <div class=panel-body>
    Panel content
  </div>
</div>

hasilnya seperti di bawah ini

Bagi sintax panel with table sintax nya seperti di bawah ini.

<div class=panel panel-default>
  <!-- Default panel contents -->
  <div class=panel-heading>Judul Satu</div>
  <div class=panel-body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure dolorum velit saepe sequi maiores quos id dolorem sapiente praesentium repellat dignissimos doloribus, odit consequuntur, ipsam numquam quaerat! Quis, perspiciatis, in.</p>
  </div>

  <!-- Table -->
  <table class=table>
    <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Domisili</th>
    <th>Aktifitas</th>
    </tr>
    <tr>
    <td>1</td>
    <td>Arif Budiman</td>
    <td>Jakarta</td>
    <td>Web Master</td>
    </tr>
    <tr>
    <td>2</td>
    <td>Risman Hakim</td>
    <td>Bogor</td>
    <td>Web Design</td>
    </tr>
    <tr>
    <td>3</td>
    <td>Reza Rahardian</td>
    <td>Bekasi</td>
    <td>Desain Grafis</td>
    </tr>
    <tr>
    <td>4</td>
    <td>Eky Zulianto</td>
    <td>Pandeglang</td>
    <td>Web Develop</td>
    </tr>
  </table>
</div>

hasilnya seperti di bawah ini.

terakhir yakni Panel with List Group, sintax nya seperti di bawah ini.

<div class=panel panel-default>
  <!-- Default panel contents -->
  <div class=panel-heading>Panel heading</div>
  <div class=panel-body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit officiis excepturi omnis repellendus nemo culpa eveniet earum alias inventore magnam hic quasi dolorum sequi doloremque minus nihil, ut, ipsa veniam.</p>
  </div>

  <!-- List group -->
  <ul class=list-group>
    <li class=list-group-item>Cras justo odio</li>
    <li class=list-group-item>Dapibus ac facilisis in</li>
    <li class=list-group-item>Morbi leo risus</li>
    <li class=list-group-item>Porta ac consectetur ac</li>
    <li class=list-group-item>Vestibulum at eros</li>
  </ul>
</div>

hasilnya seperti gambar di bawah ini

sekianlah panduan Cara Pasang Component Panels di Bootstrap, semoga bermanfaat yah 😀

Sumber https://kursuswebsite.org