bewoksatukosong.com | Untuk pelajaran pertama yang perlu dilakukan adalah Install Boostrap 4. Ada beberapa cara untuk menginstall boostrap 4. Tapi kali ini om bewok akan memberikan cara install-Nya yang sudah sering digunakan oleh para developer. Ada 2 cara untuk install boostrap 4.
- Offline : kamu tidak membutuhkan internet untuk meload website tersebut, karena source code-Nya sudah kamu install semua di komputer kamu
- Online : Kamu perlu internet jika kamu ingin meload website kamu, karena kita hanya perlu memanggil link tersebut, tidak perlu download source code bootstrap 4 tersebut.
Oke sekarang kita yang pertama dulu ya, yaitu Offline
- Kamu bisa download source code-Nya disini
- https://github.com/twbs/bootstrap/archive/v4.2.1.zip
- Kecil kok, karena ukuran-Nya hanya 2.5 mb 😜.
- Kamu extract terlebih dahulu
- Buat folder terlebih dahulu bernama latihan bootstrap lalu didalamnya buat folder lagi latihan1, jadi setiap pertemuan folder-Nya berbeda - beda ya. ada latihan1, latihan2, latihan3 sampai seterusnya.
- Selanjutnya didalam folder latihan1, buat folder css dan js.
Gambar 1. Buat folder latihan boostrap dan latihan1 Isi folder css adalah file yang bernama bootstrap.min.css yang terdapat di folder bootstrap yang kita extract tadi. Kamu masuk ke folder boostrap yang kita extract tadi lalu masuk ke folder dist dan selanjutnya kamu klik folder css. kamu copy kan file yang bernama bootstrap.min.css, kamu paste kan ke Folder css yang berada di folder latihan1- Isi folder js mirip cara nya dengan css. kamu bisa mengambil file tersebut di folder boostrap yang kita extract tadi, lalu piliha dist masuk ke Folder js, kamu copy kan file yang bernama boostrap.min.js dan kamu paste kan ke folder js yang mana folder tersebut ada di folder latihan1
- Jangan lupa untuk membuat file latihan1.html
Gambar 4. Buat file bernama latihan1.html - Kamu buka text editor kesayangan kamu, kalau om bewok menggunakan visual code.
- latihan1.html nya jangan di biarkan kosong, kamu beri sedikit codingan html seperti dibawah ini.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Latihan Pertama Bootstrap</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="jumbotron"> <div class="container"> <h1 class="display-3">Latihan Pertama Bootstrap</h1> <p>Belajar Boostrap version 4 bersama om bewok di website bewoksatukosong.com</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Belajar Yuk »</a></p> </div> </div> </body> </html>
Gambar 5. let's code it - Maka hasilnya akan seperti dibawah ini.
 |
| Gambar 2. Copy dari folder boostrap yang sudah kita download dan kita extract ya |
 |
| Gambar 3. Copy dari folder bootstrap yang sudah kita download dan kita extract ya |
 |
| Gambar 6. Hasil-Nya seperti dibawah ini |
Oke selanjutnya om bewok akan memberikan Tutorial Install Bootstrap 4 secara online. ini lebih mudah karena ga perlu download lagi, tinggal ambil link pada website boostrap. Mari kita mulai.
Kamu kunjungi
 |
| Gambar 7. Pilih Get started |
Lalu pilih Get Started,
Selanjutnya kamu copy kodinganya lihat pada gambar dibawah ya.
 |
| Gambar 8. Copy Kodingan tersebut |
Kamu paste di text editor kamu lalu pilih save selanjutnya coba lihat hasil-Nya dibrowser kamu.
Agar hasilnya sama seperti tampilan boostrap yang install-Nya secara offline, kamu hanya perlu mengubah dibagian <body>di sini </body>. Perhatikan dibawah ini ya codingan-Nya
Agar hasilnya sama seperti tampilan boostrap yang install-Nya secara offline, kamu hanya perlu mengubah dibagian <body>di sini </body>. Perhatikan dibawah ini ya codingan-Nya
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1 class="display-3">Latihan Pertama Bootstrap</h1>
<p>Belajar Boostrap version 4 bersama om bewok di website bewoksatukosong.com</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Belajar Yuk »</a></p>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
Lalu hasilnya akan sama seperti boostrap yang di install secara offline.
 |
| Gambar 9. Tampilan Bootstrap Install Secara Online |
Download Source Kode Bootstrap Part 1
Source Kode Github Part 1 Install Bootstrap 4
Tutorial selanjutnya kita akan belajar mengenai Layout. Kamu bisa melihat disini List Tutorial Boostrap 4 Dari Awal Sampai Akhir
Source Kode Github Part 1 Install Bootstrap 4
Tutorial selanjutnya kita akan belajar mengenai Layout. Kamu bisa melihat disini List Tutorial Boostrap 4 Dari Awal Sampai Akhir
Terimakasih kak ,,karna blog yang kakak buat bagus dan sangat membantu kak,semoga sukses dan terus berkarya kak perkenalkan nama saya Muklas Angga Marendra ISB Atmaluhur
ReplyDeleteiyaaa halo muklas sukses terus ya
DeleteTerimakasih kak ,,karna blog yang kakak buat bagus dan sangat membantu kak,semoga sukses dan terus berkarya kak perkenalkan nama saya Muklas Angga Marendra ISB Atmaluhur
ReplyDelete