Belajar Bootstrap Part 7 Mengenai Button Pada Bootstrap

bewoksatukosong.com | Kalau kemarin kita belajar Belajar Bootstrap Part 6 Form Bagian 2. Tutorial kali ini, om bewok akan menjelaskan mengenai button. Kalau ada yang belum tau button itu apa. button itu tombol yang sering kita gunakan, seperti tombol submit, tombol daftar, tombol sign in, Kali ini kita akan belajar menggunakan button bootstrap, ini adalah hal penting jika kita ingin membuat website. Cara membuat website paling mudah, maksud om bewok syntax paling mudah button sama heading . Mau tau bedanya dengan button biasa ? Ayo Kita Belajar

- Baca :

Tutorial Bootstrap Series Dari Dasar Hingga Membuat Website

1. Button Tags

Dalam Tags button ada beberapa class yaitu <a>, <button>, <input> element

Mari kita praktekan satu persatu, untuk itu om bewok akan memberikan contoh kodinganya di bawah.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Belajar Button</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  </head>
  <body>
     <a  class="btn btn-default" href="#" role="button">Link</a>
     <button class="btn btn-default" type="submit">Button</button>
     <input class="btn btn-default" type="button" value="input">
     <input class="btn btn-default" type="submit" value="submit">
  </body>
</html>

Hasilnya kamu bisa lihat dibawah.

Gambar I.1 Button Tags

Anak Kecil : Terus om bewok biasanya pake yang mana dari itu semua ? dan Pada Kesempatan apa kita pake dari 4 tags button itu ?, maksudnya harus menggunakan apa dulu nih kita buat yang masih belajar ?

Om bewok heran, nih anak masih kecil tapi pertanyaanya kayak ngetest om bewok, jangan - jangan nih orang master dari segala master.

Pertama pertanyaan yang bagus, terima kasih nak. oke terserah om bewok aja#thug life, itu jawaban yang bercanda, tapi kalau jawaban serius nya adalah
Tergantung dari keperluan pembuatan website juga sih. Om bewok bingung jawabnya, tapi nanti akan terjawab di tutorial pembuatan website bootstrap ini, di akhir tutorial.

2. Button Style
Pada siang hari, sedang ada acara kumpul - kumpul, karena mereka sedang melakukan reunian SD, lalu mereka sedang ngobrol menarik mengenai waktu mereka jaman SD. Lalu datenglah temanya yang telat, lalu andi pun bilang
andi : wih si ari, akhirnya dateng juga lo bro.
ari : iya sorry nih, soalnya kan lo tau, macet jalanan bro.
andi : tapi style-an baju lo keren abis bro, kayak ini hip - hop, pasti mahal harganya ya.
ari : ga mahal kok bro, cuman 4juta, lagipula belinya di pasar malam.
ando : diem sejenak.

Kesimpulan dari cerita tersebut adalah si ari telat ikut reunian, tapi si andi memperhatikan style-an ari yang cukup keren.

Udah itu aja, udah serius ya ? sebenarnya ga ada hubunganya sama button bootstrap ini haha

Bercanda, maksud om bewok dari obrolan tersebut jika kita implementasikan ke bootstrap, bahwa button ini mempunya beberapa style juga loh, walaupun biasa aja, tapi tetap keren loh. gimana sih om bewok tadi katanya biasa aja sekarang malah di bilang keren ?. *hehe

Dalam button style terdapat 6 jenis style yang dapat kita gunakan, tapi 2 nya adalah default dan link biasa. Mari kita pelajari saja langsung. Kodinganya ada di bawah ya


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Belajar Button style</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  </head>
  <body>
      <!-- button standart -->
      <button type="button" class="btn btn-default">Button Standart</button>

      <!-- button biru primary -->
      <button type="button" class="btn btn-primary">Button Primary</button>


      <!-- button hijau success -->
      <button type="button" class="btn btn-success">Button Success</button>

      <!-- button biru muda info -->
      <button type="button" class="btn btn-info">Button Info</button>

      <!-- button kuning warning -->
      <button type="button" class="btn btn-warning">Button Warning</button>

      <!-- button merah danger -->
      <button type="button" class="btn btn-danger">Button Danger</button>

      <!-- button link -->
      <button type="button" class="btn btn-link">Link</button>
  </body>
</html>

Hasilnya seperti dibawah ini ya

Gambar II.1 Button Style

Ini adalah button style bootstrap, cukup simple dan warna yang bisa masuk dari warna apapun, nice bootstrap.

3. Ukuran Button Bootstrap

Hmm kalau kita lihat button style, ukuranya gede sekali, nah untuk itu om bewok akan memberikan cara memperkecil, default, memperbesar button. untuk button kecil, default, besar digunakan tergantung pada kebutuhan, untuk itu lihat tutorial terakhir series dari bootstrap ini ya.

Ukuran button bootstrap yang di tentukan oleh si bootstrap sendiri adalah large, default, small, dan extra small, konsepnya sama seperti kita belajar grid sistem bootstrap, yang belum belajar grid sistem boostrap bisa kamu pelajari di sini Belajar Bootstrap Grid . Agar tidak penasaran, langsung saja kita pelajari.

Kodinganya seperti biasa, ada di bawah ya.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Belajar Size Button</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  </head>
  <body>
      <!-- button standart large-->
      <button type="button" class="btn btn-default btn-lg">Button Standart</button>

      <!-- button biru primary -->
      <button type="button" class="btn btn-primary">Button Primary</button>


      <!-- button hijau success Small Button -->
      <button type="button" class="btn btn-success btn-sm">Button Success</button>

      <!-- button biru muda info Extra Small  Button -->
      <button type="button" class="btn btn-info btn-xs">Button Info</button>

      <!-- button kuning warning Large -->
      <button type="button" class="btn btn-warning btn-lg">Button Warning</button>

      <!-- button merah danger Extra Small Button -->
      <button type="button" class="btn btn-danger btn-xs">Button Danger</button>

      <!-- button link Small Butoon -->
      <button type="button" class="btn btn-link btn-sm">Link</button>
  </body>
</html>

Maka Hasilnya seperti dibawah ini ya

Gambar III.1 Button Size Style

btn-lg : Large Button
untuk default tidak perlu kasih class, hanya kasih class untuk button style maka dia sudah default sizenya
btn-sm : Small Button
btn-xs : Extra Small Button

Itu di gunakan ketika memanggil button size.

- Baca :

Tutorial Bootstrap Series Dari Dasar Hingga Membuat Website

Seperti yang sudah om bewok singgung sebelumnya, konsepnya seperti grid layout bootstrap

xs (Untuk handphone ukuran nya lebih kecil dari 768px) cara pemanggilanya menggunakan .col-xs-
sm (Untuk tablets ukuranya lebih kecil atau sama dengan 768px) cara pemanggilanya seperti .col-sm -
md (Untuk Medium Devices dekstop yang ukuranya lebih kecil atau sama dengan 992px) Cara pemanggilanya seperti .com-md-
lg (Untuk Large Devices dekstop yang ukuranya lebih kecil atau sama dengan 1200px). Cara pemanggilanya seperti .com-lg-

Pada saat kita di class sudah memanggil yang namanya button style, lalu kita lanjut lagi dengan menggunakan spasi lalu kita beri class untuk size, seperti di contoh.

Om Bewok kalau bikin button ber-urutan kebawah bagaimana caranya om ?

Kamu hanya perlu menambakan btn-block . Contoh kodinganya seperti dibawah ya


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Belajar Button</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  </head>
  <body>
      <!-- button kuning warning -->
      <button type="button" class="btn btn-warning btn-block">Button Warning</button>

      <!-- button merah danger -->
      <button type="button" class="btn btn-danger btn-block">Button Danger</button>
  </body>
</html>

Maka Hasilnya seperti dibawah ini ya.

Gambar III.2 Button Style Block

Kita bisa lihat didalam button class kita hanya menambahkan btn-block, it's work.

Itu saja tutorial mengenai button boostrap, selanjutnya kita belajar mengenai Image Boostrap. Kalau kamu ingin lihat tutorial dari awalnya, kamu bisa check di sini

Tutorial Bootstrap Series Dari Dasar Hingga Membuat Website