Template Web Responsive dengan Bootstrap
Pada kesempatan kali ini saya akan membagikan cara membuat tampilan web sederhana dengan tema blog menggunakan bootstrap.
Sebelum kita lanjutkan perlu kalian pahami terlebih dahulu sistem grid pada bootstrap.
Bootstrap membagi halaman grid menjadi 12 grid/kolom
Apabila kita ingin membuat dengan span1 maka kita perlu membuat sebanyak 12, atau jika kita ingin membuat dengan span2 maka kita membutuhkan 6 grid/kolom untuk memenuhi seluruh layar, begitu seterusnya.
Untuk penjelasan lebih jelasnya silakan baca pada artikel:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Template Web Responsive dengan Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="index.html">
<img src="gambar/logo.png" alt="logo" style="width:200px;">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Pemrograman</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Database</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Framework</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lainnya</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Belajar Programming Itu Mudah</h1>
<p>Tingkatkan skill programming kamu belajar tutorial pemrograman gratis!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="thumbnail">
<a href="artikel.html"><img src="gambar/HTML_&_CSS.png" width="100%" alt="Cinque Terre"></a>
<div class="caption">
<h3>Belajar HTML & CSS</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris</p>
<p><a href="artikel.html" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<a href="artikel.html"><img src="gambar/Programming.png" width="100%" alt="Cinque Terre"></a>
<div class="caption">
<h3><a href="artikel.html" style="text-decoration:none;color: black;">Web Programming</a> </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris</p>
<p><a href="artikel.html" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<a href="artikel.html"><img src="gambar/Python.png" width="100%" alt="Cinque Terre"></a>
<div class="caption">
<h3>Belajar Python</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris</p>
<p><a href="artikel.html" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<a href="artikel.html"><img src="gambar/Desain_UI_&_UX.png" width="100%" alt="Cinque Terre"></a>
<div class="caption">
<h3>Desain UI & UX</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris</p>
<p><a href="artikel.html" class="btn btn-light btn-block " role="button">Selengkapnya</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Copyright 2020 kelasprogrammer.com</p>
</div>
</body>
</html>Halaman index.html akan menjadi halaman utama saat web di jalankan di browser.
Tampilan nya akan seperti berikut:
Tampilan nya akan seperti berikut:
Kalian bisa modifikasi untuk logo dan daftar menu pada bagian header serta bagian konten juga bisa kalian sesuaikan dengan konten yang kalian miliki.
Saat jendela browser saya perkecil sesuai dengan ukuran layar smartphone maka tampilan layout akan menyesuaikan dengan kebutuhan layar perangkat.
Membuat Halaman artikel.html
Selanjutnya buatlah sebuah file baru dengan nama artikel.html.
Halaman ini berfungsi untuk menampilkan detail isi artikel dari konten website kalian.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Artikel - Template Web Responsive dengan Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="index.html">
<img src="gambar/logo.png" alt="logo" style="width:200px;">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Pemrograman</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Database</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Framework</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lainnya</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Belajar HTML & CSS</h1>
<p>Tingkatkan skill programming kamu belajar tutorial pemrograman gratis!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="thumbnail">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item"><a href="#">Pemrograman</a></li>
<li class="breadcrumb-item active" aria-current="page">Belajar HTML & CSS</li>
</ol>
</nav>
<img src="gambar/HTML_&_CSS.png" width="100%" alt="Cinque Terre">
<div class="caption">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris</p>
<hr>
</div>
<div class="comment">
<label><h2>Leave a coment</h2></label>
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label>Email:</label>
<input type="email" class="form-control" id="pwd">
</div>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" class="btn btn-info" value="Kirim Komentar">
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<div class="caption">
<h4>Web Programming</h4>
<div class="row">
<div class="col-xl-3">
<img src="gambar/Programming.png" width="100%" alt="Cinque Terre">
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipisgna aliqua. adipisgna aliqua</p>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="caption">
<h4>Belajar HTML & CSS</h4>
<div class="row">
<div class="col-xl-3">
<img src="gambar/HTML_&_CSS.png" width="100%" alt="Cinque Terre">
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipisgna aliqua. adipisgna aliqua</p>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="caption">
<h4>Desain UI & UX</h4>
<div class="row">
<div class="col-xl-3">
<img src="gambar/Desain_UI_&_UX.png" width="100%" alt="Cinque Terre">
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipisgna aliqua. adipisgna aliqua</p>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="caption">
<h4>Belajar Python</h4>
<div class="row">
<div class="col-xl-3">
<img src="gambar/Python.png" width="100%"alt="Cinque Terre">
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipisgna aliqua. adipisgna aliqua</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<img src="gambar/iklan.png" width="100%"alt="Cinque Terre">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Copyright 2020 kelasprogrammer.com</p>
</div>
</body>
</html>Hasil tampilan nya seperti gambar berikut:
Saya membuat template web blog responsive dengan bootstrap ini hanya sebagai contoh buat teman-teman boleh belajar dan menjadi acuan referensi untuk kalian kembangkan sesuai dengan project web yang ingin kalian buat.
Saya menyadari masih banyak kekurangan dari tampilan web yang saya buat ini. Semoga kalian bisa mengembangkannya lebih bagus lagi.
Membuat Template Web Responsive Dengan Bootstrap
Reviewed by bestitalic
on
Februari 16, 2021
Rating:
Reviewed by bestitalic
on
Februari 16, 2021
Rating:
Tidak ada komentar: