Bootstrap: Pengertian Dan Cara Menggunakannya

Bootstrap adalah framework HTML dan CSS yang dikhususkan untuk membangun front-end pada sebuah we...
Penulis
Admin
Kategori
Tutorial
Estimasi
4 menit baca
Dilihat
1.6K
Posting
09 Jul 2022
Bootstrap: Pengertian Dan Cara Menggunakannya Bootstrap adalah framework HTML dan CSS yang dikhususkan untuk membangun front-end pada sebuah website, bootstrap sendiri saat ini sudah digunakan oleh hampir di seluruh dunia karena efisien dalam mengunakannya, bootstrap sendiri berfungsi selain mempermudah developer untuk membuat front-end website juga membuat tampilan responsive pada mobile phone atau smartphone Bootstrap: Pengertian Dan Cara Menggunakannya
2022-11-25

Pada artikel kali ini kita akan membahas apa itu bootstrap, apa aja keunggulan jika aplikasi website mengunakan bootstrap, seperti yang kita ketahui framework ini banyak digunakan oleh website-website diseluruh dunia, banyak sebab mengapa bootstrap ini begitu digemari bahkan wajib mengunakan framework ini, mari kita simak apa itu bootstrap.

 

Apa itu framework bootstrap

 

 

1. Apa itu pengertian dari Bootstrap

Bootstrap adalah sebuah framework CSS dikhususkan untuk membangun design pada front-end dalam sebuah website, framework ini sendiri saat ini sudah digunakan oleh hampir di seluruh dunia karena efisien dalam mengunakannya dan berfungsi selain mempermudah developer untuk membuat front-end website juga membuat tampilan responsive pada mobile phone atau smartphone. Framework ini bersifat Open-Source dimana developer dapat mengunakannya kapanpun.

Awalnya bootstrap dinamai Twitter Blueprint yang diciptakan oleh Jacob Thornton dan Mark Otto, yang digunakan untuk keperluan Internal pada Twitter, Bootstrap sendiri memiliki komponen HTML dan css seperti navigasi, form, button, card dll.

Dengan adanya framework ini, developer tidak perlu membuat komponen sendiri dan bisa menghemat waktu untuk mendesign Front-End, dengan forum komunitas yang berkembang pesat antar developer untuk framework ini.

 

2. Apa saja kelebihan dari Framework Bootstrap

Beberapa keunggulan framework bootstrap diantara lain:

  • Sangat menghemat waktu

Kamu tidak perlu membuat syntax dari nol, hanya perlu download file-file yang dibutuhkan agar project bisa langsung diimplementasikan, kamu juga bisa mengunakan CDN untuk mengambil file-file tersebut.

  • Design yang modern dan interaktif, menjadikan website menjadi menarik

Syntax bootstrap diperbaharui setiap tahunnya, mengikuti design saat ini yang dibutuhkan oleh para developer, jadi jangan khawatir untuk masalah ini.

  • Sudah mobile responsive

Kamu tidak perlu membuat file css khusus untuk mobile, file bootstrap sudah menjawab hal itu, yang pastinya menghemat waktu

  • Framework terus berkembang

Komunitas penguna framework ini cukup besar, hampir diseluruh dunia website mengunakan framework bootstrap ini.

 

Berkenalan dengan file file bootstrap

 

3. Berkenalan dengan file-file penting pada Bootstrap

Sebelum ketahap installing, terdapat komponen penting yang harus diketahui, diantaranya:

  • Bootstrap.css atau Bootstrap.min.css

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

Bootstrap.css memliki fungsi untuk mengatur struktur dalam layout tampilan, ukuran, warna pada komponen HTML yang mengunakan bootstrap, dengan adanya bootstrap.css, developer tidak perlu menulis code CSS dari awal untuk menampilkan visual front-end yang seragam, dan struktur layout css hanya tertuju pada satu file saja yaitu bootstrap.css.

Terdapat dua versi file css yaitu bootstrap.css dan bootstrap.min.css, dimana file bootstrap.css tidak terkompresi secara keseluruhan, sehingga ukuran file tersebut sangat besar berbeda dengan bootstrap.min.css, file tersebut sudah total terkompresi dengan ukuran file yang lebih ringan, dengan tujuan meningkatkan performa website kamu agar lebih cepat, kami sarankan untuk mengunakan file bootstrap.min.css pada website.

  • Bootstrap.js atau Bootstrap.min.js

<script src="js/bootstrap.min.js"></script>

Bootstrap.js adalah sekumpulan code javascript yang mengatur interaktif pada website, namun harus diintegrasikan dengan JQuery, tanpa JQuery bootstrap tidak akan berfungsi, fungsi dari bootstrap.js ini adalah membuat animasi dan masih banyak lagi. Seperti bootstrap.css, bootstrap.js pun memiliki dua versi, bootstrap.js dan bootstrap.min.js, tentunya kami sarankan untuk mengunakan bootstrap.min.js pada website kamu.agar performa lebih baik.

  • Glypicons

File ini tidak kalah pentingnya dengan bootstrap.css dan bootstrap.js, Glypicons adalah sekumpulan code untuk menampilkan icon-icon pada front-end website agar lebih menarik. Bootstrap menyediakan Glypicons gratis yaitu Glyphicons Halflings, walaupun yang ditawarkan icon-icon standart, namun cukup untuk memenuhi icons pada website anda yang mengunakan bootstrap.

 

4. Bagaimana caranya untuk install Bootstrap secara offline

Cara yang umum developer gunakan, kamu harus mengunduh terlebih dahulu file yang dibutuhkan

  • Download resource di getbootstrap.com, buka browser, lalu arahkan ke website tersebut, lalu cari tombol download, tunggu hingga selesai
  • Kemudian Extract file .zip yang baru saja didownload, nanti akan muncul folder css dan js, lalu pindahkan ke folder project website.
  • Buat file index.html, lalu buka text editor pilihan kamu, tempatkan file bootstrap.css pada tag diantara head dan bootstrap.js sebelum penutup tag body bersamaan dengan jquery.js, seperti ini:

 

<html lang="id">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<title>Contoh Penempatan Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <h1>Contoh Penempatan Bootstrap</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

 

Mengakses bootstrap secara online atau menggunakan CDN

 

5. Bagaimana cara install Bootstrap secara online

Selain kamu bisa mengunakannya secara offline, juga bisa melakukannya secara online. Metode ini file tidak perlu didownload, namun hanya memanggil file bootstrap tersebut melalui CDN, untuk file css bootstrap kamu bisa copy code berikut:

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>

Salin baris code diatas, lalu paste di antara tag head, lalu paste baris code js bootstrap diakhir sebelum tag body

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>

 

Kesimpulan

Akhir kata, dengan adanya framework ini sangat memudahkan developer untuk membangun sebuah website tanpa harus mengerjakan layout atau tampilan front-end, ditambah dengan responsive pada mobile, developer tidak perlu membuat web khusus untuk mobile karena bootstrap sudah menjawab hal itu.

Share