Bootstrap : Membuat Template Sederhana Menggunakan Bootstrap
Assalamu'alaikum Wr.Wb
Salam Dan Bahagia
Pendahuluan
Pada kali ini saya akan membagikan sedikit tutorial yaitu bagaimana sih cara Membuat Template sederhana menggunakan Bootstrap, nah langsung saja dibaca dan dipahami.
Latar Belakang
Latar belakang saya membuat template sederhana menggunakan bootsrap ini adalah, pembuatan lebih cepat dan sudah memiliki fitur responsive.
Maksud Dan tujuan
Membuat template sederhana yaitu galery Foto.
Alat dan bahan
laptop.
teks Editor.
Browser.
Jangka Waktu yang dibutuhkan
2 jam
Pembahasan atau langkah Kerja
Oke sebelum memulai pastikan kalian sudah memiliki teks Editor, nah disini saya menggunakan teks Editor Sublime Text
Setelah itu Buat Folder baru disini saya memberikan nama dengan nama "Bootstrap".
Oya Jangan lupa File Bootstrap Diletakkan pada folder Bootstrap.
Setelah itu buat file baru yang bernama index.php dan isikan Script Berikut :
Latar Belakang
Latar belakang saya membuat template sederhana menggunakan bootsrap ini adalah, pembuatan lebih cepat dan sudah memiliki fitur responsive.
Maksud Dan tujuan
Membuat template sederhana yaitu galery Foto.
Alat dan bahan
laptop.
teks Editor.
Browser.
Jangka Waktu yang dibutuhkan
2 jam
Pembahasan atau langkah Kerja
Oke sebelum memulai pastikan kalian sudah memiliki teks Editor, nah disini saya menggunakan teks Editor Sublime Text
Setelah itu Buat Folder baru disini saya memberikan nama dengan nama "Bootstrap".
Oya Jangan lupa File Bootstrap Diletakkan pada folder Bootstrap.
Setelah itu buat file baru yang bernama index.php dan isikan Script Berikut :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Home || ZaenFerdiansyah</title>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-light bg-dark">
<a class="navbar-brand" href="#">
<img src="img/LOG.png" width="30" height="30" class="d-inline-block align-top" alt="">
<i class="color">ZaenFerdiansyah</i>
</a>
</nav>
<!--Akhir Navbar-->
<!--Jumbotron--->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<center>
<h1 class="display-4">Galery Foto</h1>
<p class="lead">ZAenFerdiansyah || SMK TAMANSISWA MOJOAGUNG</p>
</center>
</div>
</div>
<!--Akhir Jumbotron--->
<div class="row">
<div class="col-sm-3">
<div class="col-sm-8">
<div class="card" style="width: 18rem;">
<img src="img/1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Ini Gunung</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eos animi tempora earum molestiae maxime unde, dolores provident eum. Excepturi reprehenderit mollitia nobis necessitatibus quam voluptatum, quia ipsum adipisci? Velit.</p>
<a href="#" class="btn btn-primary">Selengkapnya</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-8">
<div class="card" style="width: 18rem;">
<img src="img/1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Ini Gunung</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eos animi tempora earum molestiae maxime unde, dolores provident eum. Excepturi reprehenderit mollitia nobis necessitatibus quam voluptatum, quia ipsum adipisci? Velit.</p>
<a href="#" class="btn btn-primary">Selengkapnya</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-8">
<div class="card" style="width: 18rem;">
<img src="img/1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Ini Gunung</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eos animi tempora earum molestiae maxime unde, dolores provident eum. Excepturi reprehenderit mollitia nobis necessitatibus quam voluptatum, quia ipsum adipisci? Velit.</p>
<a href="#" class="btn btn-primary">Selengkapnya</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-8">
<div class="card" style="width: 18rem;">
<img src="img/1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Ini Gunung</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eos animi tempora earum molestiae maxime unde, dolores provident eum. Excepturi reprehenderit mollitia nobis necessitatibus quam voluptatum, quia ipsum adipisci? Velit.</p>
<a href="#" class="btn btn-primary">Selengkapnya</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Home || ZaenFerdiansyah</title>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-light bg-dark">
<a class="navbar-brand" href="#">
<img src="img/LOG.png" width="30" height="30" class="d-inline-block align-top" alt="">
<i class="color">ZaenFerdiansyah</i>
</a>
</nav>
<!--Akhir Navbar-->
<!--Jumbotron--->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<center>
<h1 class="display-4">Galery Foto</h1>
<p class="lead">ZAenFerdiansyah || SMK TAMANSISWA MOJOAGUNG</p>
</center>
</div>
</div>
<!--Akhir Jumbotron--->
<div class="row">
<div class="col-sm-3">
<div class="col-sm-8">
<div class="card" style="width: 18rem;">
<img src="img/1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Ini Gunung</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eos animi tempora earum molestiae maxime unde, dolores provident eum. Excepturi reprehenderit mollitia nobis necessitatibus quam voluptatum, quia ipsum adipisci? Velit.</p>
<a href="#" class="btn btn-primary">Selengkapnya</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-8">
<div class="card" style="width: 18rem;">
<img src="img/1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Ini Gunung</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eos animi tempora earum molestiae maxime unde, dolores provident eum. Excepturi reprehenderit mollitia nobis necessitatibus quam voluptatum, quia ipsum adipisci? Velit.</p>
<a href="#" class="btn btn-primary">Selengkapnya</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-8">
<div class="card" style="width: 18rem;">
<img src="img/1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Ini Gunung</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eos animi tempora earum molestiae maxime unde, dolores provident eum. Excepturi reprehenderit mollitia nobis necessitatibus quam voluptatum, quia ipsum adipisci? Velit.</p>
<a href="#" class="btn btn-primary">Selengkapnya</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-8">
<div class="card" style="width: 18rem;">
<img src="img/1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Ini Gunung</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eos animi tempora earum molestiae maxime unde, dolores provident eum. Excepturi reprehenderit mollitia nobis necessitatibus quam voluptatum, quia ipsum adipisci? Velit.</p>
<a href="#" class="btn btn-primary">Selengkapnya</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
Nah Setelah itu save dan lihat dibrowser, maka hasilnya akan seperti ini :
G. Kesimpulan
Nah Dengan kita coding menggunakan Bootstrap, maka pekerjaan akan cepat selesai, karena tidak perlu mengetikkan kode CSS lagi, melainkan hanya memanggil class yang sudah disediakan oleh Bootstrap.
Sekian yang dapat saya sampaikan, mohon maaf bila ada kesalahan dalam penulisan maupun tatabahasa, sekian dan terima kasih.
Wassalamu'alaikum Wr.Wb
Wassalamu'alaikum Wr.Wb
