Mempercantik Website dengan Bootstrap

Saat ini banyak sekali seorang programmer handal, terutama handal dalam pembuatan website. Untuk membuat sebuah website diperlukan kecerdikan atau kepandaian dalam mendesain. Mengapa? Karena semakin cantiknya desain sebuah website, maka akan semakin menarik minat yang melihatnya.

Saat ini yang sering sekali digunakan untuk mendesain adalah Bootstrap. Karena dapat mempermudah dan mempercepat pembuat website. Apa sih bootstrap itu? Bootstrap adalah library(pustaka/kumpulan fungsi-fungsi) dari framework css yang dibuat khusus untuk bagian front-end dari suatu website. Didalamnya terdapat berbagai jenis file, diantaranya HTML, CSS, dan Javascript. 

Sejarah Bootstrap

Bootstrap awalnya dibuat oleh programmer twitter yaitu Mark Octo dan Jacob Thornton sejak tahun 2011. Sejak diluncurkan tahun 2011, bootstrap telah berevolusi dari proyek yang hanya berbasis css menjadi framework yang lebih lengkap yang juga berisi javascript, icons,Forms, dan button.

Pada januari 2012, Bootstrap merealease versi 2.0 yang sudah terdapat fitur responsive layout. Dan sejak saat itu bootstrap semakin banyak digunakan, sehingga menjadi proyek github dan dicopy hingga 20.000 kali.

Pada 2014, Bootstrap merealease versi 3.0 yang didalamnya sudah mengakomodasi konsep mobile first artinya dalam pembuatannya mulai dari layar yang terkecil bertahap ke layar yang lebih besar .

Dan yang terbaru adalah versi 4 .0 sebagai penyempurnaan dokumentasi dan menambah beberapa fitur tambahan yaitu memberikan tampilan lebih baik bagi para pengembang ecommerce dan tampak lebih stabil.

Berikut kelebihan bootstrap:

1. Penggunaannya sangat menghemat waktu
2. Tampilannya yang terlihat modern
3. Tampilannya responsive(mobile friendly), sudah mendukung segala jenis resolusi(pc, laptop, tablet, smartphone)
4. Sangat ringat
5. dll

Namun walaupun mudah digunakan, masih banyak orang-orang yang masih bingung dalam cara penggunaannya.Disini saya akan menjelaskan cara penggunaanya.

1. Download Bootstrap

Hal pertama yang dapat kalian lakukan yaitu melakukan instalasi bootstap, anda dapat mendowloadnya di http://getbootstrap.com/getting-started/ .

2. Install Bootstrap

Ada banyak cara yang dapat digunakan untuk menginstal bootstrap ini, namun cara yang paling banyak digunakan adalah dengan cara offline. Karena pengguna tidak lagi harus menggunakan koneksi internet untuk menggunakan Bootstrap ini.

Cara instal offline:

• Setelah anda download file bootstrap lalu anda ekstrak lalu letakkan didalam folder projek anda (didalam file htdocs). Misalkan saya akan membuat projek dengan nama latihan. maka saya akan menyimpan hasil esktrak tersebut didalam folder xampp/htdocs/latihan/bootstrap.

3. Hubungkan ke dalam file.

Buat sebuah file HTML atau PHP . Untuk menghubungkan css dengan file PHP atau HTML anda yaitu dengan cara memanggil file bootstrap yang ada pada folder projek anda.

Cara Memanggil :

 

link tersebut disiimpan di bawah title pada struktur html anda. fungsi href="css/bootstrap.css" disini berfungsi memanggil file css. dimana bootstrap tersebut disimpan didalam folder css dengan nama bootstrap css.

lalu hubungkan file anda dengan menambahkan file bootstrap.js dan jquery.js karena bootstrap bekerja dengan menggunakan bantuan js.

[removed][removed]
[removed][removed]

fungsi tersebut disimpa dibawah link bootstrap.

4. Panggil class Bootstrap untuk menggunakannya

Bootstrap digunakan dengan cara memanggil sebuah class-class. Karena Bootstrap adalah library(pustaka/kumpulan fungsi-fungsi), jadi kita hanya harus memanggil fungsi-fungsinya saja.

contoh penggunaannya:

Misalnya saya akan membuat button berwarna merah. maka saya akan menuliskan sintaks sebagai berikut:

TOMBOL MERAH

class "btn" tersebut merupakan class bootstrap untuk membuat tombol, dan "btn-danger" disini merupakan penentu warna untuk tombol yang akan kita buat.

 

Sekian penjelasan dari saya mengenai bootstrap, semoga bermanfaat bagi kelian semua yang ingin mempercantik halaman website yang telah dibuat dengan cepat dan mudah.

Terima kasih.