Belajar Cara Membuat Layout Website dengan Bootstrap 4
Halo sobat kiwari pada tulisa kali ini saya akan membagikan sedikit ilmu tentang bagaimana caranya membuat layout sebuah website menggunakan Bootstrap 4. Apa sih Bootstrap 4 itu?
Jadi singkatnya Bootstrap 4 itu adalah sebuah framework CSS, yang membantu web designer mempercepat dalam pembuatan layout sebuah website. Karena Bootstrap 4 ini sudah hampir semua komponen design tersedia, mulai dari Layouting, Navbar, Grid, Kolom, Form, Slider dan lainnya.
Jika kalian menggunakan Bootstrap 4, kalian tidak usah khawatir lagi mengenai Mobile Responsive karene pada dasarnya ini sudah mendukung Responsive, sehingga tidak perlu repot-repot lagi kalian untuk mengatur media query Responsivenya.
Pada tulisan ini kita akan membuat layout website sederhana, tampilan berikut yang akan kita buat pada tulisan ini.
Pada gambar diatas kita membuat Navbar, Content Section, dan Sidebar Section sederhana menggunakan Grid Column dari Bootstrap 4. Pertama mari kita membuat Navbar yang berada di atas itu. Silahkan kalian copy paste kode HTML dibawah ini.
Bagaimana membuat layout website menggunakan Bootstrap 4? Sangat mudah bukan, kalian sekarang tidak perlu lagi khawatir soal Responsive karena sudah dihandle oleh Bootstrap 4.
Jadi singkatnya Bootstrap 4 itu adalah sebuah framework CSS, yang membantu web designer mempercepat dalam pembuatan layout sebuah website. Karena Bootstrap 4 ini sudah hampir semua komponen design tersedia, mulai dari Layouting, Navbar, Grid, Kolom, Form, Slider dan lainnya.
Jika kalian menggunakan Bootstrap 4, kalian tidak usah khawatir lagi mengenai Mobile Responsive karene pada dasarnya ini sudah mendukung Responsive, sehingga tidak perlu repot-repot lagi kalian untuk mengatur media query Responsivenya.
Pada tulisan ini kita akan membuat layout website sederhana, tampilan berikut yang akan kita buat pada tulisan ini.
Pada gambar diatas kita membuat Navbar, Content Section, dan Sidebar Section sederhana menggunakan Grid Column dari Bootstrap 4. Pertama mari kita membuat Navbar yang berada di atas itu. Silahkan kalian copy paste kode HTML dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Kelaskiwari</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Tentang</a>
<a class="nav-item nav-link" href="#">Kontak</a>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
<div class="container-fluid mt-3">
<div class="row">
<div class="col-md-8">
<div class="bg-secondary p-3">
<h4>Aku Berisi Konten</h4>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo corrupti, cum quisquam aut fuga temporibus et, consectetur laudantium odio perspiciatis, adipisci aliquam dolor voluptatibus saepe ipsam esse officiis? Sint, placeat?</p>
</div>
</div>
<div class="col-md-4">
<div class="bg-secondary p-3">
<h4>Aku Sidebar</h4>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo corrupti, cum quisquam aut fuga?</p>
</div>
</div>
</div>
</div>Bagaimana membuat layout website menggunakan Bootstrap 4? Sangat mudah bukan, kalian sekarang tidak perlu lagi khawatir soal Responsive karena sudah dihandle oleh Bootstrap 4.
Belum ada Komentar untuk "Belajar Cara Membuat Layout Website dengan Bootstrap 4"
Posting Komentar