Membuat Template Website Menggunakan Bootstrap. – Desain template website adalah pola layout dari sebuah website yang ingin didesain & disiapkan dengan berbagai fitur di dalamnya. Template website merupakan komponen dasar dari suatu sistem template website yang memisahkan antara bagian konten dengan bagian presentasi dari suatu desain web.
Baca Juga: Seberapa Penting Frontend dalam Sebuah Website.
Kali ini kita akan membuat sebuah template website sederhana menggunakan Bootstrap. Nah jika kalian sedang mencari artikel ini berarti udah tau dong apa itu website, apa itu responsive dan apa itu bootstrap.
Membuat Template Website Menggunakan Bootstrap
Sebelum mulai membuat template tentunya kita harus memikirkan bagaimana template ini nantinya, kerangka seperti apa yang akan kita pakai? Kali ini saya akan membuat template dengan tata letak seperti ini,
Tata Letak Template Website
Persiapan Membuat Template Sederhana Menggunakan Bootstrap
Beberapa yang harus kita siapkan adalah:
- Bootstrap. (Baca juga: Pengertian dan Cara Menggunakan Bootstrap).
- File gambar. Gambar yang akan kita panggil ke template nantinya.
Mulai Membuat Template
Sekarang kita mulai membuat template nya,
<!DOCTYPE html>
<html>
<head>
<title>Membuat Template Website Menggunakan Bootstrap | www.malasngoding.com</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Header -->
<img class="img-fluid mx-auto d-block" src="assets/images/logo.png" style="height: 200px;">
<!-- Navigation -->
<nav class="navbar navbar-light bg-light justify-content-between"> <a class="navbar-brand">Navbar</a>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
</div>
</div>
</div>
<div class="container mt-3">
<div class="row">
<!-- Sidebar -->
<div class="col-md-4">
<div class="card mb-3">
<div class="card-header">
<h4 class="text-mono text-center">codelatte.id</h4>
</div>
<div class="card-body">
<img src="assets/images/logosidebar.png" style="height: 110px;" class="mx-auto d-block">
<br />
<blockquote class="card-blockquote">
<p class="text-center">Membuat Template Website Menggunakan Bootstrap</p>
</blockquote>
</div>
</div>
<div class="card mb-3">
<div class="card-header">
<h4 class="text-mono text-center">codelatte.id</h4>
</div>
<div class="card-body">
<img src="assets/images/logosidebar.png" style="height: 110px;" class="mx-auto d-block">
<br />
<blockquote class="card-blockquote">
<p class="text-center">Membuat Template Website Menggunakan Bootstrap</p>
</blockquote>
</div>
</div>
</div>
<!-- Isi Content -->
<div class="col-md-8 mb-3">
<div class="card">
<div class="card-header">
<h4 class="text-mono text-center">News</h4>
</div>
<div class="card-body">
<img style="float:left;" src="https://place-hold.it/130x130" class="img mr-3" />
<h5 class="card-title">News Article 1</h5>
<small><p>19/07/2018</p></small>
<p class="card-text">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 nisi ut aliquip ex ea commodo consequat. <a href="article.html">Read More</a>
</p>
<img style="float:left;" src="https://place-hold.it/130x130" class="img mr-3" />
<h5 class="card-title">News Article 2</h5>
<small><p>19/07/2018</p></small>
<p class="card-text">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 nisi ut aliquip ex ea commodo consequat. <a href="article.html">Read More</a>
</p>
<img style="float:left;" src="https://place-hold.it/130x130" class="img mr-3" />
<h5 class="card-title">News Article 3</h5>
<small><p>19/07/2018</p></small>
<p class="card-text">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 nisi ut aliquip ex ea commodo consequat. <a href="article.html">Read More</a>
</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="text-md-center">© Copyright 2018 - Made <a href="https://codelatte.id/">Codelatte Indonesia</a>. All rights reserved.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Demo : arc.codelatte.id/templates/template-sederhana.
Lalu jalankan pada browser kalian dan template telah jadi! Apabila masih kurang paham bisa bertanya pada kolom komentar dibawah. Semoga bermanfaat dan sampai jumpa pada artikel selanjutnya!
Yang kaya gini yg ane cari,simpel dan juga detail
Terima kasih untuk info membuat template websitenya sangat membantu saya
Sangat Membantu