Apa Bootstrap itu?
Bootstrap adalah sebuah library framework CSS yang dibuat khusus untuk pengembangan front-end website. Bootstrap ini merupakan salah satu framework CSS, HTML dan Javascript yang banyak digunakan oleh web developer.
Menggunakan bootstrap untuk membuat tampilan front-end website sangat mudah dan cepat. Karena Anda hanya tinggal menambahkan class – class tertentu untuk memperindah website Anda.
Kumpulan komponnen class interface dasar telah disediakan oleh bootstrap yang dirancang untuk memciptakan tampilan web yang menarik, bersih dan ringan.
Selain komponen class interface, bootstrap juga memiliki fitur grid yang berfungsi untuk mengatur layout pada halaman website dengan mudah dan cepat.
Kita juga bisa menambahkan class dan CSS tersendiri untuk mengubah tampilan website sesuai yang diinginkan jika menggunakan framework ini.
Salah satu website terbesar di dunia yaitu Twitter juga menggunakan framework bootstrap dalam membangun interfacenya. Karena framework bootstrap ini dikembangkan oleh developer twitter maka bootstrap sering disebut twitter bootstrap.
Bootstrap berisi kumpulan class yang siap pakai. Misalnya, Anda ingin membuat sebuah tombol tanpa harus mengetikan syntax CSS, maka dengan bootstrap Anda dapat membuatnya sengan sangat cepat, hanya dengan menambahkan class btn.
Berikut adalah kelebihan dari bootstrap.
1. Penggunaan bootstrap dapat menghemat waktu.
2. Tampilannya sudah cukup modern.
3. Mobile friendly.
4. Sanagt ringan karena bootstrap dibuat terstruktur.
5. Dan masih banyak lagi. Anda dapat menemukannya setelah mencoba sendiri framework ini.
Untuk mempelajari framework bootstrap ini, akan lebih baik jika Anda paham tentang CSS lebih dahulu.
Cara Menginstal Bootstrap
Agar dapat menggunakan bootstrap, yang harus pertama kali Anda lakukan adalah mendownload bootstrap di situs resminya yaitu di http://getbootstrap.com
dan file jquery di http://jquery.com.
Berikut struktur isi dari bootstrap yang telah Anda download.
Ada banyak cara untuk menginstal framework bootstrap. Anda bisa menginstalnya dengan composer, bower, menggunakan npm, secara offline dan online.
1. Menggunakan Bower
Perintah yang ditulis:
Bower install bootstrap
2. menggunakan npm
Perintah yang ditulis:
Npm install bootstrap
3. Menggunakan Composer
Perintah yang ditulis:
Composer install bootstrap
Tapi cara yang paling banyak digunakan adalah no 4 dan 5 berikut ini.
4. Cara Online
Anda bisa memilih salah satu dari 3 perintah berikut untuk menginstal bootstrap secara online.
Syntax diatas bisa Anda tulis di tag
pada halaman HTML atau PHP Anda, sama seperti menghubungkan HTML dengan CSS atau Javascript.5. Cara Offline
Cara ini merupakan cara yang paling banyak digunakan oleh para developer. Anda dapat bekerja menggunakan bootstrap tanpa harus terkoneksi dengan internet lagi karena file framework bootstrapnya sudah ada dalam PC Anda sendiri.
Setelah Anda download file bootstrapnya silakan anda ekstrak file tersebut pada projek Anda. Contoh, saya disini meletakannya pada localhost saya dengan alamat localhost/rijwan/bootstrap/
Setelah itu buatlah sebuah file HTML atau PHP yang akan dihubungkan dengan framework bootstrap, contoh index.php. Dalam hal ini kita akan mencoba menggunakan class btn.
Karena bootstrap memerlukan jquery dalam penggunaannya maka file jquery yang sudah Anda download tadi pindahkan ke folder bootstrap.
Berikut isi dari file index.php.
Dapat kita lihat dari script diatas bahwa syntax yang dapat menghubungkan file index dan bootstrap diatas adalah
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />Setelah itu hubungkan file html Anda dengan jquery.js dan bootstrap.js. jquery.js harus selalu diletakan di bagian atas karena bootstrap bekerja menggunakan bantuan jquery bukan jquery menggunakan bantuan boostrap.
Syntax yang ditulis adalah sebagai berikut:
[removed][removed]
[removed][removed]
Class btn pada element button diatas merupakan class bootstrap yang biasa digunakan untuk membuat tombol. Lalu btn-primary dan btn-danger adalah untuk menentukan warna dari tombol yang kita buat.
Jika dijalankan maka hasilnya akan terlihat sebagai berikut.
Jangan lupa, perhatikanlah letak direktori file css dan js bootstrap serta jquery Anda pada saat menghubungkannya. Anda tidak perlu menghubungkan seluruh isi bootstrap, yang perlu dihubungkan hanya file bootstrap.css dan bootstrap.js.
Sekian tutorial ini saya buat, semoga bermanfaat dan selamat mencoba!
