Membuat Fixed Layout dengan Bootstrap
Dengan Bootstrap 4 kalian masih dapat membuat layout halaman web berdasarkan jumlah piksel tetap, namun lebar kontainer bervariasi tergantung pada lebar viewport dan layout responsifnya juga.
Proses menciptakan fixed layout namun responsif pada dasarnya dimulai dengan kelas .container. Setelah itu kalian dapat membuat baris dengan kelas .row untuk wrap grup kolom horizontal. Baris harus ditempatkan di dalam .container untuk alignment dan padding yang tepat.
Kolom lebih lanjut dapat dibuat di dalam baris menggunakan grid class yang telah ditentukan sebelumnya seperti .col-*, .col-sm-*, .col-md-*, .col-lg-* dan .col-xl-* di mana * mewakili nomor grid dan harus dari 1 hingga 12. Silakan periksa tutorial Bootstrap grid system untuk mempelajari lebih lanjut tentang grid class.
Catatan: Konten aktual seperti teks, gambar, video, tabel, dll. Harus ditempatkan dalam kolom, dan hanya kolom yang merupakan anak-anak langsung dari baris (turunannya).
Contoh berikut membuat fixed width responsive layout yaitu 720px piksel lebar pada perangkat menengah yang memiliki lebar layar lebih besar atau sama dengan 768px seperti tablet, sedangkan lebar 960px pada perangkat besar memiliki lebar layar lebih besar dari atau sama dengan 992px seperti laptop kecil, dan 1140px lebar pada perangkat ekstra besar yang memiliki lebar layar lebih besar dari atau sama dengan 1200px seperti desktop.
Namun, jika lebar viewport perangkat kurang dari 768px tetapi lebih besar dari atau sama dengan 576px layout akan menjadi lebar 540px. Untuk lebar viewport kurang dari 576px layout akan mencakup lebar 100%. Juga, kolom akan ditumpuk secara vertikal navbar akan diciutkan dalam kedua kasus tersebut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Fixed Layout Example</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.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 Republic</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">Home</a>
<a href="#" class="nav-item nav-link">Services</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link">Contact</a>
</div>
<div class="navbar-nav ml-auto">
<a href="#" class="nav-item nav-link">Register</a>
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Learn to Create Websites</h1>
<p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="https://www.tutorialrepublic.com" target="_blank">tutorialrepublic.com</a> you will learn the essential web development technologies along with real life practice examples, so that you can create your own website to connect with the people around the world.</p>
<p><a href="https://www.tutorialrepublic.com" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
</div>
<div class="row">
<div class="col-md-4">
<h2>HTML</h2>
<p>HTML is the standard markup language for describing the structure of the web pages. Our HTML tutorials will help you to understand the basics of latest HTML5 language, so that you can create your own web pages or website.</p>
<p><a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-4">
<h2>CSS</h2>
<p>CSS is used for describing the presentation of web pages. CSS can save a lot of time and effort. Our CSS tutorials will help you to learn the essentials of latest CSS3, so that you can control the style and layout of your website.</p>
<p><a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-4">
<h2>Bootstrap</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development. Our Bootstrap tutorials will help you to learn all the features of latest Bootstrap 4 framework so that you can easily create responsive websites.</p>
<p><a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-md-6">
<p>Copyright © 2019 Tutorial Republic</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>
Output dari contoh di atas akan terlihat seperti ini:
Kita telah menggunakan kelas margin utility seperti .mb-3, .ml-auto, mx-2 dll untuk menyesuaikan jarak antar elemen. Sedangkan kelas .text-dark, .text-mute, .text-md-right adalah kelas utilitas teks untuk menyesuaikan warna dan alignment teks. kalian akan mempelajarinya di bab-bab selanjutnya.
