Tutorial Bootstrap 4 : Cara Menggunakan Bootstrap Offline untuk Pemula

Tutorial Bootstrap 4 : Cara Menggunakan Bootstrap Offline untuk Pemula – Halo sobat, pada kesempatan kali ini saya akan membahas cara menggunakan bootstrap 4 untuk pemula. Disini saya tidak akan membahas terlalu dalam karena kita akan belajar dasarnya saja, 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.
Persiapan Project
Yang perlu kita lakukan pertama adalah mendownload source file bootstrap, kita mendownload melalui situs resmi pada link berikut :
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 :

<!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=”css/bootstrap.min.css”>
    <title>Bootstrap4</title>
  </head>
  <body>
    <h1>Belajar Bootstrap</h1>
 
    <!– Optional JavaScript –>
    <!– jQuery first, then Popper.js, then Bootstrap JS –>
    http://js/jquery-3.3.1.slim.min.js
    http://js/popper.min.js
    http://js/bootstrap.min.js
  </body>
</html>

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

kita bisa mendapatkan file tersebut dengan membuka link berikut lalu mengcopy kode yang ada, setelah itu kita save ke folder js dengan format .js yakni format file javascript.

http://bit.ly/2NPx2jv

atau download file melalui link berikut : download
Menambahkan Komponen
Komponen Bootstrap yang akan kita tambahkan adalah jumbotron untuk tampilan awal. copy kode berikut dan tempatkan setelah tag <body> :
   

   

WELCOME

   

Berlajar Bootsrap 4

   

  </div>

Berikut tampilan pada text editor :
Buka index.html dan hasilnya akan seperti berikut :
Sekian artikel Cara Menggunakan Bootsrap Offline untuk Pemula, semoga bermanfaat. Nantikan juga tutorial Bootstrap 4 selanjutnya.

from KomGaming http://bit.ly/2NL1Ql7