Membangun Website Responsif dan Dinamis dengan Bootsrap

  Bootstrap adalah sebuah framework yang dapat memudahkan seorang programmer web untuk mempercepat dan mempermudah dalam membuat dan mengembangkan website. Hampir di setiap beberapa website yang sudah tersebar di internet menggunakan bootsrap sebagai komponen yang digunakan oleh developer dalam membangun websitenya karena mudah menggunakannya. Inilah mengapa bootsrap menjadi pilihan minat oleh para developer karena dapat menyuguhkan tampilan yang sederhana tetapi bernuansa modern sehingga mudah dan user friendly serta nyaman di lihat dan digunakan. Bootstrap adalah framework CSS yang bebas dan gratis untuk membantu developer dalam membangun sebuah website dan aplikasi web. Framework bootsrap ini berisikan template design dan komponen berbasis HTML dan CSS yang terdiri dari tombol, icon, navigasi dan komponen – komponen lainnya, serta juga ekstensi opsional JavaScript dan hanya di fokuskan pada pengembang front-end.  

Sejarah Bootstrap

Dikembangkan oleh Jacob Thornton dan Mark Otto Pada awalnya Bootstraps Bernama Twitter Blueprint yang digunakan sebagai framework atau kerangka kerja untuk mendorong konsistensi perangkat internal yang sesuai. Menurut Mark Otto selaku pengembang twitter, sebelum bootstrap sebetulnya sudah ada berbagai framework lain yang sudah banyak tersedia dan digunakan untuk pengembangan antarmuka , tetapi tingkat konsistensi dalam proses pengembangannya buruk dan butuh perawatan yang mahal. Sehingga banyak para developer yang memilih bootstrap sebagai framework karena selain mudah digunakan bootstrap juga dikenal sederhana, ringan dan konsisten. Terbukti hingga saat ini bootstrap sudah mengeluarkan yang terbaru yaitu Bootstrap 4. Bootstrap menjadi framework populer yang digunakan oleh para developer karena dikenal mudah di gunakan, developer hanya perlu memanggil class tertentu untuk membuat navbar, table, pesan peringatan, tombol dan komponen lainnya yang di perlukan dalam pembuatan website dan aplikasi web. Bootstrap terdiri dari beberapa file. File bootstrap berisikan kumpulan – kumpulan baris kode yang tersusun dari CSS dan JavaScript yang dibungkus dengan sebutan Class, jadi Ketika developer membuat suatu tombol , navbar , atau table cukup hanya dengan memanggil salah satu class-nya saja.  

Cara install Bootstrap

Cara untuk menginstall bootstrap ada beberapa opsi pilihan. Developer dapat menginstall Bootstrap dengan cara offline maupun online. Pada proses instalasi Bootstrap kebanyakan para developer menginstall dengan cara Offline untuk menambahkan Bootstrap ke dalam project mereka namun tidak sedikit pula yang menginstall secara online. Berikut ini beberapa opsi cara untuk menginstall atau menambahkan Bootstrap kedalam project.  

Install Bootstrap secara offline

Langkah 1 : download bootstrap di website resminya

Klik download dan tunggu hingga selesai, setelah proses download selesai Anda akan mendapatkan file berupa zip yang terdapat beberapa folder di dalamnya. Di dalam folder ini terdapat beberapa file folder di dalamnya ada beberapa file assets yang menyediakan beberapa fungsi dan class di dalamnya.  

Langkah 2 : Ekstrak file bootstrap

Ektrak file bootstrap yang tadi sudah di download ke dalam folder project, dan akan terdapat beberapa file yang ada di dalamnya

Didalam file tersebut terdapat beberepa file, contoh: didalam folder css adalah sbb:

 

Langkah 3 : cara menggunakan bootstrap

Agar bootstrap dapat digunakan dalam membuat halaman website buka teks editor dan buatlah file index.html gambarannya seperti ini

Baris kode di atas sudah memanggil file bootstrap yang berada di folder css melalui kode baris:

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

Sampai di sini Anda sudah dapat menggunakan bootstrap untuk mengembangkan website atau aplikasi web.    

Install Bootstrap secara Online

Agar bootsrap dapat digunakan dalam dalam membuat halaman website, kunjungi website resmi bootstrap https://getbootstrap.com/ dan klik Documentation pilih Stater template dan click Copy kemudian simpan di teks editor dan run dengan browser maka otomatis akan memanggilnya

Link  bootstrap online :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

 

Namun ada kekuranganya, ketika akan memanggil Bootstrap secara online akan mengurangi tingkat kecepatan website.Cara menggunakan bootstrap

Bootstrap menyediakan beberapa komponen, Content, Layout yang menunjang pengembangan website agar lebih dinamis serta menarik seperti Navbar, Button, Form dan masih banyak fitur yang ditawarkan bootstrap untuk memudahkan dalam membangun website yang responsif dan dinamis. Misalkan component yang ditawarkan bootstrap seperti :   Components Tombol / button bootstrap Tombol adalah suatu komponen yang biasa di gunakan untuk membuat website. Tombol berfungsi untuk mengeksekusi misalnya seperti tombol setuju, simpan dan yang lainnya. Bootstrap juga menyediakan berbagai pilihan tombol yang menarik, Anda cukup dengan memanggil salah satu class tombol button dengan cara panggil classnya Contoh :

<button type="button" class="btn btn-success">Success</button>

  Maka hasilnya

<button type="button" class="btn btn-warning">Warning</button>

  Maka hasilnya :

Dan masih banyak lagi komponen tombol / button yang menarik yang dapat digunakan     Tabel Bootstrap Tabel adalah sebagai suatu kerangka yang berisikan data berupa teks / numerik yang di susun secara teratur dengan diberi pembatas berupa garis sehingga dapat menyajikan data secara mudah dan teratur. Bootstrap menyajikan beberapa tabel yang menarik dan mudah digunakan; Contoh : Dengan memberikan panggilan class

berikut hasil outputnya

beberapa bagian di atas adalah contoh beberapa fitur bootstrap dan masih banyak lagi fitur yang dapat digunakan guna menunjang dalam membangun dan Mengembangkan website seperti dropdown menu, forms, Carousel dan masih banyak lagi.  

Penutup

Fitur yang di tawarkan bootstrap serta kemudahan dalam menggunakannya, membuat bootstrap menjadi framework yang sering dipakai oleh para developer karena memudahkan dalam membuat tombol, tabel, navbar dan lain sebagainya cukup hanya dengan memberikan panggilan class bootstrap saja maka akan mendapatkan tampilan yang modern dan menarik. Demikian penjelasan dan tutorial bootstrap. Semoga panduan yang diberikan dapat memudahkan Anda selaku developer  dalam membangun dan mengembangkan sebuah website.

Tags: bootstrap, web