Button Style
Bootstrap menyediakan beberapa pilihan style button dengan class berikut ini :
  • .btn
  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link
Berikut ini beberapa contoh script dari button style
<button type="button" class="btn">Basic</button>
<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>

Class button bisa digunakan dalam atau element :
<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">

Button Size
Bootstrap juga menyediakan 4 tombol yang berbeda berdasarkan ukuran seperti :
<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>
Blok Level Buttons
Blok level button merupakan span yang mencakup seluruh lebar pada induknya. dengan menambahkan class .btn-block untuk membuat block button :
<button type="button" class="btn btn-primary btn-block">Button 1</button>
Active/Disabled Buttons
Button yang sudah dibuat bisa juga di aktifkan atau di non aktifkan dengan class tombol .active agar bisa di gunakan atau dengan class .disabled untuk tombol agar tidak bisa diclick :
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

 
Top