Bootstrap berisi desain berbasis HTML dan CSS yang di gunakan untuk merancang sebuah website ataupun aplikasi web. Template pada boostrap yaitu untuk tipografi, formulir, tombol, navigasi, dan komponen lainnya, serta juga ekstensi opsional JavaScript. Bootstrap adalah kerangka kerja bagi CSS yang sumbernya terbuka dan bebas digunakan untuk membuat situs web dan aplikasi web. Tidak seperti kebanyakan kerangka kerja web lainnya. kelebihan template yang kita buat dengan bootstrap akan menyesuaikan diri dengan lebar layar dari masing-masing device.
Twitter Blueprint adalah nama asli dari Boostrap. Kata ‘Twitter’ pada namanya karena pada awalnya dikembangkan untuk sosial media Twitter. Bootstrap sendiri mengalami beberapa perkembangan dari yang pertama bernama Blueprint yang kemudian berganti menjadi Bootstrap.
Pada 31 Januari 2012, Bootstrap 2 dirilis, yang menambahkan sistem layout dua belas kolom grid yang responsif, versi ini mendukung Glyphicons, beberapa komponen baru, serta perubahan dari beberapa komponen yang sudah ada.
Kemudian pada 19 Agustus 2013, Bootstrap 3 dirilis, yang di desain ulang. Pada 29 Oktober 2014, Mark Otto mengumumkan Bootstrap 4 sedang dalam pengembangan.
Pertama dari Bootstrap 4 dirilis pada 19 Agustus 2015 pada versi ini hampir sama dengan versi 3 namun ada banyak perkembangan yang signifikan. Untuk versi yang akan datang adalah Bootstrap 5 yang sedang dalam masa pengerjaan.
A. Cara Menginstalan Bootstrap
Sebelum menggunakan boostrap pastikan andaharus menginstal/memasukkan bootstrap terlebih dahulu
1: Buat Direktori Baru Kemudian Download Bootstrap
Untuk mencari Boostrap bisa anda cari di situs resmi Bootstrap dan akan mendapat file Zip. File zip ini nantinya perlu Anda ekstrak terlebih dahulu ke dalam folder project supaya dapat digunakan.
2: Ekstrak File Bootstrap
Ekstrak Zip tersebut di folder project anda.
3: Buat Sebuah File Index.html
Setelah membuat file itu anda tinggal memasukkan/memanggil boostrap yang berada di folder.
B. Cara Pembuatan Bootstrap
Berikut adalah langkah langkah pembuatan bootstrap dengan simple
1. Membuat Tabel
Anda bisa memanggil class-class yang berada pada boostrap, kemudian masukkan table contohnya “.table”, “.table-striped”, “.table-bordered”, dan “.table-hover”. Anda juga bisa mewarnai class tersebut dengan “.success”, “.danger”, “.info”. “.warning”, dan “.active”.
2. Mengatur Tampilan Gambar
Anda juga bisa mengatur tampilan seperti “.img-responsive”, “.img-rounded”, ”img-circle”, dan ”img-thumbnail”
3. Membuat Pesan Peringatan (Alert)
Untuk membuat peringatan anda bisa menggunakan “.alert-success”, “.alert-info”, “.alert-warning”, atau “.alert-danger”.
4. Membuat Tombol
Dalam membuat tombol dengan boostrap ada beberapa jenis yaitu “.btn”, “.btn-default”, “.btn-primary”, “.btn-success”, “.btn-info”, “.btn-warning”, “.btn-danger”, dan “.btn-link”.
5. Membuat Panel
Panel sendiri digunakan untuk memisahkan tiap bagian pada desainya Berikut adalah variasi pada panel: “.panel-default”, “.panel-primary”, “.panel-success”, “.panel-info”, “.panel-warning”, dan “.panel-danger”.
C. Penutup
Dari pengertian Boostrap yang berisi desain HTML dan CSS, cara penginstalan, dan pembuatan bisa kita pahami jika menggunakan bootstrap sangat membantu dalam pembuatan website maupun aplikasi web.
Leave a Reply