Cara Install Bootstrap 4 Part 1 - Tutorial Programming & Digital Marketing

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Monday, February 25, 2019

Cara Install Bootstrap 4 Part 1


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. 
  1. Offline : kamu tidak membutuhkan internet untuk meload website tersebut, karena source code-Nya sudah kamu install semua di komputer kamu
  2. 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
  1. Kamu bisa download source code-Nya disini  
  2. https://github.com/twbs/bootstrap/archive/v4.2.1.zip
  3. Kecil kok, karena ukuran-Nya hanya 2.5 mb 😜.
  4. Kamu extract terlebih dahulu
  5. 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.
  6. Selanjutnya didalam folder latihan1, buat folder css dan js
  7. 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 
  8. Gambar 2. Copy dari folder boostrap yang sudah kita download dan kita extract ya
  9. 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 
  10. Gambar 3. Copy dari folder bootstrap yang sudah kita download dan kita extract ya
  11. Jangan lupa untuk membuat file latihan1.html 
    Gambar 4. Buat file bernama latihan1.html
  12. Kamu buka text editor kesayangan kamu, kalau om bewok menggunakan visual code. 
  13. latihan1.html nya jangan di biarkan kosong, kamu beri sedikit codingan html seperti dibawah ini. 
  14. <!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 &raquo;</a></p>
            </div>
        </div>
      </body>
    </html>
    

  15. Gambar 5. let's code it
  16. Maka hasilnya akan seperti dibawah ini. 
Gambar 6. Hasil-Nya seperti dibawah ini
Ini adalah cara install bootstrap 4 secara offline dan cara menggunakan bootstrap tersebut, untuk kodingan-Nya nanti di tutorial selanjutnya om bewok jelaskan maksudnya apa. 

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 

<!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 &raquo;</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

3 comments:

  1. 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

    ReplyDelete
  2. 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

    ReplyDelete