Bootstrap Part 4 : Membuat Tombol Dengan Bootstrap
Membuat Tombol Dengan Bootstrap
Selain mampu mendesign tampilan table, menu navigasi dan lain-lainnya, bootstrap juga memiliki kemampuan untuk mendesign tombol atau hyperlink. dan cara membuat tombol dengan bootstrap juga sangat mudah. anda hanya tinggal menambahkan class “btn” untuk mendifinisikan element menjadi tombol, dan kemudian mengatur warna tombol yang anda inginkan, serta mengatur ukuran tombol yang anda inginkan.
Bootstrap menyediakan beberapa class yang bisa kita gunakan untuk mendesign atau menciptakan bentuk tombol yang menarik. berikut ini adalah beberapa class bootstrap yang bisa di gunakan untuk membuat tombol, mengatur ukuran dan mengatur warna dari tombol tersebut.
- .btn
btn merupakan class bootstrap yang bisa di gunakan untuk membuat tombol. - .btn-xs
btn-xs merupakan class bootstrap untuk membuat tombol dengan ukuran sangat kecil atau extra kecil. - .btn-sm
btn-sm merupakan class bootstrap untuk membuat tombol dengan ukuran yang kecil. - .btn-md
btn-md merupakan class bootstrap untuk membuat tombol dengan ukuran sedang. - .btn-lg
btn-lg merupakan class bootstrap untuk membuat tombol dengan ukuran besar. - .btn-danger
btn-danger merupakan class bootstrap untuk membuat tombol berwarna merah. - .btn-default
btn-default merupakan class bootstrap untuk membuat tombol dengan warna standar bootstrap. - .btn-warning
btn-warning merupakan class bootstrap untuk membuat tombol berwarna kuning. - .btn-primary
btn-primary merupakan class bootstrap untuk membuat tombol berwarna biru. - .btn-info
btn-danger merupakan class bootstrap untuk membuat tombol berwarna biru langit. - .btn-success
btn-success merupakan class bootstrap untuk membuat tombol berwarna hijau.
Cara membuat tombol dengan bootstrap
Untuk membuat tombol dengan bootstrap anda bisa menggunakan tag <button> atau bisa juga menggunakan tag hyperlink yaitu <a>. Silahkan perhatikan contoh membuat tombol dengan bootstrap di bawah ini. yang menggunakan class-class tombol bootstrap yang telah di jelaskan di atas.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <title>Bootstrap Part 4 : Membuat tombol dengan Bootstrap</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> </head> <body> <h1>Cara Membuat tombol dengan Bootstrap | www.malasngoding.com</h1> <a href="#" class="btn btn-success btn-lg">Tombol</a> <a href="#" class="btn btn-success btn-md">Tombol</a> <a href="#" class="btn btn-success btn-sm">Tombol</a> <a href="#" class="btn btn-success btn-xs">Tombol</a> <br/><br/> <a href="#" class="btn btn-primary btn-lg">Tombol</a> <a href="#" class="btn btn-primary btn-md">Tombol</a> <a href="#" class="btn btn-primary btn-sm">Tombol</a> <a href="#" class="btn btn-primary btn-xs">Tombol</a> <br/><br/> <a href="#" class="btn btn-info btn-lg">Tombol</a> <a href="#" class="btn btn-info btn-md">Tombol</a> <a href="#" class="btn btn-info btn-sm">Tombol</a> <a href="#" class="btn btn-info btn-xs">Tombol</a> <br/><br/> <a href="#" class="btn btn-danger btn-lg">Tombol</a> <a href="#" class="btn btn-danger btn-md">Tombol</a> <a href="#" class="btn btn-danger btn-sm">Tombol</a> <a href="#" class="btn btn-danger btn-xs">Tombol</a> <br/><br/> <a href="#" class="btn btn-warning btn-lg">Tombol</a> <a href="#" class="btn btn-warning btn-md">Tombol</a> <a href="#" class="btn btn-warning btn-sm">Tombol</a> <a href="#" class="btn btn-warning btn-xs">Tombol</a> <br/><br/> <a href="#" class="btn btn-default btn-lg">Tombol</a> <a href="#" class="btn btn-default btn-md">Tombol</a> <a href="#" class="btn btn-default btn-sm">Tombol</a> <a href="#" class="btn btn-default btn-xs">Tombol</a> </body> </html> |
dan hasilnya Membuat tombol dengan bootstrap
membuat tombol dengan bootstrap
See the Pen BjWJmN by Malas Ngoding (@malasngoding) on CodePen.0
Sekian tutorial belajar bootstrap part 4 : Membuat tombol dengan bootstrap.
Tutorial Bootstrap Dasar Lainnya
Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap
Tutorial Menarik Lainnya
Membuat Template Blog Sederhana Dengan Bootstrap
Bootstrap Part 16 : Mengenal Grid System Bootstrap
Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel Dengan Bootstrap
