PENGERTIAN BOOTSTRAP DAN CARA INSTALL BOOTSTRAP OFFLINE

 

Apa itu Bootstrap?

Bootstrap adalah framework CSS yang dikhususkan untuk pengembangan front-end website. Framework ini mempunyai nama asli Twitter Blueprint. Ada kata ‘Twitter’ karena pada awalnya dikembangkan untuk sosial media Twitter yang sangat terkenal saat ini dengan pengguna hampir 326 juta orang.

Sebelum Bootstrap muncul, sudah ada framework lain yang tersedia. Hanya saja tingkat konsistensi dalam proses pengembangan buruk. Selain itu juga butuh biaya perawatan mahal.

Berdasarkan permasalahan ini, akhirnya para pengembang menemukan Bootstrap. Berbeda dengan framework sebelumnya, Bootstrap dikenal konsisten dan lebih sederhana.

Bootstrap adalah salah saatu frameework yang memungkinkan developer dapat mengembangkan website dengan mudah dan cepat. Developer hanya perlu memanggil class tertentu untuk membuat tombol, panel, tabel, pesan peringatan, dan lain sebagainya.

Bootstrap terdiri dari beberapa file. File pada Bootstrap berisi kumpulan baris kode tersusun dari CSS dan JavaScript yang berbentuk class. Jadi ketika Anda menggunakan Bootstrap untuk mengembangkan website, membuat satu tombol tidak perlu menyusun beberapa baris kode karena tinggal memanggil salah satu class saja.

Perbedaan Bootstrap 3 & Bootstrap 4

Bootstrap sampai dengan saat ini masih memperbarui sistemnya. Tidak hanya berhenti di angka 3, tapi sudah masuk ke versi 4.

Pada versi 4 ini ada beberapa pembaharuan lebih banyak berhubungan dengan tema. Contohnya saja perubahan tampilan styling, warna, fonts, dan lain sebagainya.

Perubahan yang terjadi antara lain:

1. Global

Bootstrap menyediakan ukuran font global (default). Bootstrap 3 menggunakan ukuran font 14px, sedangkan pada Bootstrap 4 diganti dengan ukuran yang lebih besar, yaitu 16px.

Jadi, ketika menggunakan Bootstrap 3 dan diperbarui menjadi 4, tulisan akan terlihat lebih besar dibandingkan dengan sebelumnya. Jadi ketika beralih dari Bootstrap 3 ke 4, Anda perlu menyesuaikannya lagi ukuran pixel menjadi lebih kecil supaya sesuai dengan ukuran sebelumnya.

Selain itu, font bawaan pun diganti. Bootstrap 4 menggunakan font fallback Helvetica Neue, Arial, dan Sans-Serif menggantikan Bootstrap 3 yang sebelumnya menggunakan font Helvetica Neue, Sans-Serif, Helvetica, dan Arial.

2. Grid

Bootstrap 4 tidak memerlukan lagi col- pada setiap class grid. Ini berbeda dengan Bootstrap 3 yang sebelumnya menggunakan col- di depan, misalnya ketika menggunakan class “col-md-offset-3” untuk membatasi kolom.

Bootstrap 4 menambah satu sistem grid menjadi 5, yaitu col-sm, col-md, col-lg, col-xl, dan col-*. berbeda dengan Bootstrap 3 yang hanya menggunakan 4 sistem grid.

Bootstrap 4 menghilangkan col-xs dan diwakilkan oleh col-sm untuk perangkat super kecil (extra small) atau menggunakan col-* untuk mendefinisikan “semua perangkat” tanpa harus menentukannya.

Jadi kesimpulannya, penggunaan baris kode Bootstrap 4 lebih ringkas dibandingkan dengan Bootstrap 3.

3. Tabel

Bootstrap 4 mendukung gaya untuk header atau judul tabel –yang sebelumnya di Bootstrap 3 tidak didukung. Selain mendukung gaya header, Bootstrap 4 juga dapat memberikan warna tabel header menjadi gelap (.thead-dark) atau terang (.thead-light).

Di Bootstrap 4 untuk membuat table responsive langsung di dalam tag <table>. Berbeda dengan Bootstrap 3 yang perlu menambahkan class .table-responsive di dalam tag <div>. Selain itu, di Bootstrap 4 bisa menentukan warna tabel menjadi gelap dengan menggunakan .table-dark.

Cara Install Bootstrap 4

Cara install Bootstrap ada beberapa opsi pilihan. Anda bisa menginstall Bootstrap dengan composer, bower, atau npm. Selain itu Bootstrap juga dapat diinstall secara offline dan online.

Namun sebelum Anda menerapkan cara menggunakan bootstrap offline, akan lebih baik jika menyiapkan terlebih dahulu project Bootstrap dan ini tergantung dari lingkungan development yang digunakan.

Sebagai contoh, cara install Bootstrap 4 dengan npm dan bower akan lebih cocok ketika Anda ingin mengembangkan website dengan menggunakan NodeJs.

Pada proses instalasi, kebanyakan developers menggunakan cara manual dan offline untuk menambahkan Bootstrap ke dalam project mereka.

Supaya lebih jelas, berikut ini beberapa opsi untuk menambahkan atau cara install Bootstrap 4 di dalam project Anda.

1. Cara Install Bootstrap Offline

Proses instalasi Bootstrap secara offline ini ini memudahkan Anda dalam proses pengembangan. Website tidak perlu mengambil file (resource) dari website lain, tapi langsung dari penyimpanan utama.

Langkah 1: Buat Direktori Baru Kemudian Download Bootstrap

Tambahkan folder baru ke dalam folder root web server Anda. Jika menggunakan Linux, cukup ketik perintah di bawah ini.

Setelah proses download selesai, Anda akan mendapatkan file zip dengan beberapa folder di dalamnya.

Di dalam folder ini terdapat beberapa file yang terkumpul ke dalam beberapa assets dan menyediakan beberapa fungsi dan class di dalamnya. File zip ini nantinya perlu Anda ekstrak terlebih dahulu ke dalam folder project supaya dapat digunakan.

Langkah 2: Ekstrak File Bootstrap

Setelah Anda memindahkan file zip tadi ke dalam folder project, ekstrak file tersebut di dalamnya. Anda akan melihat susunan direktori seperti di bawah ini:

bootstrap/└── dist/    ├── css/    │ ├── bootstrap-grid.css    │ ├── bootstrap-grid.css.map    │ ├── bootstrap-grid.min.css    │ ├── bootstrap-grid.min.css.map    │ ├── bootstrap-reboot.css    │ ├── bootstrap-reboot.css.map    │ ├── bootstrap-reboot.min.css    │ ├── bootstrap-reboot.min.css.map    │ ├── bootstrap.css    │ ├── bootstrap.css.map    │ ├── bootstrap.min.css    │ └── bootstrap.min.css.map    └── js/        ├── bootstrap.bundle.js        ├── bootstrap.bundle.js.map        ├── bootstrap.bundle.min.js        ├── bootstrap.bundle.min.js.map        ├── bootstrap.js        ├── bootstrap.js.map        ├── bootstrap.min.js        └── bootstrap.min.js.map

Langkah 3: Buat Sebuah File Index.html

Supaya Anda bisa menggunakan Bootstrap dan membuat halaman website, buka teks editor dan buat file index.html. Di dalam file index.html  isikan beberapa baris kode, tapi jangan lupa untuk memanggil file Bootstrap dan library lainnya.

Sebagai contoh, di bawah ini adalah tampilan sederhana menggunakan Bootstrap dan beberapa library lain.

<!DOCTYPE html><html lang=”en”><head>  <title>Bootstrap Example</title>  <meta charset=”utf-8″>  <meta name=”viewport” content=”width=device-width, initial-scale=1″>  <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>  <link rel=”stylesheet” href=”css/bootstrap.min.css” />  <link rel=”stylesheet” href=”css/bootstrap.min.css”></head><body>

<div class=”jumbotron text-center”>  <h1>Halaman Bootstrap Pertama</h1>  <p>Resize this responsive page to see the effect!</p> </div>  <div class=”container”>  <div class=”row”>    <div class=”col-sm-4″>      <h3>Kolom 1</h3>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p>    </div>    <div class=”col-sm-4″>      <h3>Kolom 2</h3>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p>    </div>    <div class=”col-sm-4″>      <h3>Kolom 3</h3>              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p>    </div>  </div></div></body></html>

Baris kode di atas tidak hanya memanggil file bootstrap.min.css yang berada di folder css melalui baris:

<link rel=”stylesheet” href=”css/bootstrap.min.css” />

Sampai di sini Anda sudah dapat menggunakan Bootstrap untuk mengembangkan website.