Pendahuluan
Bootstrap Kerangka Kerja merupakan sebuah istilah yang tidak asing bagi para Programmer . Bootstrap adalah framework HTML, CSS, dan JavaScript yang populer untuk mengembangkan situs web responsif dan mobile-first. Diciptakan oleh Mark Otto dan Jacob Thornton dari Twitter, Bootstrap menyediakan serangkaian alat yang intuitif dan kuat, yang memungkinkan pembuat web menghasilkan situs yang tidak hanya fungsional tetapi juga estetik. Artikel ini akan menggali lebih dalam tentang apa itu Bootstrap, jenis-jenisnya, serta memberikan contoh penggunaan kode dasar Bootstrap.
Pengertian Bootstrap Kerangka Kerja
Bootstrap adalah kerangka kerja front-end yang dirancang untuk mempercepat dan mempermudah proses pengembangan web. Dengan kelas-kelas CSS yang sudah ditentukan, komponen interaktif JavaScript, dan sistem grid yang responsif, Bootstrap memungkinkan developer untuk mengkonstruksi website yang adaptif dan menarik dengan cepat.
Macam-Macam Versi Bootstrap Kerangka Kerja
Sejak peluncurannya, Bootstrap telah melalui beberapa versi, masing-masing membawa peningkatan dan fitur baru:
- Bootstrap 2
Mengenalkan sistem grid 12-kolom responsif dan komponen desain antarmuka yang bertambah.
- Bootstrap 3
Menambahkan desain mobile-first dan menghilangkan dukungan untuk versi browser yang lebih lama.
- Bootstrap 4
Menggunakan Sass sebagai preprocessor CSS dan menambahkan flexbox grid yang lebih kuat.
- Bootstrap 5
Menghapuskan jQuery sebagai ketergantungan dan memperkenalkan komponen yang lebih ringan serta sistem grid yang ditingkatkan.
Contoh Kode Bootstrap Kerangka Kerja
Untuk mengilustrasikan penggunaan Bootstrap, mari kita lihat contoh kode dasar yang membuat halaman web responsif dengan Bootstrap 5.
html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Contoh Bootstrap</title>
<!– Menyertakan CSS Bootstrap –>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css”>
</head>
<body>
<!– Navbar contoh –>
<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<div class=”container-fluid”>
<a class=”navbar-brand” href=”#”>Navbar</a>
<button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse” data-bs-target=”#navbarNav” aria-controls=”navbarNav” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarNav”>
<ul class=”navbar-nav”>
<li class=”nav-item”>
<a class=”nav-link active” aria-current=”page” href=”#”>Home</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Features</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
<!– Konten utama –>
<div class=”container mt-4″>
<div class=”row”>
<div class=”col-md-4″>
<h2>Welcome to Bootstrap</h2>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<a class=”btn btn-primary” href=”#” role=”button”>Learn more</a>
</div>
<div class=”col-md-8″>
<!– Card contoh –>
<div class=”card”>
<img src=”…” class=”card-img-top” alt=”…”>
<div class=”card-body”>
<h5 class=”card-title”>Card title</h5>
<p class=”card-text”>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
<a href=”#” class=”btn btn-primary”>Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
<!– Menyertakan JavaScript Bootstrap –>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/5.1
Kesimpulan
Bootstrap telah berkembang menjadi kerangka kerja front-end yang esensial dalam pengembangan web, menawarkan sejumlah besar fitur dan komponen yang siap pakai untuk mempercepat proses desain. Dengan evolusinya dari versi 2 hingga versi terbaru, Bootstrap telah beradaptasi dengan standar web terkini, mengutamakan desain yang responsif dan mobile-first yang memastikan situs web dapat diakses dan dinikmati di berbagai perangkat dan ukuran layar.
