Bagaimana Cara Menggunakan Bootstrap 4 Untuk Membuat Website

Bagaimana Cara Menggunakan Bootstrap 4 Untuk Membuat Website

Sharing is caring!

Hallo, Guys! Gimana kabar? Semoga selalu sehat, ya. Oia, kalian sudah familiar kah dengan framework Bootstrap? Fungsi Bootstrap untuk mengembangkan website dengan desain yang responsive dan mobile-first. Hampir setiap website yang tersebar di internet menggunakan Bootstrap sebagai komponennya. Okay, kita ulas bersama yuk Bagaimana Cara Menggunakan Bootstrap 4 Untuk Membuat Website

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.

Ingin tahu kegunaan Bootstrap, kah? Tenang, bisa kalian temukan di sini.

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

Bootstrap terdiri dari beberapa file. File pada Bootstrap berisi kumpulan baris kode tersusun dari CSS dan JavaScript yang berbentuk class.

Perbedaan Bootstrap 3 dan Bootstrap 4

Bootstrap sampai dengan saat ini masih memperbarui sistemnya lho bahkan sudah masuk ke versi 4.

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

Perubahan yang terjadi antara lain:

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 diperbarui ke versi 4, tulisan akan terlihat lebih besar dibandingkan dengan sebelumnya. Kalian pun 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.

Grid

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

Bootstrap 4 juga menambah satu sistem grid menjadi 5, yaitu col-sm, col-md, col-lg, col-xl, dan col-*. Sedangkan Bootstrap 3 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.

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 nih, 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. Kalian bisa menginstall Bootstrap dengan composer, bower, atau npm. Selain itu Bootstrap juga dapat diinstall secara offline dan online.

Namun, sebelum menerapkan cara menggunakan bootstrap offline, sebaiknya menyiapkan terlebih dahulu project Bootstrap dan ini bergantung dari lingkungan development yang digunakan.

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

Cara Install Bootstrap Offline

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

Langkah 1: Buat Direktori Baru Lalu Download Bootstrap

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

$ mkdir website-bs4

Selanjutnya silakan download Bootstrap.

cara-menggunakan-bootstrap-1

Setelah proses download selesai, kalian 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 serta class di dalamnya. File zip ini nantinya perlu kalian ekstrak terlebih dahulu ke dalam folder project supaya dapat digunakan.

Langkah 2: Ekstrak File Bootstrap

Setelah kalian memindahkan file zip tadi ke dalam folder project, ekstrak file tersebut di dalamnya. Kalian 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 kalian bisa menggunakan Bootstrap dan membuat halaman website, silakan 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” />

Okay, sekarang kalian sudah dapat menggunakan Bootstrap untuk mengembangkan website.

Cara Menginstall Bootstrap Online

Selain melakukan ekstrak manual ke dalam project, kalian bisa memanggil Bootstrap secara online (menggunakan CDN). Namun ada kekurangannya, yakni saat kalian memanggil secara online tentunya akan mengurangi tingkat kecepatan website.

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js”></script>

Perintah di atas akan mengambil file Bootstrap dan menyalinnya ke dalam website supaya dapat digunakan oleh class atau fungsi lain.

Cara Menggunakan Bootstrap

Membuat Tabel dengan Bootstrap

Bootstrap memberikan kalian kemudahan untuk membuat tabel tanpa harus mengetikkan berbaris-baris kode program. Kalian hanya perlu memanggil class-class yang sudah ada di dalam file Bootstrap.

Untuk menggunakan class dengan kombinasi class lainnya, gunakan class table ditambah dengan class lain. Contoh penggunaannya seperti di bawah ini:

# untuk membuat tabel stripped

<table class=”table table-stripped”>

Atau

# untuk membuat tabel hovel<table class=”table table-hover”>

Di dalam file Bootstrap sudah terdapat beberapa class yang didesain untuk kebutuhan pembuatan tabel, antara lain “.table”, “.table-striped”, “.table-bordered”, dan “.table-hover”.

  • .table”: class yang digunakan untuk membuat dan mendefinisikan tabel biasa/standar. Class ini hanya menambahkan lapisan yang kecil dan pembatas secara horizontal. Class ini menggunakan baris kode <table class=”table”>.
  • .table-stripped”: class yang digunakan untuk membuat table dengan gaya yang zebra. Jadi warna setiap baris berselang seling. Class ini menggunakan baris kode <table class=”table table-sripped”>.
  • .table-bordered”: merupakan class yang digunakan untuk menampilkan border di dalam table. Jadi keseluruhan table akan dipasang sebuah border. Class ini menggunakan baris kode <table class=”table table-bordered”>.
  • .table-hover”: dapat kalian manfaatkan untuk memberikan efek hover pada sebuah row. Efek ini akan berjalan ketika kalian meletakkan mouse di row yang diberikan class ini. Class ini menggunakan baris kode <table class=”table table-hover”>.

Selain kumpulan class untuk mendesain table, terdapat beberapa class pewarnaan row tabel dan data menggunakan Bootstrap, yaitu “.success”, “.danger”, “.info”. “.warning”, dan “.active”.

Untuk menggunakan class ini, selipkan di antara tag tr, seperti ini:

…      <tr class=”info”>        <td>Info</td>        <td>Khafid</td>        <td>[email protected]</td>      </tr>…

Kalian dapat mendesain tabel yang menarik dan mudah dibaca oleh pengunjung website dengan menggunakan kumpulan class ini.

Kalian dapat menggunakan baris kode di bawah ini untuk mencoba menampilkan tabel dengan Bootstrap di browser.

Mengatur Tampilan Gambar dengan Bootstrap

Kalian juga dapat mendesain gambar menggunakan Bootstrap. lho. Membuat gambar yang responsive, berbentuk round, lingkaran, dan thumbnail juga sangat mudah menggunakan framework ini.

Class “.img-responsive”, “.img-rounded”, ”img-circle”, dan ”img-thumbnail” adalah kumpulan class yang digunakan untuk memanipulasi gambar di Bootstrap. Kembangkan desain yang maksimal dan hadirkan gambar menarik di website kalian.

  • .img-responsive”: class ini memungkinkan kalian membuat gambar yang dapat dibuka di berbagai macam resolusi layar. Class .img-responsive membuka ukuran gambar dapat menyesuaikan dengan ukuran elemen inti. Kalian dapat melihat efeknya ketika melakukan resize pada browser.
<img src=”kantor-jetorbit.png” class=”img-responsive” alt=”Logo Jetorbit”>
  • .img-rounded”: ketika kalian ingin membuat gambar dengan sisi melengkung, silakan gunakan class ini maka kalian akan memiliki gambar yang melengkung di bagian sisinya.
<img src=”kantor-jetorbit.png” class=”rounded” alt=”Logo Jetorbit”>
  • .img-circle”: terkadang ingin gambar yang berbentuk lingkaran, silakan gunakan class ini dan gambar akan tampil dengan bentuk yang melingkar.
<img src=”kantor-jetorbit.png” class=”rounded-circle” alt=”Logo Jetorbit”>
  • .img-thumbnail”: class ini digunakan untuk membuat gambar thumbnail dengan Bootstrap.
<img src=”kantor-jetorbit.png” class=”img-thumbnail” alt=”Logo Jetorbit”>

Membuat Pesan Peringatan (Alert) dengan Bootstrap

Bootstrap menyediakan class khusus untuk menampilkan alert dengan sangat sederhana dan mudah. Hal ini karena kalian tinggal memanggil sebuah class di Bootstrap menggunakan satu perintah saja.

Supaya tampilan alert dapat muncul, cukup panggil class “alert” untuk mendefinisikan tampilan alert di Bootstrap. Supaya tampilannya lebih bervariasi, tambahkan class lain.

Untuk membuat class ini caranya cukup mudah. Cukup buat tag <div> dengan isi peringatan yang ingin dibuat. Kemudian di tag pembuka <div> buat class alert untuk mendeklarasikan alert, berikut contohnya:

…<div class=”container”>  <h2>Alerts</h2>  <div class=”alert alert-success”>    <strong>Success!</strong> Alert box ini dapat digunakan untuk mengindikasikan aksi sukses atau positif.  </div>  <div class=”alert alert-info”>    <strong>Info!</strong> Alrt box ini dapat mengindikasikan informasi yang netral.  </div>  <div class=”alert alert-warning”>    <strong>Warning!</strong> Alert box ini dapat untuk mengindikasikan pesan warning dan mungkin butuh perbaikan.  </div>  <div class=”alert alert-danger”>    <strong>Danger!</strong> Alert box ini dapat mengindikasikan pesan penting dan kemungkinan efek buruk.  </div></div>…

Terdapat beberapa pilihan class untuk menampilkan pesan peringatan di Bootstrap, seperti “.alert-success”, “.alert-info”, “.alert-warning”, atau “.alert-danger”. Kumpulan class ini akan membuat tampilan alert kalian lebih bervariasi.

  • .alert-success: Class alert box ini dapat digunakan untuk mengindikasikan aksi sukses atau positif.

Kalian dapat memanfaatkan class ini ketika ada input yang berhasil, misalnya saat pengguna selesai mengisikan data dan mengirimkannya.

Untuk menggunakan class ini cukup masukkan kode <div class=”alert alert-success”>.

  • .alert-info: Class alert box ini dapat mengindikasikan informasi yang netral.

Class ini dapat digunakan ketika ingin memberikan informasi tambahan kepada pengguna, misalnya memberikan informasi kegunaan tombol atau fungsi tertentu dan cara penggunaannya.

Untuk menggunakan class ini cukup masukkan kode <div class=”alert alert-info”>.

  • .alert-warning: Class alert box ini dapat untuk mengindikasikan pesan warning dan mungkin butuh perbaikan.

Class ini dapat digunakan ketika ingin memberikan informasi yang sedikit mendesak atau penting, misalnya ketika terjadi error pada suatu konfigurasi atau kesalahan pada saat pengisian data.

Untuk menggunakan class ini cukup masukkan kode <div class=”alert alert-warning”>.

  • .alert-danger: Class alert box ini dapat mengindikasikan pesan penting dan kemungkinan efek buruk.

Class ini dapat digunakan ketika terjadi suatu yang sangat serius, misalnya ketika terjadi permasalahan pada server atau konfigurasi keamanan yang gagal. Penggunaan alert yang sesuai akan memberikan user experience yang menarik.

Untuk menggunakan class ini cukup masukkan kode  <div class=”alert alert-danger”>.

Pengguna tidak akan kesulitan menemukan error yang terjadi sehingga problem solving pun dapat dilakukan dengan cepat.

Membuat Tombol dengan Bootstrap

Tombol adalah komponen yang umum dan sering digunakan untuk membuat website. Hal inilah yang membuat Bootstrap juga menyediakan class untuk membuat tombol yang menarik. Kalian tinggal memanggil salah satu class tombol dan tombol yang indah dapat ditampilkan di halaman website.

Supaya kalian bisa menggunakan tombol di dalam website, cukup panggil class “btn”. Selain itu, kalian bisa menambahkan class lain untuk memberikan variasi tombol di dalamnya.

Terdapat banyak variasi tombol yang disediakan oleh Bootstrap, seperti “.btn”, “.btn-default”, “.btn-primary”, “.btn-success”, “.btn-info”, “.btn-warning”, “.btn-danger”, dan “.btn-link”.

Contoh penggunaan skrip seperti di bawah ini:

<div class=”container”>  <h2>Button Styles</h2>  <button type=”button” class=”btn”>Basic</button>  <button type=”button” class=”btn btn-default”>Default</button>  <button type=”button” class=”btn btn-primary”>Primary</button>  <button type=”button” class=”btn btn-success”>Success</button>  <button type=”button” class=”btn btn-info”>Info</button>  <button type=”button” class=”btn btn-warning”>Warning</button>  <button type=”button” class=”btn btn-danger”>Danger</button>  <button type=”button” class=”btn btn-link”>Link</button>      </div>
  • .btn: Class ini untuk membuat tombol standar warna abu kehitaman.
  • .btn-default: Class ini untuk membuat tombol default berwarna abu.
  • .btn-primary: Class ini digunakan untuk membuat tombol warna biru. Biasanya digunakan untuk tombol login dan masuk ke dalam menu tertentu.
  • .btn-success: Class ini digunakan untuk membuat tombol ketika berhasil menginputkan sesuatu atau memproses suatu program.
  • .btn-info: Class ini digunakan untuk membuat tombol warna biru muda.
  • .btn-warning: Class ini digunakan untuk membuat tombol warning dengan warna kuning.
  • .btn-danger: Class ini digunakan untuk membuat tombol warning warna merah tua.
  • .btn-link: Selain tombol persegi, Bootstrap juga menyediakan tombol untuk link. Anda bisa menggunakan class ini.

Membuat Panel dengan Bootstrap

Contoh terakhir penggunaan Bootstrap adalah membuat panel. Panel adalah sebuah garis yang terbentuk dari garis dan padding.

Di Bootstrap, sebuah panel terdiri dari tiga bagian, yakni header, body, dan footer. Header berada di bagian atas. Body di bagian tengah atau inti. Sedangkan footer di bagian bawah.

Untuk membuat panel dengan header, body, dan footer harus dideklarasikan terlebih dahulu menggunakan kode seperti di bawah ini.

<div class=”panel panel-default”>    <div class=”panel-heading”>Panel Heading</div>    <div class=”panel-body”>Panel Content</div>    <div class=”panel-footer”>Panel Footer</div>  </div>

Terdapat banyak variasi panel yang dapat dibuat menggunakan Bootstrap, seperti “.panel-default”, “.panel-primary”, “.panel-success”, “.panel-info”,  “.panel-warning”, dan “.panel-danger”

  • .panel-default: Class ini digunakan untuk membuat sebuah panel dengan warna biasa (abu).
   <div class=”panel panel-default”>      <div class=”panel-heading”>Panel dengan class panel-default</div>      <div class=”panel-body”>Isi Konten</div>    </div>
  • .panel-primary: Class ini digunakan untuk membuat panel dengan warna biru tua.
<div class=”panel panel-primary”>      <div class=”panel-heading”>Panel dengan class panel-primary</div>      <div class=”panel-body”>Isi Konten</div>    </div>
  • .panel-success: Class ini digunakan untuk membuat panel dengan dengan warna atas hijau.
<div class=”panel panel-success”>      <div class=”panel-heading”>Panel dengan class panel-success</div>      <div class=”panel-body”>Isi Konten</div>    </div>
  • .panel-info: Class ini digunakan untuk membuat panel dengan warna header biru muda.
<div class=”panel panel-info”>      <div class=”panel-heading”>Panel dengan class panel-info class</div>      <div class=”panel-body”>Isi Konten</div>    </div>
  • .panel-warning: Class ini digunakan untuk membuat panel dengan warna header kuning muda.
<div class=”panel panel-info”>      <div class=”panel-heading”>Panel dengan class panel-info class</div>      <div class=”panel-body”>Isi Konten</div>    </div>
  • .panel-danger: Class ini digunakan untuk membuat panel dengan warna merah muda,
<div class=”panel panel-danger”>      <div class=”panel-heading”>Panel dengan class panel-danger class</div>      <div class=”panel-body”>Isi Konten</div>    </div>

Lima bagian di atas adalah contoh cara menggunakan Bootstrap. Selain itu, masih banyak class lain yang dapat digunakan untuk membuat Bootstrap, seperti BS Dropdowns Collapse, Tabs/Pills, Navbar, Forms, Carousel, Modal, Tooltip, Popover, Scrollspy, dan sebagainya.

Okay Guys, jadi bisa dibilang bahwa class-clas yang tersedia terbukti dapat membuat website lebih menarik. Selain itu, Bootstrap memudahkan pengembang hanya dengan satu perintah saja. Keren, kan? 

Oia, bagi kalian yang ingin membuat website khususnya bagi pemula, santuy, Jetorbit punya ebook spesial untuk kalian. Kalian bisa download ebook Panduan Mengenal Website untuk Pemula dengan GRATIS! Tenang, kami juga menyediakan VPS yang bisa kalian cek di sini.

Stay safe and always keep healthy

Bermanfaatkah Artikel Ini?

Klik bintang 5 untuk rating!

Rata rata rating 0 / 5. Jumlah rate 0

Yuk Rate 5 Artikel Ini!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Tutorial dan Informasi Teknologi - Jetorbit Blog
Bagaimana Cara Menggunakan Bootstrap 4 Untuk Membuat Website
Artikel
Bagaimana Cara Menggunakan Bootstrap 4 Untuk Membuat Website
Informasi mengenai teknologi dan panduan menggunakan hosting, website dan domain
Oia, kalian sudah familiar kah dengan framework Bootstrap? Okay, kita ulas yuk Bagaimana Cara Menggunakan Bootstrap 4 Untuk Membuat Website
Author Name
Publisher Name
Jetorbit
Publisher Logo
You might also like