Penerapan Buttons pada Web ~ Risma Anggraeni

Disini banyak koding-koding dalam penerapan Web salah satunya berikut contohnya

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:

<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">

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:

<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>

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>

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>

Grup tombol

Bootstrap memungkinkan Anda untuk kelompok serangkaian tombol bersama-sama (pada satu baris) dalam kelompok tombol:
Gunakan <div> elemen dengan kelas .btn-group untuk membuat grup tombol:
Contoh

<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>

Tip: Daripada menerapkan tombol ukuran untuk setiap tombol dalam kelompok, menggunakan kelas .btn-group-* ukuran semua tombol dalam kelompok:
Contoh

<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>

Grup Tombol vertikal

Bootstrap juga mendukung kelompok tombol vertikal:
Menggunakan kelas .btn-group-vertical untuk membuat grup tombol vertikal:
Contoh

<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>

Grup Tombol dibenarkan

Span seluruh lebar layar, gunakan .btn-group-justified kelas:
Misalnya dengan <a> elemen:
Contoh

<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>

Catatan: Untuk <button> elemen, Anda harus membungkus setiap tombol di .btn-group kelas:
Contoh

<div class="btn-group btn-group-justified">
<div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
</div>
</div>

Nesting Tombol Grup & Dropdown Menu

kelompok tombol sarang untuk membuat menu dropdown:
Contoh

<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
</div>
</div>

Dropdown Tombol Berpisah

Contoh

<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
    <li><a href="#">Tablet</a></li>
    <li><a href="#">Smartphone</a></li>
</ul>
</div>

Referensi : http://www.w3schools.com/bootstrap/bootstrap_buttons.asp

Risma Anggraeni

Jumat, 05 Februari 2016