√ Cara Menggunakan Bootstrap 4 Offline untuk Pemula

√ Cara Menggunakan Bootstrap 4 Offline untuk Pemula - Selamat berjumpa kembali sahabat SMK NEGERI 1 SERI KUALA LOBAM, Senang dapat bertemu anda kembali untuk membahas materi atau artikel √ Cara Menggunakan Bootstrap 4 Offline untuk Pemula, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. Semoga pembahasan postingan atau artikel kategori Artikel Bootstrap, yang kami tulis ini dapat anda pahami. Tanpa memperpanjang basa-basi lagi, kami sampaikan selamat membaca.

Seberapa dalam artikel √ Cara Menggunakan Bootstrap 4 Offline untuk Pemula ini dapat kami bahas dan jabarkan kepada anda, kiranya tidak mengurangi makna. Kami hanya berpesan kepada pembaca SMK NEGERI 1 SERI KUALA LOBAM, jadikan artikel kami ini sebagai materi tambahan. Jika masih kurang lengkap, pembaca dapat menambah wawasan dengan mencari artikel serupa diblog lainnya atau menanyakan langsung kepada pakar yang mahir dengan masalah √ Cara Menggunakan Bootstrap 4 Offline untuk Pemula. Selamat menambah wawasan!

√ Cara Menggunakan Bootstrap 4 Offline untuk Pemula

Bootstrap 4: Cara Menggunakan Bootstrap Offline untuk Pemula - Halo sobat, pada kesempatan kali ini saya akan membahas cara menggunakan salah satu framework berbasis html yang populer yakni bootstrap 4. Bootstrap banyak digunakan oleh Web Developer untuk membuat tampilan dasar web baik front end maupun back end.

Bootstrap 4 telah menyediakan berbagai komponen html siap pakai dengan tampilan yang menarik dan ringan. Disini saya tidak akan membahas terlalu dalam karena kita akan belajar dasarnya saja, yaitu cara menggunakan Bootstrap 4 offline. Baiklah kita akan langsung pada pembahasannya saja.

Pengertian Bootstrap

Bootstrap merupakan framework css yang digunakan untuk mempermudah pembuatan tampilan web secara responsif. Bootsrap menyediakan berbagai komponen yang siap pakai sehingga tidak perlu kita tidak perlu menulis dari awal.

Cara Menggunakan Bootstrap 4 Offline

Yang perlu dilakukan pertama adalah mendownload source file bootstrap 4, Anda dapat mendownload melalui situs resmi pada link berikut.

https://getbootstrap.com/docs/4.4/getting-started/download/

Setelah kita extract file yang telah didownload, selajutkan kita copy folder css dan js yang ada pada folder dist kedalam folder web kita.

Maka kita akan memiliki folder dan file berikut pada folder web.

Membuat index.html

Langkah selanjutnya yakni membuka folder web kita menggunakan text editor, disini saya menggunakan Sublime Text 3. Kemudian buat file baru dengan nama index.html.

Setelah itu copy kode berikut kedalam index.html.

                                               
Belajar Bootstrap
                               

Anda hanya perlu mengubah source css dan js agar bisa digunakan secara offline dan menambahkan file js yang kurang. File javascript yang perlu Anda tambahan yakni jquery-3.4.1.slim.min.js dan popper.min.js. Anda perlu menambahkan file tersebut agar animasi komponen yang disediakan Bootstrap dapat berjalan dengan baik.

Anda bisa mendapatkan file tersebut dengan membuka link berikut lalu klik kanan pada browser dan pilih save as.., setelah itu pilih save ke folder js dan pastikan file tersimpan dengan format .js yakni format file javascript.

https://code.jquery.com/jquery-3.4.1.slim.min.js https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js

Jika kita menjalankan index.html maka tampilan awal akan seperti berikut.

Menambahkan Komponen Bootsrap 4

Komponen Bootstrap yang akan kita tambahkan adalah jumbotron sebagai tampilan awal. copy kode berikut dan tempatkan setelah tag .

     
     
WELCOME
     
Berlajar Bootsrap 4
     
   

Berikut tampilan pada text editor.

Buka index.html dan hasilnya akan seperti berikut.

Penutup

Sekian artikel cara menggunakan Bootstrap offline untuk pemula. Nantikan juga tutorial Bootstrap 4 selanjutnya, sekian dan semoga bermanfaat.

Penutup Artikel √ Cara Menggunakan Bootstrap 4 Offline untuk Pemula

Demikian artikel √ Cara Menggunakan Bootstrap 4 Offline untuk Pemula kali ini, semoga bisa memberi manfaat untuk anda semua pembaca blog SMK NEGERI 1 SERI KUALA LOBAM. Allright, sampai jumpa pada postingan artikel lainnya.

Baru saja anda membaca artikel √ Cara Menggunakan Bootstrap 4 Offline untuk Pemula dengan alamat link https://smkn1serikualalobam.blogspot.com/2015/03/cara-menggunakan-bootstrap-4-offline.html

Artikel √ Cara Menggunakan Bootstrap 4 Offline untuk Pemula ini kami arsipkan pada kategori Bootstrap.

Location:

Share :