Pengertian Bootstrap, Perbedaan Bootstrap.css, Bootstrap.min.css, Bootstrap-grid.css, dan Bootstrap-grid.min.css

Apa itu Bootstrap ?

Bootstrap adalah sebuah framework yang sangat populer di dunia pemrograman web. Dengan menggunakan boostrap tampilan atau front end sebuah web akan terlihat lebih hidup. Tidak hanya sampai disitu, bootstrap juga mengedepankan tampilan untuk mobile sehingga web yang dibuat akan lebih responsif.

Ketika mendownload bootstrap di website resminya https://getbootstrap.com/ pengguna akan diberi file berformat ".rar", isi dari file ini adalah css dan juga js. Cara menggunakan bootstrap juga sangatlah mudah. Ada dua cara yang bisa anda gunakan yaitu secara offline atau onlia.

Untuk cara offline cukup download file bootstrap di website resminya yang berekstensi rar kemudian ekstrak file "rar" tersebut kedalam folder website anda. Setelah itu anda bisa memanggilnya menggunakan perinta :

//UNTUK CSS
<link rel="stylesheet" type="text/css" href="ISI_LOKASI_BOSTRAP">
//UNTUK JS
<script type="text/javascript" src="ISI_LOKASI_BOSTRAP"></script>

Cara kedua yang bisa digunakan adalah dengan cara online. Pengguna cukup menuliskan perintah berikut pada bagian <head> website.

//UNTUK CSS
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
//UNTUK JS
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>

Perbedaan antara Bootstrap.css, Bootstrap.min.css, Bootstrap-grid.css, dan Bootstrap-grid.min.css

Didalam folder CSS anda akan menemukan beberapa file di antaranya :

bootstrap.css - ini adalah file normal css bootstrap, dimana semua kode tersusun kebawah. File ini bisa anda gunakan bila anda hendak mengembangkan atau ingin menambah isi dari bootstrap ini.
bootstrap.min.css - sangat saya sarankan untuk menggunakan file ini bila anda tidak ingin menambahkan apa-apa kedalam file bootstrap. Karena file ini lebih ringan dan tentunya akan berpengaruh pada kecepatan. Isinya sama saja dengan bootstrap.css hanya saja bentuk penyajiannya yang bedah. Bootstrap.min.css ini memanjang ke samping, hanya menggunakan satu baris saja dimana spasi dan enter sudah dihilangkan.
bootstrap-grid.css - seperti namanya css bootstrap yang satu ini hanya berisi sebagaian kecil, dan hanya ditujukan untuk pengaturan grid/tampilan berupa kolom dan baris.
bootstrap-grid.min.css - isinya sama dengan bootstrap-grid.css hanya saja spasi dan enter dalam kodenya sudah dihilangkan.
bootstrap-reboot.css - seperti namanya yaitu reboot atau "mengulang" artinya isi dari file ini adalah mengulang semua bentuk dari element yang ada di web. Didalam file ini tidak digunakan class-class tetapi langsung menggunakan nama tag element seperti html,body,article, aside, hr, dll.
bootstrap-reboot.min.css - isi file ini sama halnya dengan bootstrap-reboot.css hanya saja spasi dan enter sudah dihilangkan.

Jika anda orang yang baru belajar menggunakan bootstrap maka anda pasti bertanya-tanya file mana yang harus anda gunakan. Jadi untuk pengguna baru sebaiknya anda menggunakan bootstrap.min.css, karena ukuran yang kecil serta tidak mudah untuk merubah kode-kode di dalamnya.

Perbedaan antara Bootstrap.js, Bootstrap.min.js, Bootstrap-bundle.js, dan Bootstrap-bundle.min.js

Pada folder js pada bootstrap terdapat 4 file yaitu :

bootstrap.js - file javascript utama dalam folder js bootstrap. File menghimpun semua fungsi-fungsi yang bootstrap butuhkan.
bootstrap.min.js - isi dari file ini sama dengan bootstrap.js yang membedakan spasi dan enter file ini sudah dihilangkan. File ini yang paling sering dipanggil ketika ingin menggunakan js bootstrap sebab ukurannya lebih kecil sehingga kecepatannya tentu bertambah.
bootstrap.bundle.js - ini berisi kode js yang mana sudah terinclude dengan popper yaitu sebuah librari js.
bootstrap.bundle.min.js - isinya sama dengan bootstrap.bundle.js hanya spasi dan enter dihilangkan.

Sama halnya seperti dalam memilih css, ketika memilih js bootstrap anda sebaiknya menggunakan bootstrap.min.js, karena file ukurannya lebih kecil dan tentunya cepat.

6 comments:

Shikamaru NaraMay 4, 2020 at 4:29 PM
infonya sangat bermanfaat min
alat buka gadget
LaurensiaSeptember 30, 2020 at 10:49 PM
Terima kasih atas artikelnya, sangat bermanfaat. Saya Laurensia Kathryn Shellen (1922300001) dari ISB Atma Luhur. Jangan lupa kunjungi https://www.atmaluhur.ac.id
erectile dysfunction remediesNovember 26, 2020 at 4:57 AM
Definitely believe that that you said. Your favourite justification seemed to be on the internet the easiest factor to be mindful of. I say to you, I definitely get annoyed even as other people think about issues that they just do not know about. You managed to hit the nail upon the top and also outlined out the whole thing without having side-effects , folks could take a signal. Will likely be back to get more. Thank you
top erection pillsNovember 26, 2020 at 4:58 AM
Link exchange is nothing else except it is just placing the other person's webpage link on your page at appropriate place and other person will also do same for you.
erectile dysfunction causesNovember 26, 2020 at 5:56 AM
I do accept as true with all the concepts you've presented on your post. They're really convincing and can certainly work. Still, the posts are too brief for beginners. May just you please lengthen them a little from next time? Thank you for the post.

Sunday, January 27, 2019