Tutorial Bootstrap

Cara Menggunakan Framework Bootstrap?

Bagaimana cara menggunakan framework bootstrap – Semakin populernya framework bootstrap, sehingga banyak para programmer menggunakannya. Selain karena kepopulerannya juga karena kemudahan serta fitur – fiturnya yang melimpah.

Bootstrap digunakan untuk memudahkan dalam pembuatan desain layout website yang responsive (dapat menyesuaikan dengan layar).

Lalu bagaimana cara menggunakan bootstrap?

Untuk menggunakan bootstrap ada beberapa cara yang biasa dipakai. Yang pertama adalah menggunakan source dari CDN (Content Delivery Network).

 

CDN adalah sebuah sistem jaringan server yang digunakan untuk mendistribusikan source kode atau konten yang berada dalam website agar dapat di akses (loading) lebih cepat.

Mengapa demikian? Karena data website yang akan diakses sudah disalin di server-server CDN (CDNS) yang berada diberbagai belahan dunia.

 

Lalu yang kedua adalah dengan cara mendownload file bootstrap dan mengimportnya menggunakan tag link dan script. Nah cara yang kedua inilah yang akan kita pakai. Silahkan download bootstrap terlebih dahulu.

Setelah file bootstrap diunduh, maka kita akan mengekstraknya. Kita bisa mengekstraknya dimana saja namun agar memudahkan dalam proses import ke file html, maka lebih baik diekstrak di folder dimana file html berada.

Karena kita akan menggunakan tag link dan script pada html, maka saya berasumsi kamu sudah sedikit memahami cara penggunaanya. Silahkan import menggunakan tag link dan script beberapa file bootstrap berikut.

  1. bootstrap.css
  2. jquery.js
  3. bootstrap.js

Untuk file lainnya kita akan membahasnya dilain kesempatan.

Perhatikan baris kode nomor 7, 8, 9. Untuk file bootstrap.css diimport menggunakan tag link, sedangkan file jquery.js dan bootstrap.js diimport menggunakan tag script.

Selanjutnya kita akan mencoba membuat sebuah tombol menggunakan bootstrap. Letakkan baris kode berikut diantara tag body (semua penulisan class bootstrap di antara tag body).

 

Maka hasil yang akan ditampilkan adalah sebuah tombol berwarna.

Bagaimana cara menggunakan framework bootstrap

 

Untuk class-class bootstrap yang lain kamu bisa mempelajarinya di situs resminya.

Dengan menggunakan bootstrap maka proses pembuatan website akan lebih cepat dan tentunya bersifat responsive atau dapat menyesuaikan dengan layar dimana website tampil. Sehingga dapat memberikan tampilan yang terbaik kepada para pengunjung web.

Leave a Reply

Your email address will not be published. Required fields are marked *