tutorial pengembangan web terbaru
 

Bootstrap Buttons

❮ Sebelumnya Berikutnya Bab ❯

Styles tombol

Bootstrap memberikan tujuh gaya tombol:

Untuk mencapai tombol gaya di atas, Bootstrap memiliki kelas-kelas berikut:

  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

Contoh berikut menunjukkan kode untuk tombol yang berbeda gaya:

Contoh

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
Cobalah sendiri "

Kelas Tombol dapat digunakan pada <a> , <button> , atau <input> elemen:

Contoh

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Cobalah sendiri "

Mengapa kita menaruh # di href atribut link?

Karena kita tidak memiliki halaman untuk link ke, dan kami tidak ingin mendapatkan "404" pesan, kita menempatkan # sebagai link. Dalam kehidupan nyata itu harus tentu saja menjadi URL yang nyata ke halaman "Cari".

ukuran tombol

Bootstrap memberikan empat ukuran tombol:

Kelas-kelas yang mendefinisikan ukuran yang berbeda adalah:

  • .btn-lg
  • .btn-md
  • .btn-sm
  • .btn-xs

Contoh berikut menunjukkan kode untuk ukuran tombol yang berbeda:

Contoh

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Cobalah sendiri "

Tombol blok Tingkat

Sebuah tombol tingkat blok meliputi seluruh lebar dari elemen induk.

Menambahkan kelas .btn-block untuk membuat tombol tingkat blok:

Contoh

<button type="button" class="btn btn-primary btn-block">Button 1</button>
Cobalah sendiri "

Active / Buttons Dinonaktifkan

Sebuah tombol dapat diatur untuk aktif (muncul ditekan) atau cacat (unclickable) negara:

Kelas .active membuat tombol muncul ditekan, dan kelas .disabled membuat tombol diklik:

Contoh

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Cobalah sendiri "

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»

Lengkap Tombol Referensi Bootstrap

Untuk referensi yang lengkap dari semua kelas tombol, pergi ke lengkap kami Tombol Referensi Bootstrap .


❮ Sebelumnya Berikutnya Bab ❯