√ Cara Menggunakan Bootstrap 4 Offline untuk Pemula - Teknolalat

Find Us OIn Facebook

Cara Menggunakan Bootstrap Offline
Bootstrap 4: Cara Menggunakan Bootstrap Offline untuk Pemula - Halo sobat, pada kesempatan kali ini saya akan membahas cara menggunakan salah satu framework berbasis html yang populer yakni bootstrap 4. Bootstrap banyak digunakan oleh Web Developer untuk membuat tampilan dasar web baik front end maupun back end.

Bootstrap 4 telah menyediakan berbagai komponen html siap pakai dengan tampilan yang menarik dan ringan. Disini saya tidak akan membahas terlalu dalam karena kita akan belajar dasarnya saja, yaitu cara menggunakan Bootstrap 4 offline. 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.

Cara Menggunakan Bootstrap 4 Offline

Yang perlu dilakukan pertama adalah mendownload source file bootstrap 4, Anda dapat mendownload melalui situs resmi pada link berikut.

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

Setelah kita extract file yang telah didownload, selajutkan kita copy folder css dan js yang ada pada folder dist kedalam folder web kita.

Cara Menggunakan Bootstrap 4 Offline

Maka kita akan memiliki folder dan file berikut pada folder web.
Cara Menggunakan Bootstrap 4 Offline

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.

Menggunakan Bootstrap 4 Offline Index

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 -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

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

Anda bisa mendapatkan file tersebut dengan membuka link berikut lalu klik kanan pada browser dan pilih save as.., setelah itu pilih save ke folder js dan pastikan file tersimpan dengan format .js yakni format file javascript.

https://code.jquery.com/jquery-3.4.1.slim.min.js
https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js

Jika kita menjalankan index.html maka tampilan awal akan seperti berikut.

Menggunakan Bootstrap 4 Pemula

Menambahkan Komponen Bootsrap 4

Komponen Bootstrap yang akan kita tambahkan adalah jumbotron sebagai tampilan awal. copy kode berikut dan tempatkan setelah tag <body> .

<div class="jumbotron jumbotron-fluid">
    <div class="container text-center">
    <h1 class="display-4">WELCOME</h1>
    <p class="lead">Berlajar Bootsrap 4</p>
    </div>
  </div>

Berikut tampilan pada text editor.

Menggunakan Bootstrap 4

Buka index.html dan hasilnya akan seperti berikut.

Menggunakan Bootstrap 4 Jumbotron

Penutup

Sekian artikel cara menggunakan Bootstrap offline untuk pemula. Nantikan juga tutorial Bootstrap 4 selanjutnya, sekian dan semoga bermanfaat.
Load Comments
Lebih baru Lebih lama