Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar Bootstrap Bagian 4 : Cara Membuat Fluid Layout, selanjutnya kita akan mempelajari cara membuat responsive layout di Bootstrap.
Apa itu Desain Web Responsif
Desain web responsive adalah proses merancang dan membangun web untuk memberikan aksesibilitas yang lebih baik dan pengalaman pengunjung yang optimal bagi pengguna dengan mengoptimalkannya untuk perangkat yang berbeda.
Dengan meningkatnya penggunaan ponsel pintar dan tablet, pengoptimalan situs untuk perangkat seluler hampir tidak dapat dihindari.
Desain web yang responsive adalah alternatif yang lebih disukai dan cara yang efisien untuk menargetkan berbagai perangkat dengan sedikit usaha.
Layout responsive secara otomatis menyesuaikan tampilan dengan ukuran layar perangkat apa pun, baik itu desktop, laptop, tablet, atau ponsel.
Lihat Ilustrasi berikut.
Membuat Layout Responsive dengan Bootstrap
Dengan Bootstrap 4 sistem web flexbox, kita dapat membuat web dan aplikasi yang responsive dan ramah seluler menjadi jauh lebih mudah.
Class grid lima tingkatnya memberikan kontrol yang lebih baik atas tata letak serta bagaimana itu akan ditampilkan pada berbagai jenis perangkat seperti ponsel, tablet, laptop dan desktop, perangkat layar besar, dan sebagainya.
Contoh berikut, kita akan membuat layout responsif yang dirender sebagai layout 4 kolom di perangkat ekstra besar (viewport ≥ 1200px), dan layout 3 kolom di perangkat besar (992px ≤ viewport <1200px), sedangkan layout 2 kolom di perangkat sedang (768px ≤ viewport <992px), dan layout 1 kolom di perangkat kecil dan ekstra-kecil (viewport <768px).
Mari kita lihat cara kerjanya:
<!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 Responsive 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-fluid">
<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-6 col-lg-4 col-xl-3">
<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-6 col-lg-4 col-xl-3">
<h2>CSS</h2>
<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 tata letak 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-6 col-lg-4 col-xl-3">
<h2>JavaScript</h2>
<p> JavaScript adalah bahasa sisi klien yang paling populer dan banyak digunakan. Tutorial JavaScript kami akan memberikan pengetahuan mendalam tentang JavaScript termasuk fitur ES6, sehingga Anda dapat membuat situs web interaktif.</p>
<p><a href="#" target="_blank" class="btn btn-success" rel="noopener">Pelajari Selanjutnya »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<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 class="col-md-6 col-lg-4 col-xl-3">
<h2>PHP</h2>
<p>PHP adalah bahasa skrip sisi server paling populer untuk membuat halaman web dinamis. Tutorial PHP kami akan membantu Anda mempelajari semua fitur bahasa skrip PHP7 terbaru sehingga Anda dapat dengan mudah membuat situs web dinamis.</p>
<p><a href="#" target="_blank" class="btn btn-success" rel="noopener">Palajari Selanjutnya »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>SQL</h2>
<p>SQL adalah bahasa standar yang dirancang untuk mengelola data dalam sistem manajemen basis data relasional. Tutorial SQL kami akan membantu Anda mempelajari dasar-dasar bahasa SQL sehingga Anda dapat mengelola database secara efisien.</p>
<p><a href="#" target="_blank" class="btn btn-success" rel="noopener">Pelajari Selanjutnya »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>Referensi</h2>
<p>Bagian referensi kami menguraikan semua tag HTML5 standar dan properti CSS3 bersama dengan referensi berguna lainnya seperti nama dan nilai warna, entitas karakter, font aman web, kode bahasa, pesan HTTP, dan banyak lagi..</p>
<p><a href="#" target="_blank" class="btn btn-success" rel="noopener">Pelajari Selanjutnya »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>FAQ</h2>
<p> Bagian Pertanyaan yang Sering Diajukan (FAQ) kami adalah kumpulan luas FAQ yang memberikan solusi cepat dan berfungsi dari pertanyaan dan pertanyaan umum terkait desain dan pengembangan web dengan demo langsung.</p>
<p><a href="#" 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>
Semoga tutorial ini bisa membantu Anda mempelajari bagamana cara membuat layout responsive di Bootstrap.
