Tutorial Bootstrap 4 #2 : Cara Menggunakan Bootstrap 4


Cara Menggunakan Bootstrap 4

Cara Menggunakan Bootstrap 4 – Pada tutorial bootstrap 4 bagian pertama teman-teman sudah berkenalan dengan bootstrap 4, dan sudah dijelaskan juga pengertian serta keuntungan kita menggunakan bootstrap pada saat membangun tampilan website atau aplikasi.

Baca : Tutorial Bootstrap 4 #1 : Pengertian dan Pengenalan Bootstrap 4

Cara Menggunakan Bootstrap 4

Pada tutorial bootstrap 4 bagian kedua ini kita akan belajar tentang cara menggunakan bootstrap 4.

Perhatikan struktur HTML berikut.

Seperti yang dijelaskan pada dokumentasi bootstrap tentang pengenalan bootstrap 4. kita diharuskan untuk menggunakan struktur HTML seperti di atas untuk menggunakan bootstrap.

Pertama kita mendeklarasikan HTML 5 dengan menuliskan kode <!doctype html>. kemudian untuk mengiptimalkan responsive, kita menambahkan meta tag viewport di dalam tag <head>.

Cara Menghubungkan Bootstrap 4

Ada beberapa cara yang bisa teman-teman lakukan untuk menghubungkan bootstrap 4 ke proyek teman-teman agar bisa langsung menggunakan class-class dari bootstrap.

Yaitu dengan cara menghubungkan halaman ke link CDN yang sudah disediakan oleh bootstrap. dan cara satunya lagi dengan cara download bootstrap dan meletakkan ke dalam folder proyek teman-teman, lalu menghubungkannya.

Wajib Baca :

Cara Menghubungkan HTML Dengan CSS

Menghubungkan Bootstrap Melalui CDN

Untuk menghubungkan bootstrap menggunakan CDN, kita bisa menghubungkan langsung ke link yang sudah disediakan.

CSS Bootstrap

Tambahkan link berikut ke dalam tag <head>.

Javascript Bootstrap

Kemudian tambahkan semua javascript yang dibutuhkan oleh bootstrap, yaitu jquery.js, bootstrap.min.js, dan popper.min.js.

Dan berikut adalah link CDN javascript yang dibutuhkan oleh bootstrap. copy dan letakkan di bagian paling bawah dalam tag <body> atau di atas tag </body>.

Maka hasil nya akan seperti berikut.

simpan HTML di atas, kemudian jalankan pada browser.

Menggunakan Bootstrap

Maka hasilnya seperti berikut.

Cara Menggunakan Bootstrap 4

Cara Menggunakan Bootstrap 4

Seperti yang terlihat pada gambar di atas, bootstrap telah berhasil diterapkan dari link cdn bootstrap, ditandai dengan berubahnya jenis font yang digunakan.

Tanpa Bootstrap

Karena jika tidak menggunakan bootstrap (normal), maka font default yang digunakan adalah font arial seperti berikut. berikut adalah contoh tanpa menggunakan bootstrap.

Hasilnya

Tanpa menggunakan bootstrap

Tanpa menggunakan bootstrap

Tapi ada kekurangan jika menggunakan link CDN, kekurangannya kita harus terhubung ke internet. karena link CDN nya berada di internet. jika tidak, bootstrap tidak akan terhubung.

Menghubungkan Bootstrap Dengan Download

Untuk cara kedua, kita bisa langsung mendownload bootstrap dari situs resminya. kemudian pindahkan bootstrap yang sudah di download tadi ke folder proyek teman-teman, dan tinggal dihubungkan.

Sebagai contoh di sini saya membuat proyek baru dalam folder baru dengan nama “belajar_bootstrap“. saya letakkan di Desktop saja.

Bootstrap 4

Silahkan download bootstrap 4 di website resmi bootstrap.

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

download bootstrap 4

download bootstrap 4

Setelah download, extrak dan pindahkan bootstrap yang sudah di extrak tadi ke folder belajar_bootstrap. dan ubah nama foldernya menjadi terserah teman-teman. di sini saya mengubah nama folder nya menjadi “assets“. agar lebih mudah ketika kita hubungkan.

Hasilnya seperti berikut.

instalasi bootstrap

instalasi bootstrap

Jquery.js

Karena bootstrap membutuhkan jquery, maka kita juga akan mendownload jquery. Silahkan download jquery di

https://jquery.com/download/

download jquery

download jquery

Klik Download, dan pilih seperti pada gambar di atas. maka akan dialihkan ke halaman berikut.

download file jquery

download file jquery

Buat file baru dengan nama jquery.js dalam folder js, dalam folder assets tadi.

Blok semua coding pada gambar di atas,  copy dan paste ke dalam file jquery.js yang sudah kita buat tadi.

Popper.js

Dan silahkan download popper.js dengan cara buka link berikut.

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js

Copy semua isi coding nya, kemudian buat file popper.js dalam folder assets/js/. jangan lupa paste semua coding yang sudah di copy tadi ke dalam file popper.js tadi.

Contoh Project

Setelah semua file yang dibutuhkan selesai kita dapatkan, selanjutnya waktunya membuat sebuah project HTML sebagai percobaan menggunakan bootstrap 4.

Buat file HTML baru. di sini saya buat file HTML baru dalam folder belajar_bootstrap dengan nama belajar_bootstrap.html.

Dan tulis coding berikut.

belajar_bootstrap/belajar_bootstrap.html

Pada coding di atas, kita menghubungkan css bootstrap dengan

Kemudian menghubungkan js dari bootstrap dengan

Menghubungkannya sesuai dengan lokasi dari js dan css masing-masing sudah kita letakkan dalam folder assets tadi.

belajar bootstrap 4

belajar bootstrap 4

Oke sekarang coba jalankan file belajar_bootstrap.html pada browser. Dan hasilnya seperti berikut.

tutorial bootstrap 4 lengkap bahasa indonesia

tutorial bootstrap 4 lengkap bahasa indonesia

Nah, sampai di sini kita telah selesai dan telah berhasil menghubungkan HTML dengan Bootstrap 4. dengan cara menggunakan bootstrap seperti ini, kita bisa menggunakan bootstrap secara offline, tanpa membutuhkan koneksi internet. karena bootstrap sudah tersedia di laptop kita.

Pada tutorial bootstrap 4 selanjutnya di malasngoding.com, kita akan belajar membuat layout yang responsive, dan juga belajar membuat komponen-komponen yang sudah disediakan di bootstrap 4.

Terima kasih sudah membaca Tutorial Cara Menggunakan Bootstrap 4. Sampai jumpa di tutorial bootstrap 4 selanjutnya. 🙂

DOWNLOAD SOURCE CODE

Incoming search terms:

  • tutorial bootstrap 4 pdf
  • bagaimana cara penggunaan file library bootstrap 4
  • cara menggunakan bootstrap 4 offline
  • Apa saja yang dibutuhkan untuk nenggunakan bootstrap pada php
  • bagaimana cara menggunakan boostraph pada php bang jun
  • belajar bootstrap 4 sampai mahir
  • Bootstrap 4
  • bootstrap 4 download
  • tutpr bootstrap 4 offline
  • bootstrap tidak aktif di xampp



Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

TUTORIAL MENARIK LAINNYA

border bootstrap 4
tooltips bootstrap 4
spinners bootstrap 4
Diskusi
4 Komentar
  • Tutorial Bootstrap 4 #3 : Containers Pada Bootstrap 4 – Malas Ngoding 5 months ago

    […] teman-teman yang belum mengikuti tutorial sebelumnya, silahkan baca Tutorial Bootstrap 4 #2 : Cara Menggunakan Bootstrap 4 terlebih […]

  • Tutorial Bootstrap 4 #6 : Text Bootstrap 4 – Malas Ngoding 5 months ago

    […] untuk membaca tutorial sebelumnya tentang cara penggunaan bootstrap jika teman-teman belum membacanya. dan disarankan kepada teman-teman yang belum mengikuti tutorial […]

  • Tutorial Bootstrap 4 #7 : Membuat List – Malas Ngoding 5 months ago

    […] Pastikan teman-teman sudah membaca tutorial bootstrap 4  bagian sebelumnya. yaitu tentang pengenalan dan pengertian bootstrap 4 dan cara menggunakan bootstrap 4. […]

  • Tutorial Bootstrap 4 #9 : Membuat Table Dengan Bootstrap 4 – Malas Ngoding 5 months ago

    […] Tutorial Bootstrap 4 #2 : Cara Menggunakan Bootstrap […]