Cara Mudah Belajar Install dan Menggunakan Bootstrap untuk Pemula

Arizal
17.38
0
,

Ngulik Kode - Bagi kalian yang sudah pernah membuat web pasti pernah mendengar css framework satu ini. Bootstrap adalah salah satu css framework yang populer di kalangan front end developer. Karena mudah digunakan, konsisten, dan juga responsive. Hingga saat artikel ini dibuat, Bootstrap ini sudah sampai versi 5.2.

Oke mari kita mulai cara menggunakan bootstrap pada halaman web kita.


Install Bootstrap

Ada dua cara untuk menginstall bootstrap

Yang pertama, kita bisa menggunakan NPM (Node Package Manager)


Yang kedua, kita bisa menggunakan CDN (Content Delivery Network)



Untuk artikel kali ini kita akan menggunakan cara yang kedua.


Mari kita eksekusi

Buatlah folder dahulu untuk file html kalian


 Lalu buka code editor kalian di dalam folder yang sudah kalian buat tadi. Karena di sini saya menggunakan Visual Studio Code, maka saya akan masuk ke dalam folder yang sudah saya buat, lalu saya klik kanan dan klik Open With Code


Maka tampilannya akan seperti ini


Lalu kita buat file html kita di dalam folder tersebut dan ketikkan template html seperti di bawah ini :




Lalu tambahkan kode bootstrap yang akan kita gunakan via CDN


Nah dari sini kita sudah bisa menggunakan component dari bootstrap. Mari kita coba membuat navbar dari bootstrap.

Kode dibawah ini adalah component navbar dari bootstrap, coba kalian copy ke code editor kalian di file yang tadi kalian buat ya.



Jadi keseluruhan kode kita akan seperti di bawah ini



Untuk cek hasil di browser, kalian save dulu filenya dengan menekan CTRL + S. Lalu buka file explorer di direktori file html kalian berada. Klik kanan > Pilih Open With > Pilih browser yang kalian gunakan.



Maka akan terbuka hasil dari file html kita tadi


 Ada cara lain untuk membuka hasil file html kita tadi dengan cara yang lebih mudah dan tampilannya langsung berubah setelah kita save filenya. Yaitu, menggunakan extension Live Server di Visual Studio Code.


Kalian bisa langsung install extension ini dan nanti akan muncul simbol Go Live di Status Bar bawah VS Code sebelah kanan


Kalian Klik Go Live dan nanti tampil browser kalian dengan hasil yang kita kerjakan tadi, tetapi dengan link yang berbeda. Link sekarang sudah menggunakan IP dan Port.


Sekarang perubahan yang terjadi di kode kalian akan langsung berubah juga dibrowser.

Untuk pembahasan Bootstrap kali ini saya rasa cukup sampai di sini. Semoga artikel kali ini bermanfaat dan kalian menyukainya. Bagikan artikel ini dan beri komentar di bawah apa yang ingin dibahas selanjutnya ya!






0 comments

Posting Komentar