Sebelum membaca artikel ini ada baiknya kamu sudah membaca tulisan saya sebelumnya Bootstrap, Framework CSS3 paling mantap karena disana terdapat penjelasan tentang langkah awal menggunakan boostrap.
Karena kemaren sudah buat folder belajar.com dan sudah saya beri penjelasan struktur peletakan file pada bootstrap. selanjutnya saya membuat sebuah file yang akan bernama index.html yang tersimpan di folder belajar.com
Seperti biasa saya harus memulai dengan mengetikan kode kerangka awal web. kemudian masukan css untuk bootstrapnya seperti berikut :
<html>
<head> <title>Belajar Bootstrap </title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
</body></html>
kemudian kita akan membuat sebuah button menggunkan class yang ada pada bootstrap dengan menambahkan kode <div class="container"><button class="btn btn-success btn-lg"> Tombol</button></div>.
class container berfungsi untuk menambahkan jarak. kode button tersebut memiliki class btn yang mana merupakan class standar dari bootstrap, kemudian class btn-success fungsinnya memberikan warna sesuai dengan typenya. dalam boostrap terdapat 7 type btn yaitu, default, success, primary, warning, info, danger dan link. berikut tampilan button menurut type nya masing - masing.
source code
Tampilan di browser
Sedangkan class btn-lg menandakan bahwa ukuran butto adalah large atau besar. bootstrap menyedian 4 ukuran button yang bisa digunakan. yaitu large (lg), default, small (sm), dan extra small (xs).