Scribd
Upload
84 views6 pages

Tutorial Bootstrap Part 3 - Cara Menginstall Bootstrap 5

tutorial bootstrap

Uploaded by

ludmillanaima
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
84 views6 pages

Tutorial Bootstrap Part 3 - Cara Menginstall Bootstrap 5

tutorial bootstrap

Uploaded by

ludmillanaima
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Duniailkom

HTML CSS PHP MYSQL JAVASCRIPT C C++ JAVA PYTHON PASCAL LAINNYA… 

EBOOK 

 Home Tutorial Bootstrap Tutorial Bootstrap Part 3: Cara Menginstall Bootstrap 5


eBook Programming
Duniailkom
Tutorial Bootstrap Part 3: Cara
Menginstall Bootstrap 5
01 Oct 21 | Andre | Tutorial Bootstrap | 1 Comment

Omron Diskon 10% s.d. 13


Mei
Omron Sensor, Switch, Relay, Power
Supply, Connector, Timer 10% off di
Misumi s.d. 13 Mei!
eBook eBook eBook
Duniailkom Duniailkom Duniailkom
- OOP PHP - Laravel - React
Misumi Open Uncover Uncover Uncover

Cara pemesanan eBook & Buku


Melanjutkan tutorial belajar framework CSS Bootstrap, kali ini kita akan bahas cara
Duniailkom
mendownload dan menginstall Bootstrap 5.

Cara Menginstall Bootstrap 5


Istilah “instalasi Bootstrap” sebenarnya kurang tepat, karena Bootstrap hanya terdiri
dari kumpulan file CSS dan JavaScript yang cukup di download dan di copy. Namun
tetap saja butuh suatu cara untuk menginput file Bootstrap, dan inilah yang akan kita
bahas.

Pada saat tutorial ini saya tulis, Bootstrap baru saja merilis update ke versi 5.1. Untuk
mendownload file Bootstrap, silahkan buka web resmi Bootstrap di getbootstrap.com,
lalu klik tombol Download yang ada di tengah halaman.

Ads by
Download file Bootstrap 5
List Tutorial Duniailkom

Tutorial Terbaru Duniailkom

Tutorial HTML

Tutorial CSS

Tutorial PHP

Tutorial MySQL

Tutorial JavaScript

Tutorial Bahasa C
Di halaman Download, scroll sedikit ke bawah hingga judul “Compiled CSS and JS“, lalu Tutorial Bahasa C++
klik lagi tombol Download.
Tutorial Java
Download file Bootstrap 5
Tutorial Python

Tutorial Pascal

Tutorial Laravel 8

Tutorial Bootstrap 5

Tutorial WordPress

Tutorial jQuery

Membuat Web Online


Proses download file bootstrap-5.1.1-dist.zip akan berlangsung beberapa saat Review Jurusan Kuliah
(berukuran sekitar 1,3 MB).
Blog Duniailkom
Silahkan extract file ini ke sebuah folder. Kali ini saya akan extract ke folder
belajar_bootstrap di drive D:

Extract file Bootstrap 5 ke sebuah folder

Terdapat 2 folder dalam file ini, yakni folder css dan folder js. Setiap folder berisi cukup
banyak file, tapi yang kita perlukan hanya 2 saja, yakni css\bootstrap.css, dan
js\bootstrap.bundle.js.

Template Dasar HTML Bootstrap


Kita sudah memiliki file Bootstrap, sekarang mari tes buat file HTML untuk
mengaksesnya. Pastikan di dalam folder belajar_bootstrap sudah tersedia folder css Berlangganan Artikel
yang berisi file bootstrap.js serta folder js yang berisi file bootstrap.bundle.js. Duniailkom

Silahkan buat file index.html di dalam folder belajar_bootstrap, lalu isi dengan kode Dapatkan pemberitahuan untuk setiap
artikel dan tutorial terbaru Duniailkom
berikut:
Join 16,197 other subscribers

<!DOCTYPE html> Email Address
<html lang="id">
<head>
<meta charset="UTF-8"> Subscribe
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Belajar Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<h1>Belajar Bootstrap</h1>
</div>
<script src="js/bootstrap.bundle.js"></script>
</body>
</html>

Proses import file CSS dilakukan dari tag <link> di baris 7. Lalu di dalam tag <body>
terdapat tambahan tag <div class=”container”>. Class .container merupakan class
bawaan Bootstrap yang sengaja saya tambah untuk menguji apakah file CSS bootstrap
sudah berhasil diakses atau belum. Terakhir di baris 13 terdapat tag <script> untuk
proses import file JavaScript Bootstrap. Forum Diskusi (Facebook
Group)
Setelah itu akses file index.html dari web browser:
Group FB Belajar Programming
Hasil tampilan file index.html saat mengakses file Bootstrap Indonesia

Salah satu bukti jika kode CSS Bootstrap sudah berhasil diakses adalah teks “Belajar
Bootstrap” berada sedikit ke tengah sebagai efek dari tag <div class=”container”>.
Selain itu teks tampil dengan font sans-serif (font tanpa “kaki”) yang jika dijalankan di
Windows 10 akan memakai font Segoe UI.
Selanjutnya untuk menguji apakah file JavaScript Bootstrap juga sudah bisa diakses,
silahkan buat file index-js.html dengan kode sebagai berikut:


<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Belajar Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<h1 id="myPopover" data-bs-toggle="popover" data-bs-
placement="bottom"
class="text-center" title="Welcome to Web Design"
data-bs-content="Ingin jadi web designer?
Duniailkom siap memandu anda">
Belajar Bootstrap </h1>
</div>
<script src="js/bootstrap.bundle.js"></script>
<script>
new bootstrap.Popover(document.getElementById('myPopover'))
</script>
</body>
</html>

Untuk saat ini boleh abaikan maksud kode program di atas. Di dalamnya saya menulis
beberapa atribut baru ke dalam tag <h1> serta satu baris kode JavaScript di akhir tag
<body>. Ini semua dipakai untuk membuat efek Popovers.

Silahkan buka di web browser, kemudian klik judul “Belajar Bootstrap”:

Menguji tampilan Popover dari Bootstrap

Jika saat di klik tampil kotak kecil di bawah judul “Belajar Bootstrap”, berarti file
bootstrap.bundle.js bawaan Bootstrap sudah bisa diakses. Namun jika tidak tampil,
silahkan cek kembali apakah terdapat salah ketik atau file bootstrap.bundle.js
ternyata berada di folder lain.

Sebagai antisipasi dari salah ketik / salah penempatan file Bootstrap, saya juga
menyediakan file .zip dari 2 praktek kita diatas. File ini bisa diakses dari link
berikut: file_master_belajar_bootstrap_duniailkom.zip

Itulah bahasan tentang cara download dan menginstall file Bootstrap 5. Pada dasarnya
kita cukup mengakses file CSS dan JS bawaan Bootstrap. Berikutnya akan masuk ke
materi tentang Pengertian Bootstrap Container.

Saat ini di Duniailkom tersedia eBook / buku Bootstrap 5 Uncover. Dengan 529
halaman A4, materi di buku jauh lebih banyak daripada tutorial Bootstrap di web
Duniailkom. Penjelasan lebih lanjut bisa ke: Bootstrap 5 Uncover – Panduan
Belajar Framework Bootstrap.
Tags: Bootstrap, Bootstrap 5, Download, File Bootstrap, Installasi

*** Artikel Terkait ***

Biznet Networks Cek Kemampuan Network monitoring 3500 Slide PPT Siap
TOEFL Disini Indonesia Pakai

Iklan Biznet Metronet Iklan English Academy Iklan Netmonk Iklan Niaga Digital

WhatsApp Business
API

Iklan WhatsApp Business API

ONE RESPONSE

Miki 09 Nov 21

Selamat siang Tim Dunia Ilmu Komputer,


Dalam pengujian coding dibawah ini tidak menghasilkan popover, namun
jika coding dalam
new bootstrap.Popover(document.getElementById(‘myPopover’))
tersebut diganti dengan coding Jquery baru popoover muncul, apakah
coding Jquery blm dimasukkan dalam file bootsrap.bundle.js

Tks/Miki

Reply
ADD COMMENT

Comment Text*

Name*

Email*

Website

Saya bukan robot


reCAPTCHA
Privasi - Persyaratan

Notify me of follow-up comments by email.

Notify me of new posts by email.

POST COMMENT

Duniailkom #HTML #CSS #PHP #MYSQL #JAVASCRIPT #WORDPRESS #WEBONLINE

#PASCAL

Duniailkom adalah situs belajar programming dan ilmu komputer. Diharapkan duniailkom.com dapat menjadi media belajar dan saling berbagi tentang programming,
hardware, maupun teori seputar dunia komputer. Ikuti akun media social duniailkom untuk update terbaru: Facebook Duniailkom, Twitter Duniailkom

Copyright © 2022 Duniailkom | Hosting rekomendasi Duniailkom TERMS OF USE | PRIVACY POLICY | DISCLAIMER | ABOUT US | CONTACT US

You might also like