tRikSonic
Tema
/ / Bootstrap 3 Button - Tutorial Bootstrap Indonesia

Bootstrap 3 Button - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 06.09
/ / Bootstrap 3 Button - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Button

Button adalah bagian pelengkap untuk situs web dan aplikasi. Button digunakan untuk berbagai tujuan seperti, mengirim sebuah data atau mengatur ulang bentuk HTML, melakukan tindakan interaktif yang dilakukan oleh user seperti menampilkan atau menyembunyikan sesuatu bagian di halaman web ketika tombol tersebut di klik atau ditekan.
Bootstrap 3 sudah menyediakan cara cepat, praktis dan mudah digunakan guna keperluan pembuatan sebuah tombol atau button

Tampilan Bootstrap 3 Button

Tampilan Button bisa diaplikasikan ke elemen HTML lainnya. Tapi, untuk penerapan secara normal dan terbaik adalah element <a>, <input> (untuk type button, submit dan reset), dan <button>.
Untuk mengatur tampilan button menggunakan Bootstrap 3 dapat menggunakan nama class sebagai berikut :
  1. .btn
    • Nama class .btn adalah nama class dasar yang harus ditulis sebelum nama class lainnya.
    • Contoh Penulisan : <button type="button" class="btn">Button</button>
  2. .btn-default
    • Contoh Penulisan : <button type="button" class="btn btn-default">Default</button>
  3. .btn-primary
    • Contoh Penulisan : <button type="button" class="btn btn-primary">Primary</button>
  4. .btn-info
    • Contoh Penulisan : <button type="button" class="btn btn-info">Info</button>
  5. .btn-success
    • Contoh Penulisan : <button type="button" class="btn btn-success">Success</button>
  6. .btn-warning
    • Contoh Penulisan : <button type="button" class="btn btn-warning">Warning</button>
  7. .btn-danger
    • Contoh Penulisan : <button type="button" class="btn btn-danger">Danger</button>
  8. .btn-link
    • Contoh Penulisan : <button type="button" class="btn btn-link">link</button>

Contoh :

<button type="button" class="btn">Dasar</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-info">Info</button>
<button type="button" class="btn btn-success">Success</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>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 <code>Button</code></h2>

<button type="button" class="btn">Dasar</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-info">Info</button>
<button type="button" class="btn btn-success">Success</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>

</div>
</body>
</html>

Contoh menggunakan element <a> dan <input>

<a class="btn btn-primary" href="#">Primary</a>
<a class="btn btn-success" href="#">Success</a>
  <hr/>
<input type="button" class="btn btn-default" value="Button"/>
<input type="submit" class="btn btn-primary" value="Submit"/>
<input type="reset" class="btn btn-danger" value="Reset"/>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 <code>Button</code> <small>pada element a dan input</small></h2>


<a class="btn btn-primary" href="#">Primary</a>
<a class="btn btn-success" href="#">Success</a>
  <hr/>
<input type="button" class="btn btn-default" value="Button"/>
<input type="submit" class="btn btn-primary" value="Submit"/>
<input type="reset" class="btn btn-danger" value="Reset"/>


</div>
</body>
</html>

Ukuran Button

Untuk mengatur ukuran button dapat menambahkan class .btn-xs, .btn-sm, .btn-md, dan .btn-lg
Keterangan :
  • .btn-xs : sangat kecil
  • .btn-sm : kecil
  • .btn-md : sedang
  • .btn-lg : besar

Contoh :

<button type="button" class="btn btn-info btn-xs">Button .xs</button>
<button type="button" class="btn btn-info btn-sm">Button .sm</button>
<button type="button" class="btn btn-info btn-md">Button .md</button>
<button type="button" class="btn btn-info btn-lg">Button .lg</button>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 <code>Button</code></h2>

<button type="button" class="btn btn-info btn-xs">Button .xs</button>
<button type="button" class="btn btn-info btn-sm">Button .sm</button>
<button type="button" class="btn btn-info btn-md">Button .md</button>
<button type="button" class="btn btn-info btn-lg">Button .lg</button>

</div>
</body>
</html>

Bootstrap 3 Button Block

Digunakan untuk membuat tampilan button menjadi membentang dari kanan kekiri meyesuaikan lebar dari element induknya.
Untuk menerapkan button block tambahkan class .btn-block

Contoh :

<button type="button" class="btn btn-danger btn-block">Button Block</button>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 <code>Button</code> Block</h2>

<button type="button" class="btn btn-block">Button Block</button>
<button type="button" class="btn btn-default btn-block">Button Block</button>
<button type="button" class="btn btn-primary btn-block">Button Block</button>
<button type="button" class="btn btn-info btn-block">Button Block</button>
<button type="button" class="btn btn-success btn-block">Button Block</button>
<button type="button" class="btn btn-warning btn-block">Button Block</button>
<button type="button" class="btn btn-danger btn-block">Button Block</button>
<button type="button" class="btn btn-link btn-block">Button Block</button>


<div style="width:150px;">
 <button type="button" class="btn btn-block">Button Block</button>
 <button type="button" class="btn btn-default btn-block">Button Block</button>
 <button type="button" class="btn btn-primary btn-block">Button Block</button>
 <button type="button" class="btn btn-info btn-block">Button Block</button>
 <button type="button" class="btn btn-success btn-block">Button Block</button>
 <button type="button" class="btn btn-warning btn-block">Button Block</button>
 <button type="button" class="btn btn-danger btn-block">Button Block</button>
 <button type="button" class="btn btn-link btn-block">Button Block</button>
</div>


</div>
</body>
</html>

Bootstrap 3 Button Active dan Disabled

Button active artinya mempunyai tampilan seperti ditekan, sedangkan button disabled artinya mempunyai tampilan seperti ditak aktif
Untuk menerapkannya gunakan class .active untuk aktif dan .disabled untuk nonaktif
Catatan : class .disabled pada button hanya mempengaruhi tampilan saja, tidak pada fungsi interaksi oleh user atau pengunjung. Misal jika .disabled mempunyai fungsi javascript maka, saat user menekan tombol tersebut javascript tersebut akan aktif.
Tips : untuk menonaktifkan fungsi pada button sertakan attribute disabled pada button

Contoh :

<button class="btn btn-danger">Button</button>
<button class="btn btn-danger active">Button Active</button>
<button class="btn btn-danger disabled">Button Disabled</button>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 <code>Button</code> Block</h2>

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

<hr/>
<h3>Tes interaksi user</h3>
<p>
Untuk melihat perbedaan fungsi attribute disabled VS class <code>.disabled</code>
Silahkan tekan 3 button di bawah ini.
</p>

<button onclick="alert('Test disabled')" 
  class="btn btn-danger disabled">
 Button class disabled
</button>

<button onclick="alert('Test disabled')" 
  class="btn btn-danger" 
        disabled="disabled">
 Button dengan attribute disabled
</button>

<p><br/></p>

<button onclick="alert('Test disabled')" 
  class="btn btn-danger disabled" 
        disabled="disabled">
 Button dengan attribute disabled dan class disabled
</button>


</div>
</body>
</html>

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

 
Loading.....
Postingan Lebih BaruBerandaPostingan Lama
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.