Bagaimana cara mengatur bootstrap?

Sangat mudah untuk mengatur dan mulai menggunakan Bootstrap. Bab ini akan menjelaskan cara mengunduh dan mengatur Bootstrap. Kami juga akan membahas struktur file Bootstrap, dan mendemonstrasikan penggunaannya dengan sebuah contoh

Unduh Bootstrap

Anda dapat mengunduh Bootstrap versi terbaru dari https. //getbootstrap. com/. Ketika Anda mengklik tautan ini, Anda akan melihat layar seperti di bawah ini −

Di sini Anda dapat melihat dua tombol −

• Unduh Bootstrap − Mengklik ini, Anda dapat mengunduh versi Bootstrap CSS, JavaScript, dan font yang telah dikompilasi dan diperkecil. Tidak ada dokumentasi atau file kode sumber asli yang disertakan

• Unduh Sumber − Mengklik ini, Anda bisa mendapatkan kode sumber Bootstrap LESS dan JavaScript terbaru langsung dari GitHub

Jika Anda bekerja dengan kode sumber Bootstrap yang tidak dikompilasi, Anda perlu mengkompilasi file LESS untuk menghasilkan file CSS yang dapat digunakan. Untuk mengkompilasi file KURANG ke dalam CSS, Bootstrap secara resmi hanya mendukung Recess, yang merupakan petunjuk CSS Twitter berdasarkan less. js

Untuk pemahaman yang lebih baik dan kemudahan penggunaan, kami akan menggunakan versi Bootstrap yang telah dikompilasi di sepanjang tutorial. Karena file dipatuhi dan diperkecil, Anda tidak perlu repot setiap kali menyertakan file terpisah untuk fungsionalitas individual. Pada saat penulisan tutorial ini, versi terbaru (Bootstrap 3) telah diunduh

Struktur berkas

Bootstrap yang telah dikompilasi

Setelah versi terkompilasi Bootstrap diunduh, ekstrak file ZIP, dan Anda akan melihat struktur file/direktori berikut –

Seperti yang Anda lihat, ada CSS dan JS yang dikompilasi (bootstrap. *), serta CSS dan JS yang dikompilasi dan diperkecil (bootstrap. min. *). Font dari Glyphicons disertakan, karena merupakan tema Bootstrap opsional

Kode Sumber Bootstrap

Jika Anda telah mengunduh kode sumber Bootstrap maka struktur filenya adalah sebagai berikut −

• File di bawah less/, js/, dan fonts/ adalah kode sumber untuk Bootstrap CSS, JS, dan font ikon (masing-masing)

• Folder dist/ mencakup semua yang tercantum di bagian unduhan yang telah dikompilasi di atas

• docs-assets/, contoh/, dan semua *. html adalah dokumentasi Bootstrap

Templat HTML

Template HTML dasar yang menggunakan Bootstrap akan terlihat seperti ini −

   
   
      Bootstrap 101 Template
      
      
      
      
      
      
      
      
      
      
   
   
   
      Hello, world!

      
      
      
      
      
      
   

Di sini Anda dapat melihat jquery. js, bootstrap. min. js dan bootstrap. min. file css yang disertakan untuk membuat file HTM normal ke Template Bootstrap. Pastikan untuk menyertakan pustaka jQuery sebelum Anda menyertakan pustaka Bootstrap

Rincian lebih lanjut tentang masing-masing elemen dalam potongan kode di atas akan dibahas dalam bab Ikhtisar Bootstrap CSS

Contoh

Sekarang mari kita coba contoh menggunakan template di atas. Coba contoh berikut menggunakan opsi Demo Langsung yang tersedia di sudut kanan atas kotak kode contoh di bawah di situs web kami −

Kursus Desain UI/UX Terbaik - Bawa praktik terbaik UI/UX ke level selanjutnya dengan menyertakan contoh kode lengkap kami. ⏰ DISKON 80% Penawaran Spesial

Versi terbaru dari Bootstrap adalah Bootstrap 5. Langkah-langkah yang perlu Anda ikuti untuk menambahkan Bootstrap ke HTML sedikit berbeda berdasarkan versi yang ingin Anda gunakan. Anda memerlukan pengetahuan dasar tentang HTML/CSS dan JS untuk memulai dengan Bootstrap. Gunakan salah satu dari tiga metode berikut untuk menambahkan Bootstrap ke HTML

Metode 1. Menggunakan Jaringan Pengiriman Konten Bootstrap (CDN)

Menggunakan CDN Bootstrap adalah cara terbaik untuk mengirimkan konten dari situs web Anda ke pengguna Anda dengan cepat dan efisien berdasarkan lokasi geografis mereka dan meningkatkan kinerja server situs web Anda. Untuk menautkan Bootstrap dalam HTML menggunakan metode ini

Menambahkan Bootstrap 4 CDN ke HTML

• Untuk CSS

Salin tautan stylesheet ini ke tag dari file HTML yang Anda inginkan.

• Untuk JS

Salin lembar gaya ini sebelum akhir tag dari file HTML yang Anda inginkan.

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”>

Perhatikan bahwa fungsionalitas beberapa komponen JavaScript seperti tab dan dropdown bergantung pada popper. js dan jQuery. Oleh karena itu, sebelum memuat file JavaScript Bootstrap, sertakan jQuery dan Popper CDN sebelum memuat bootstrap. min. js.

Menambahkan Bootstrap 5 CDN ke HTML

Bootstrap 5 tidak lagi membutuhkan jQuery sebagai dependensi karena JavaScript dapat menyediakan fungsionalitas yang sama. Untuk menambahkan Bootstrap 5 CDN ke HTML

• Untuk CS

Salin tautan stylesheet ini ke tag dari file HTML yang Anda inginkan.

• Untuk JS

Perhatikan bahwa Anda perlu memuat Popper JS sebelum memuat Bootstrap JS

Metode 2. Mengunduh file secara lokal

Cara lain mengimpor Bootstrap ke HTML adalah dengan langsung mengunduh file secara lokal ke folder proyek HTML Anda. File-file tersebut dapat diunduh dari tautan berikut

• Bootstrap 4. https. //getbootstrap. com/docs/4. 3/memulai/unduh/
• Bootstrap 5. https. //v5. getbootstrap. com/docs/5. 0/memulai/unduh/

Setelah file versi Bootstrap yang diinginkan telah diunduh

• Untuk CSS .

Sertakan tautan ke bootstrap. min. css di bagian

• Untuk JS

Tambahkan tautan ke bootstrap. min. js file sebelum bagian akhir dari file HTML Anda. Melakukan hal ini memungkinkan Anda untuk menggunakan komponen Bootstrap JS.

Perhatikan bahwa jquery. min. js dan popper. min. File js harus disertakan sebelum memuat bootstrap. min. js, meskipun Anda telah mengunduh file secara lokal.

Metode 3. Menggunakan pengelola paket untuk mengimpor Bootstrap ke HTML

Pengelola paket seperti npm dan benang dapat membuktikan . Karena npm adalah pengelola paket yang paling populer, contoh berikut menunjukkan bagaimana Bootstrap dapat diinstal dan ditarik ke proyek apa pun yang menggunakannya.

Ketikkan salah satu dari perintah berikut ke folder proyek. Ini hanya berlaku jika Anda telah menginisialisasi npm dalam proyek.

• Bootstrap 4. npm instal bootstrap
• Bootstrap 5. instal npm [dilindungi email]

Salinan lokal dari versi file Bootstrap yang diinginkan sekarang diunduh ke folder 'node_modules' di proyek Anda. Setelah versi Bootstrap yang diinginkan diimpor

• Untuk CS

Sertakan bootstrap. min. css di file HTML Anda untuk menggunakan komponen Bootstrap CSS.

• Untuk JS

Gunakan bootstrap. min. js sebelum bagian akhir file HTML Anda untuk menggunakan komponen Bootstrap JS.

Seperti yang disebutkan sebelumnya, jquery. min. js dan popper. min. js keduanya harus dimuat sebelum Anda memuat bootstrap. min. js.

Setelah Anda mengintegrasikan Bootstrap 4, atau 5 CSS dengan HTML, Anda cukup menggunakan elemen kelas Bootstrap dan menata file HTML Anda dengan cara yang diinginkan. Anda dapat merujuk ke dokumentasi Bootstrap dari versi yang Anda inginkan untuk memahami kelas yang dapat digunakan, dan tindakan yang dilakukan oleh kelas terkait. Demikian pula, setelah mengintegrasikan Bootstrap JS ke HTML Anda dapat menggunakan komponen Bootstrap JS dengan menggunakan atribut data JS langsung di markup HTML atau dengan menggunakan jQuery. Lihat dokumentasi Bootstrap untuk memahami cara kerja komponen ini dan fitur apa yang mereka tawarkan

Contoh dari Tim Kreatif

Material Dashboard adalah template Admin Material Bootstrap 4 gratis yang menawarkan desain keren, komponen yang mudah digunakan, dan plugin pihak ketiga yang dirancang untuk bekerja sempurna dengan elemen lain. Lihat di sini Halaman Unduhan dan Pratinjau Langsung.

Anda dapat menemukan template dan tema Bootstrap serupa yang mudah diintegrasikan dari Tim Kreatif di sini.

Kesimpulan

Anda sering kali khawatir dengan pertanyaan tentang bagaimana memulai dengan Bootstrap. Namun, yakinlah bahwa mengimpor dan menambahkan Bootstrap ke HTML adalah proses yang cukup mudah, dan Anda dapat dengan mudah menggunakan Bootstrap untuk menikmati atribut dan fitur tambahan di atas file HTML Anda dalam waktu singkat.

Juga, jika Anda pernah bertanya-tanya - Apakah Bootstrap mati pada tahun 2022? . Ya, tidak. jutaan pengembang menggunakannya; . (Sumber)

Apa itu Bootstrap dan bagaimana cara menggunakannya?

Bagaimana cara menambahkan Bootstrap ke proyek saya?

Bagaimana cara menambahkan Bootstrap di file HTML?

Bagaimana cara menambahkan Bootstrap ke CSS?