Cara Menggunakan Bootstrap 3 untuk Membuat Web
Ditulis oleh Kressna Galuh D Herlangga, dipublikasi pada 21 Dec 2015 dalam kategori Tutorial.jpg)
Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh MARK otto dan Jacob Thomton. Saat ini Bootstrap dikembangkan secara open source dengan lisensi MIT. Kita bisa memantau perkembangan proyek Bootstrap melalui web resminya di getsbotstrap.com dan Githubnya di https://github.com/twbs/bootstrap.
Jujur saja, saya sendiri sangat terbantu oleh Bootstrap. Banyak sekali tampilan web yang telah saya buat dengan bantuan Bootstrap, bahkan web CodePolitan yang ini pun kami kembangkan tamplatenya dengan Bootstrap. Bootstrap sangat memanjakan kita dalam membuat tampilan web dan membuat kerja menjadi lebih cepat. Bagaimana tidak, kita tidak lagi harus memulai semuanya dari nol ketika membuat tampilan web. Bootstrap telah menyediakan banyak sekali class CSS dan plugin JavaScript yang bisa langsung kita pakai untuk membantu mempermudah kita membuat halaman web. Karena kemudahaan penggunaan, banyaknya komponen dan kelengkapan dokumentasinya, saat ini Bootstrap menjadi salah satu front-end framework yang paling banyak digunakan di dunia.
Saat tulisan ini dibuat sebenernya udah ada Bootstrap 4, namun masih versi Alpha. So, kita pakai saja dulu Bootstrap 3-nya yang udah stabil untuk memulai belajar sambil menunggu Bootstrap 4 versi stabilnya keluar.
Sebelum kita akan mulai bagaimana cara menggunakan Bootstrap dalam membuat halaman web, kita perlu tahu dulu bagaimana cara Bootstrap itu bekerja. Sehingga nanti kita bisa mengoptimalkan manfaatnya buat pembuatan web kita. Jadi pada dasarnya Bootstrap merupakan sebuah kumpulan class CSS dan plugin JavaScript yang sudah siap pakai. Biasanya kan ketika kita membuat sebuah tampilan web kita akan membuat file HTML yang di dalamnya berisi berbagai macam TAG HTML.
Misalnya saja ketika kita ingin membuat sebuah tombol berwarna merah seperti berikut:
Maka yang biasa kita lakukan adalah membuat sebuah TAG HTML yaitu TAG BUTTON kemudian memberikan CLASS, contohnya tombol-merah, seperti berikut:<button type="button" class="tombol-merah">CONTOH TOMBOL</button>.tombol-merah {
background: #c0392b;
color: #ffffff;
border: 1px solid #c0392b;
padding: 20px 30px;
}
Kalau kita ingin membuat tombol merah, kita cukup memberikan class btn dan btn-danger
pada TAG BUTTON yang ingin kita buat merah, maka simsalabim langsung
berubah jadi merah dengan indah, bahkan tanpa kita turun tangan untuk
menulis kode CSS-nya.<button type="button" class="btn btn-primary">CONTOH TOMBOL</button>
Nggak kalah gaul dan ketche kan tombolnya? Hehehe... :DWah tombolnya kecil banget, saya pengen tombolnya agak besar
Yasudah tambahkan class btn-lg pada tombol tersebut, maka akan langsung berubah jadi besar tombolnya. Karena Bootstrap punya 4 jenis ukuran untuk tombol, tinggal yang mana yang kita gunakan, tergantung kebutuhan.<button type="button" class="btn btn-primary btn-lg">CONTOH TOMBOL</button>
Oke, intinya seperti itu. Jadi si Bootstrap itu sudah menyediakan
banyak sekali class yang bisa kita gunakan, mulai dari tombol, form,
tabel, grid, nav, list, dan lain sebagainya.Tapi bagaimana jika dari tombol yang disediakan Bootstrap tidak ada yang saya inginkan, atau saya ingin memodifnya?
Nah disitulah baru kita menulis kode CSS tambahan kita. Karena sejatinya Bootstrap hanyalah sebuah framework yang memungkinkan untuk mempermudah kerja kita, namun pasti ada saja sesuatu yang tidak akan ada pada Bootstrap yang kita butuhkan. Tapi paling tidak kerjaan kita pasti menjadi lebih cepat dan terbantu.Oke, saya paham. Jadi sekarang bagaimana caranya saya bisa memulai menggunakan Bootstrap?
Baik, untuk bisa menggunakan Bootstrap berikut ini langkah-langkahnya:1. Download File Bootstrap
Untuk memulainya, pertama-tama kita harus mendownload file Bootstrap terlebih di http://getbootstrap.com/getting-started/.
Kemudian klik tombol Download Bootstrap yang paling
kiri. FYI, di situ kan ada beberapa jenis file Bootstrap yang bisa
didownload, untuk sementara abaikan saja dulu. Dua tombol sisanya itu
merupakan pembahasan yang terpisah :DSetelah selesai mendownload maka kita akan mendapatkan sebuah file zip dengan nama bootstrap-3.3.6-dist.zip.
2. Ekstrak File Bootstrap
Selanjutnya ekstraklah file Bootstrap yang telah didownload tadi (bootstrap-3.3.6-dist.zip) kemudian simpan di sebuah folder tertentu. Akan muncul sebuah folder dengan nama bootstrap-3.3.6-dist dan di dalamnya ada beberapa folder lagi yaitu css, js dan fonts. Jika file Bootstrap yang kamu download sama versinya dengan saat tulisan ini dibuat, maka kurang lebih seperti berikut isi file bootstrap-3.3.6-dist.zip yang telah diekstrak tadi.bootstrap-3.3.6-dist/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
3. Buatlah Sebuah File
Selanjutnya, buatlah sebuah file sebagai bahan percobaan. Misalnya dengan nama index.html, simpan file tersebut di dalam folder bootstrap-3.3.6-dist tadi, kemudian tuliskan kode berikut:
jidokasystem.com www.jidokasystem.co.id
Komentar
Posting Komentar