- Baca :
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>
 |
| 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> |
| Gambar II.1 Button Style |
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>
 |
| 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 :
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> |
| Gambar III.2 Button Style Block |
Itu saja tutorial mengenai button boostrap, selanjutnya kita belajar mengenai Image Boostrap. Kalau kamu ingin lihat tutorial dari awalnya, kamu bisa check di sini
No comments:
Post a Comment