Pengenalan Struktur File Bootstrap

-

Sebelum mempelajari Bootstrap ada baiknya kita mengetahui struktur file yang ada di dalam Bootstrap. Adapun struktur file Bootstrap dapat dilihat pada gambar dibawah ini



Dari gambar diatas dapat kita lihat terdapat 2 folder yaitu folder CSS dan JS. Pada folder CSS terdapat banyak sekali file hingga 12 file. Namun, dari 12 file itu hanya 3 yang biasa kita pakai. Hal itu dikarenakan kesamaan fungsi. Contoh : 
  • Bootstrap.css
  • Bootstrap.min.css
  • Bootstrap.css.map
  • Bootstrap.min.css.map


keempat file diatas memiliki fungsi yang sama yaitu fungsi utama Bootstrap. Fungsi - fungsi utama Bootstrap ada di file keempat file diatas. Untuk penggunaannya, kita cukup memilih salah satunya.
  • Bootstrap-grid.css
  • Bootstrap-grid.css.map
  • Bootstrap-grid.min.css
  • Bootstrap-grid.min.css.map

Keempat file diatas juga memiliki fungsi yang sama yaitu pengaturan layout. Jadi Bootstrap membagi document menjadi 12 grid atau 12 kotak
  • Bootstrap-reboot.css
  • Bootstrap-reboot.css.map
  • Bootstrap-reboot.min.css
  • Bootstrap-reboot.min.css.map

Keempat file diatas juga memiliki fungsi yang sama yaitu pengaturan/setting dasar  tag - tag HTML. dengan membuka file Bootstrap-reboot.css kita bisa mengganti setting umum yang telah ditetapkan oleh Bootstrap.

Pada folder JS terdapat 8 file yang mana kita cukup menggunakan 2 saja yaitu
  • Bootstrap.js
  • Bootstrap.js.map
  • Bootstrap.min.js
  • Bootstrap.min.js.map

file ini nantinya banyak digunakan untuk membuat Component seperti carausel, collapse, dropdown dan lain sebagainya.
Tidak hanya file Bootstrap.Js tetapi untuk membuat component yang memiliki animasi juga membutuhkan file dibawah ini
  • Bootstrap.bundle.js
  • Bootstrap.bundle.js.map
  • Bootstrap.bundle.min.js
  • Bootstrap.bundle.min.js.map

Pada paket Bootstrap tidak ditemukan file proper.js untuk membuat animasi. Namun proper.js dapat diganti dengan menggunakan file Bootstrap.bundle.js.

Sebagai Catatan :
  •  Untuk membuat animasi yang terdapat pada Component Bootstrap, file inti yang diperlukan adalah file Jquery.js. File ini merupakan inti dari pembuatan animasi component. Namun file ini juga tidak terdapat pada paket Bootstrap seperti halnya proper.js. Untuk mendapatkannya kita dapat mendownload di Download Jquery 

Materi - Materi Bootstrap
1. Pengenalan Bootstrap



Komentar

Posting Komentar

Postingan populer dari blog ini

Pengenalan Bootstrap

-
Gambar
Bootstrap adalah sebuah framework untuk HTML, CSS dan Javascript. Banyak template website dab aplikasi android dibuat menggunakan Bootstrap. Bootstrap merupakan framework yang sangat mudah untuk digunakan. Hanya dengan meletakkan nama class maka design bootstrap dapat diterapkan pada design HTML. Sebelum menggunakan Bootstrap, pertama - tama kita download dulu file pendukungnya yang dapat kita download di  https://getbootstrap.com/  sehingga akan dimuncul tampilan home page Bootstrap sebeperti gambar dibawah setelah halaman Home page terbuka akan ditampilkan versi Bootstrap terbaru. Pada gambar saya diatas terlihat versi Bootstrapnya V.4.2.1. Tidak hanya versi Bootstrap yang ditampilkan. Ada juga Button Download. Untuk mendownload File Bootstrap klik Button Download. Maka akan tampil Halaman sebagai berikut  Setelah terbuka halaman download diatas maka akan ditampilkan 2 button download yaitu Compiled CSS dan JS Pada Compiled CSS dan JS terdapat file ya...
Baca selengkapnya