Cara Menggunakan Boostrap

Cara Menggunakan Boostrap - Bagi seorang front end developer bootstrap tentulah menjadi skill yang wajib dikuasai. karena banyak kemudahan yang akan diperoleh ketika menggunakan framework boostrap seperti waktu kerja yang menjadi lebih cepat, penulisan library yang rapi, dan yang menarik tampilan yang dihasilkan dapat langsung responsive.

sejauh yang penulis pahami, ada 2 cara dalam menggunakan framework boostrap yaitu secara online dan offline mode. masing masing memiliki kelebihan dan kekurangannya sendiri-sendiri.

1. Secara Online menggunakan service CDN
cukup dengan menambahkan link berikut didalam tag project anda
-untuk css

-untuk library javascriptnya


kelebihan dan kekurangan dari metode CDN ini antara lain:

  • ukuran file projek menjadi lebih ringan
  • ketergantungan terhadap koneksi internet, jika tidak ada koneksi internet library boostrap tidak dapat terbaca sehingga tampilan User interface projek bisa hancur
2. Mendownload library bootsrap dan diletakan di dalam projek

library bootsrap dapat anda download di https://getbootstrap.com/docs/4.2/getting-started/download/

anda juga dapat mendownloadnya disini atau disini untuk boostrap versi 4.2. setelah di download ekstrak file tersebut dan masukan ke projek kita
contohnya seperti berikut:
pada gambar diatas file bootstrap.min.css saya letakan di folder admin/resource/css/ untuk mengaksesnya tinggal disesuaikan di pathnya saja.

 kelebihan dan kekurangan dari metode ini antara lain:

  • pemakaian tidak tergantung pada koneksi internet, online dan offline tetap dapat berjalan
  • file ukuran projek menjadi lebih besar

sedangkan untuk teknis penggunaanya sendiri cukup mudah, teman teman tinggal memanggil nama class yang sudah disediakan oleh bootstrap. misal untuk membuat css sebuah button anda tinggal memanggil
pada kode tersebut "btn" dan "btn-primary" merupakan bagian dari class bootstrap. btn untuk css pada buttonnya sedangkan "btn-primary" untuk opsi warna yang disediakan bootsrap. anda banyak opsi warna lain tentunya. seperti pada gambar berikut

demikian turtorial tentang penggunaan bootsrap kali ini selamat mencoba dan happy coding :D.. 



Comments