Bootstrap Buttons

I.Latar Belakang.Membuat suatu tampilan dengan Bootsrap.

II.Alat dan Bahan.  Laptop / PC
  W3SCHOOLS
  Sublime Text

III.Tujuan.Agar tampilan suatu program itu responsiv.

IV.Penjelasan.
Bootstrap ButtonsStyles tombolBootstrap memberikan gaya yang berbeda dari tombol:
Untuk mencapai tombol gaya di atas, Bootstrap memiliki kelas-kelas berikut:

•     .btn
•     .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">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>
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">
Mengapa kita menempatkan # dalam atribut href link?
Karena kita tidak memiliki halaman untuk link ke, dan kami tidak ingin mendapatkan "404" pesan, kami menempatkan # sebagai link. Dalam kehidupan nyata itu harus tentu saja menjadi URL yang nyata ke halaman "Cari".

ukuran tombolBootstrap menyediakan 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>

Block Level ButtonsSebuah tombol tingkat blok meliputi seluruh lebar dari elemen induk.
Menambahkan kelas .btn-blok untuk membuat tombol tingkat blok:
Contoh

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

Active/Disabled ButtonsSebuah tombol dapat diatur untuk aktif (muncul ditekan) atau cacat (diklik) state:

Kelas .active membuat tombol muncul ditekan, dan kelas .disabled membuat sebuah 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>

 Contoh :

 Maka outputnya :

V.Kesimpulan.Kita bisa gunakan bootstrap untuk membantu kita membuat tampilan web dengan cepat.

VI.Refrensi.   https://www.w3schools.com/bootstrap/bootstrap_typography.asp