Cara Pasang Component Panels pada Bootstrap

Halo teman teman.. kali ini kita akan belajar bagaimana Cara Pasang Component Panels pada Bootstrap. Panels pada Bootstrap adalah komponen yang di gunakan ketika kalian ingin menempatkan komponen atau elemen ke dalam sebuah kotak yang sudah 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 Dasar 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 untuk 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 untuk 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 untuk 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

Untuk 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>Alamat</th>
    	<th>Pekerjaan</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 adalah 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

sekian tutorial Cara Pasang Component Panels pada Bootstrap, semoga bermanfaat yah 😀