Tutorial Bootstrap #3: Membuat Button

Pada tutorial selanjutnya kita akan belajar bagaimana cara membuat button dengan Bootstrap, pada Bootstrap telah menyediakan berbagai style button/tombol, berikut class class yang digunakan untuk membuat button.

Class Style Button
Berikut ini adalah class untuk style button
  • btn 
  • btn-default
  • btn-primary
  • btn-success
  • btn-info
  • btn-warning
  • btn-danger
  • btn-link
Class tersebut dapat digunakan pada tag <input>,<a>  atau <button>, untuk menggunakannya, dapat dilihat pada syntax dibawah ini.

   <button type="button" class="btn">Klik Saya</button>
   <button type="button" class="btn btn-default">Klik Saya</button>
   <button type="button" class="btn btn-primary">Klik Saya</button>
   <button type="button" class="btn btn-info">Klik Saya</button>
   <button type="button" class="btn btn-success">Klik Saya</button>
   <button type="button" class="btn btn-warning">Klik Saya</button>
   <button type="button" class="btn btn-danger">Klik Saya</button>
   <button type="button" class="btn btn-link">Klik Saya</button>

Hasilnya dapat dilihat pada gambar dibawah ini.
Class Button Size 
Berikut ini adalah class untuk membuat ukuran / size button
  • btn-lg
  • btn-md
  • btn-sm
  • btn-xs
Untuk menggunakannya, dapat dilihat pada syntax berikut.

    <button class="btn btn-primary btn-lg">Besar</button>
    <button class="btn btn-success btn-md">Sedang</button>
    <button class="btn btn-warning btn-sm">Kecil</button>
    <button class="btn btn-danger btn-xs">Ekstra Kecil</button>

Hasilnya dapat dilihat pada gambar dibawah ini.
Class Active dan Disabled 
Berikut ini adalah class untuk mengaktifkan tombol (Active Button) dan menonaktifkan tombol (Disabled Button).

  • active
  • disabled

Untuk menggunakannya, dapat dilihat pada syntax dibawah ini. 


    <button class="btn btn-primary active">Active Button</button>
    <button class="btn btn-danger disabled">Disabled Button</button>

Hasilnya dapat dilihat pada gambar berikut.
Class Block Button
Brikut ini adalah class untuk membuat tombol menjadi melebar.
  • btn-block
Untuk menggunakannya, dapat dilihat pada syntax dibawah ini.

    <button class="btn btn-primary btn-block">Primary</button>
    <button class="btn btn-danger btn-block">Danger</button>

Hasilnya dapat dilihat pada gambar dibawah ini.

Implementasi
Pada tutorial sebelumnya kita pernah membahas cara membuat table dengan bootstrap, sekarang kita akan coba membuat table, yang berisikan data data statis dan memiliki tombol aksi pada tablenya, silahkan tuliskan syntax seperti dibawah ini.


<table class="table table-bordered table-responsive">
      <thead>
      <th>No</th>
      <th>Nama</th>
      <th>Username</th>
      <th>Email</th>
      <th>Aksi</th>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Sukiman</td>
          <td>@sukiman</td>
          <td>sukiman@example.com</td>
          <td>
            <a href="#" class="btn btn-primary">Edit</a>
            <a href="#" class="btn btn-danger">Hapus</a>
          </td>
        </tr>
        <tr>
          <td>2</td>
          <td>Januar</td>
          <td>@januar</td>
          <td>januar@example.com</td>
          <td>
            <a href="#" class="btn btn-primary">Edit</a>
            <a href="#" class="btn btn-danger">Hapus</a>
          </td>
        </tr>
        <tr>
          <td>3</td>
          <td>Wira</td>
          <td>@wira</td>
          <td>wira@example.com</td>
          <td>
            <a href="#" class="btn btn-primary">Edit</a>
            <a href="#" class="btn btn-danger">Hapus</a>
          </td>
        </tr>
        <tr>
          <td>4</td>
          <td>Aslihatin Nisa</td>
          <td>@aslihatinnisa</td>
          <td>aslihatinnisa@example.com</td>
          <td>
            <a href="#" class="btn btn-primary">Edit</a>
            <a href="#" class="btn btn-danger">Hapus</a>
          </td>
        </tr>
      </tbody>
    </table>

Hasilnya dapat dilihat pada gambar dibawah ini.
Sekian dulu tutorialnya, jika ada kesalahan, kekurangan atau hal hal lainnya silahkan tuliskan komentar anda dibawah ya.

Semoga bermanfaat.

0 Comments