Cara Download Bootstrap 4 Untuk Pemula

Untuk dapat menggunakan bootstrap hal yang harus dilakukan yaitu mendownloadnya terbih dahulu. Bootstrap dapat di download dalam bentuk standar di halaman website bootsrap, selain itu download bootstrap dapat juga dalam bentuk template bootsrap yang telah di modifikasi.

Selain dapat menggunakan bootstrap yang sudah dimodifikasi, untuk memahami bootstrap ada baiknya kita memahami bootstrap telebih dahulu dengan cara menggunakan bootstrap standar yang belum dimodifikasi.

Bootstrap yang telah di customize atau telah dilakukan editing oleh web designer tentu telah memiliki tampilan unik sesuai dengan kebutuhan.

Ada banyak situs web penyedia template mulai dari yang gratis sampai yang berbayar yang menggunakan basis pengembangan bootsrap.

Jika telah mempelajari dasar bootstrap dan mengerti komponen bootstrap tentu nantinya kita dapat melakukan theming atau modifikasi bootstrap.

Bootstrap modifikasi yang di hasilkan nantinya selain bisa digunakan sendiri juga tidak menutup kemungkinan dapat dijual sesuai dengan kualitas template bootstrap modifikasi yang dihasilkan.

Baiklah sebelum berbicara lebih jauh tentang theming bootstrap kita kembali lagi ke topik pembahasan yaitu cara download dan menggunakan bootstrap untuk pertama kali.

Cara Download Bootstrap

Untuk mendownload bootrap silahkan kunjungi halman download bootstrap di link berikut ini :

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

cara download dan menggunakan bootstrap
Halaman Download Bootstrap

Halaman download bootstrap di atas terdiri atas bagian – bagian berikut:

1. Download file compiled css dan JS

Pada bagian ini file yang di download adalah file yang siap pakai dan tidak diperuntukkan untuk customize. Ketika di download kita bisa langsung menggunakan dengan menempatkan bootstrap ke halaman project.

ukuran file compiled bootstrap 4.5.2 sekitar 700kb

saat akan menggunakan hal yang perlu dilakukan yaitu dengan menambahkan jquery.js dan popper.js dependencies

2. Download Source files

Jika melakukan download bootstrap di download source files maka file bootstrap yang terdownload adalah file yang diperuntukkan untuk di modifikasi.

file ini kurang cocok jika hanya untuk penggunaan saja.

ukuran file source bootstrap files ini sekitar 3Mb

ketika digunakan untuk dikembangkan dalam pengembangannya dibutuhkan library sass compiler dan Autoprefixer.

3. BootsrapCDN

Menggunakan BootstrapCDN maksudnya menggunakan bootstrap tanpa harus mendownloadnya.

BootstrapCDN menyediakan konten bootstrap di server sehingga untuk menggunakannya cukup dengan mengakses url file bootstrapcdn tersebut.

Dengan memahami ketiga hal di atas tentu bisa diketahui file bootsrap mana yang akan di download. selanjutnya sebelum masuk pembahasan belajar bootstrap 4 mari ketahui terbelih dahulu cara menggunakan bootstrap.

Cara Menggunakan Bootstrap

1.Menggunakan bootstrap File Compiled CSS dan js

1. copy file bootstrap yang telah di download ke directory project yang dibuat

Sebagai contoh project indonetsource

C:\xampp\htdocs\indonetsource

2. Extract file bootstrap tersebut dan beri nama folder bootstrap

3. Buat file index.php sebagai berikut:

file index

scirpt file index

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="http://localhost/indonetsource/bootstrap/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link active" href="#">Indonetsource</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">about</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</body>

<script src="http://localhost/indonetsource/bootstrap/js/jquery-3.5.1.min.js"></script>
<script src="http://localhost/indonetsource/bootstrap/js/popper.min.js"></script>
<script src="http://localhost/indonetsource/bootstrap/js/bootstrap.min.js"></script>

</html>

setelah di jalankan hasilnya seperti di bawah ini:

contoh penggunaan bootstrap

Penjelasan script:

Untuk menggunakan bootstrap ada 4 file yang harus di load di bootstrap directroy.

File pertama yang harus di load adalah css yang di letakkan di bagian tag <head>

<link rel=”stylesheet” href=”http://localhost/indonetsource/bootstrap/css/bootstrap.min.css”>

bootstrap.min.css adalah file css bootstrap

Selnjutnya file kedua adalah file js. berdasarkan contoh pembuatan file index.php di atas untuk mengunakan bootstrap file bootsrap yang harus di load adalah sebagai berikut:

<script src=”http://localhost/indonetsource/bootstrap/js/bootstrap.min.js”></script><script src=”http://localhost/indonetsource/bootstrap/js/jquery-3.5.1.min.js”></script><script src=”http://localhost/indonetsource/bootstrap/js/popper.min.js”></script>

file bootstrap.min.js dapat di load langsung di directory bootstrap yang telah di download silahkan akses directory bootstrap/js.

untuk file jquery-3.5.1.min.js tidak tersedia di bootstrap untuk menggunakannya silahkan download di url berikut:

https://code.jquery.com/jquery-3.5.1.min.js

link download popper

https://unpkg.com/@popperjs/core@2.5.2/dist/umd/popper.min.js

silahkan diakses dan ctrl+A semua file tersebut simpan dengan namanya masing- masing sehingga menjadi seperti di bawah ini

2. Cara menggunakan Bootstrap Source File

Untuk menggunakan file ini kita membutuhkan kemampuan css dan javascript.

Tujuan dari penggunaan source file ini adalah untuk customize.

Dalam penggunaan bootstrap 4 untuk pemula ini belum di bahas cara customize atau theming bootstrap

3. Cara Mengunakan bootstrapCDN

Menggunakan bootstrapCDN lebih simple dengan cara menargetkan file css dan js server cdn bootstrap

silahkan lihat contoh starter bootstrap di link di bawah ini mengggunakan bootstrapCDN

https://getbootstrap.com/docs/4.5/getting-started/introduction/#starter-template

script starter seperti di berikut:

<!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.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

Dapat dilihat dengan menggunakan bootstrapCDN file css dan js diakses secara langsung ke server. Hal inilah yang membedakan penggunaan bootstrap dengan cara mendownload file compiled css dan js dan file bootstrapCDN.

Demikianlah tutorial cara mendownload bootstrap 4 dan cara menggunakan bootstrap 4. Untuk referensi lain mengenai bootstrap 4 silahkan diakses daftar tutorial bootstrap 4 indonetsource

Leave a comment