Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar Bootstrap Bagian 2 : Memahami Grid System di Bootsrap, selanjutnya kita akan belajar cara membuat fixed layout di Bootstrap.
Dengan Bootstrap 4 Anda masih dapat membuat layout halaman web berdasarkan jumlah px tetap, namun lebar penampung bervariasi tergantung pada lebar viewport dan layout juga responsif.
Proses pembuatan fixed layout namun responsif pada dasarnya dimulai dengan class .container.
Setelah itu Anda dapat membuat baris dengan class .row untuk membungkus kelompok kolom horizontal. Baris harus ditempatkan dalam .container untuk aligment dan padding yang tepat.
Kolom lebih lanjut dapat dibuat di dalam baris menggunakan class grid yang telah ditentukan seperti .col-*, .col-sm-*, .col-md-*, .col-lg-* dan .col-xl-* di mana * mewakili nomor grid dan harus dari 1 hingga 12. Silakan lihat tutorial sistem grid Bootstrap untuk mempelajari lebih lanjut tentang class grid.
Contoh berikut membuat layout responsif dengan lebar tetap yaitu lebar 720 px pada perangkat sedang yang memiliki lebar layar lebih besar dari atau sama dengan 768 px seperti tablet.
Sedangkan lebar 960 px pada perangkat besar dengan lebar layar lebih dari atau sama dengan 992 px seperti laptop kecil, dan 1140 px lebar pada perangkat ekstra besar yang memiliki lebar layar lebih dari atau sama dengan 1200 px seperti desktop.
Namun, jika lebar area pandang perangkat kurang dari 768 px tetapi lebih besar dari atau sama dengan 576 px, layoutnya akan menjadi lebar 540 px.
Untuk lebar area pandang kurang dari 576 px, layout akan mencakup lebar 100%.
Selain itu, kolom akan ditumpuk secara vertikal, navbar akan diciutkan dalam kedua kasus tersebut.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> Contoh Fixed Layout Bootstrap 4 </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
<div class="container">
<a href="#" class="navbar-brand mr-3">Tutorial Mbah WP</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Beranda</a>
<a href="#" class="nav-item nav-link">Layanan</a>
<a href="#" class="nav-item nav-link">Tentang</a>
<a href="#" class="nav-item nav-link">Kontak</a>
</div>
<div class="navbar-nav ml-auto">
<a href="#" class="nav-item nav-link">Daftar</a>
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Belajar Membuat Website</h1>
<p class="lead"> Di dunia saat ini, internet adalah cara paling populer untuk berhubungan dengan orang-orang. Di <a href="https://mbahwpcom" target="_blank" rel="noopener"> mbahwp.com </a> Anda akan mempelajari teknologi pengembangan web yang penting bersama dengan contoh praktik kehidupan nyata, sehingga Anda dapat membuat memiliki situs web sendiri untuk terhubung dengan orang-orang di seluruh dunia.</p>
<p><a href="https://mbahwp.com" target="_blank" class="btn btn-success btn-lg" rel="noopener">Mulai sekarang</a></p>
</div>
<div class="row">
<div class="col-md-4">
<h2>HTML</h2>
<p> HTML adalah bahasa markup standar untuk menjelaskan struktur halaman web. Tutorial HTML kami akan membantu Anda memahami dasar-dasar bahasa HTML5 terbaru, sehingga Anda dapat membuat halaman web atau situs web Anda sendiri.</p>
<p><a href="https://mbahwp.com/category/coding/html/" target="_blank" class="btn btn-success" rel="noopener">Pelajari Selanjutnya »</a></p>
</div>
<div class="col-md-4">
<h2>CSS</h2>
<p>CSS digunakan untuk mendeskripsikan presentasi halaman web. CSS dapat menghemat banyak waktu dan tenaga. Tutorial CSS kami akan membantu Anda mempelajari dasar-dasar CSS3 terbaru, sehingga Anda dapat mengontrol gaya dan layout situs web Anda.</p>
<p><a href="https://mbahwp.com/category/coding/css/" target="_blank" class="btn btn-success" rel="noopener">Pelajari Selanjutnya »</a></p>
</div>
<div class="col-md-4">
<h2>Bootstrap</h2>
<p> Bootstrap adalah framework front-end yang Tangguh untuk pengembangan web yang lebih cepat dan lebih mudah. Tutorial Bootstrap kami akan membantu Anda mempelajari semua fitur framework Bootstrap 4 terbaru sehingga Anda dapat dengan mudah membuat situs web yang responsif.</p>
<p><a href="https://mbahwp.com/category/coding/bootstrap/" target="_blank" class="btn btn-success" rel="noopener">Pelajari Selanjutnya »</a></p>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-md-6">
<p>Copyright © 2021 Mbah WP</p>
</div>
<div class="col-md-6 text-md-right">
<a href="#" class="text-dark">Terms of Use</a>
<span class="text-muted mx-2">|</span>
<a href="#" class="text-dark">Privacy Policy</a>
</div>
</div>
</footer>
</div>
</body>
</html>
Kita telah menggunakan class utilitas margin seperti .mb-3, .ml-auto, mx-2 dll. Untuk menyesuaikan jarak antar elemen.
Sedangkan class .text-dark, .text-muted, .text-md-right adalah class utilitas teks untuk mengatur warna dan kesejajaran teks.
Kita akan mempelajarinya di tutorial selanjutnya.
Semoga tutorial ini bisa membantu Anda mempelajari cara membuat fixed layout di Bootstrap.
