Categories: Programming

Cara penggunaan Bootstrap 5

Bootstrap 5 resmi dirilis versi Alpha pada tanggal 16 Juni 2020. Berikutnya versi Beta dirilis pada 7 Desember 2020.

Bootstrap merupakan frame CSS yang paling banyak dipakai untuk Front End Developer.

Persiapan untuk Belajar menggunakan Bootstrap 5

Untuk sebelum mulai belajar penggunaan bootstrap, kita perlu mempersiapkannya.

Dan syarat untuk mempelajari bootstrap, kamu minimal sudah paham penggunaan CSS dan Javascript terlebih dahulu.

Apa alasannya ?

Karena kan saat kita menggunakan bootstrap, pasti akan banyak menggunakan class bootstrap nya sendiri. Dan kalau kamu masih belum paham tentang CSS, pasti akan merasakan kesulitan.

Penggunaan Bootstrap pada HTML

Untuk menggunakan bootstrap sendiri pada HTML, kita menggunakan via CDN saja biar cepat yaaa…

Menggunakan CDN

Untuk cara penggunaan ini terbilang mudah untuk di praktekan bagi pemula.

User hanya dengan melakukan copy paste link CDN Bootstrap, lalu tempatkan pada kode HTML nya.

Jika kita menggunakan CDN, syaratnya itu kita harus selalu terhubung ke internet, karena Bootstrap akan mengambil dari server CDN.

Untuk yang belum tau CDN itu apa ? CDN itu singkatan dari Content Delivery Network, sejenis server yang cukup luas untuk mengantarkan konten dengan optimal dan cepat.

 

Nah.. dibagian Introductionnya itu ad acara Quick Start yaa.. Disitu kita diberitahu code untuk menggunakan Bootstrap nya yaitu dengan cara mengcopy paste kan code CSS dan JavaScript nya saja, seperti gambar dibawah ini

Naaahh,… cara yang pertama itu.. silahkan kalian copy dan paste kan code CSS nya di dalam element <head>. Setelah itu kalian bisa copy dan paste kan code JavaScript nya dan letakan dipaling akhir dari code html nya. Jika ada 2 pilihan Bundle atau Separate, bingung pilih yang mana ??? Kalau saran saya sih kalian gunakan yang Bundle saja ya.. karena singkat.

Ternyata Bootstrap baik juga lohhh, dia sudah memberikan kita dalam bentuk Starter Template nya.. jadi kita bisa langsung aja copy dan paste kedalam file HTML kita dehhh..contohnya seperti gambar dibawah ini yaaa..

abdu halim

Share
Published by
abdu halim

Recent Posts

Montir Adalah: Pengertian dan Skill yang Diperlukan

Montir adalah seseorang yang memiliki keahlian dalam memperbaiki, merawat, dan menganalisis masalah pada kendaraan bermotor,…

3 months ago

Bagaimana Menjadi Developer Full Stack Langkah Demi Langkah

Dalam dunia teknologi yang terus berkembang, menjadi seorang developer full stack adalah salah satu pilihan…

3 months ago

Retargeting Ads: Manfaatkan Pixel untuk Pelacakan Lebih Akurat

Retargeting ads telah menjadi salah satu strategi digital marketing paling efektif untuk meningkatkan konversi. Menurut…

7 months ago

Natural Language Processing: Membuat Chatbot dengan Python

Dalam era digital yang berkembang pesat, chatbot telah menjadi alat penting bagi bisnis untuk meningkatkan…

7 months ago

Front-End Development: Tips Membuat Situs Mobile-Friendly

Dalam era digital saat ini, penggunaan perangkat mobile untuk mengakses internet telah melampaui penggunaan desktop.…

7 months ago

Remote Work Pasca Pandemi: Tren, Tantangan, dan Solusi

Pandemi COVID-19 telah mengubah cara kita bekerja secara drastis. Salah satu perubahan terbesar adalah meningkatnya…

7 months ago