3. Template Web

Selain kita dapat membuat template web responsive menggunakan html dan css, kita juga bisa membuatnya melalui bootstrap. Buat kalian desainer web pasti sudah tidak asing lagi mengenai framework css ini.

Bootstrap merupakan kerangka kerja (framework) yang di khususkan untuk menangani terkait tampilan halaman web. Sejak di rilisnya versi ke 2 dan ke 3 tahun 2012-2013 bootstrap mengalami banyak pembarahuan dan sangat di minati oleh front end developer.

Penggunaannya yang sangat mudah membuat framework ini banyak di minati, apalagi untuk seorang full stack developer yang tidak begitu menguasai sepenuhnya masalah desain dan tampilan web, framework ini sangat membantu untuk membuat template website responsive dengan mudah dan cepat.

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:

Apa saja yang perlu dipersiapkan?

Tentu saja kalian harus punya bootstrap nya terlebih dahulu, silakan kalian download di situs resminya.

Hingga artikel ini di publikasi bootstrap sudah berada di versi ke 4. Namun kalian juga masih bisa menggunakan versi sebelumnya (versi 3) karena masih sangat mempunih.

Untuk tutorial baca : cara menggunakan bootstrap 4

Setelah kalian unduh bootstrap, buat sebuah direktori baru lalu kemudian simpan hasil unduhan di folder tersebut.

Di dalam folder bootstrap terdapat 2 sub folder yaitu css dan js yang berisikan file-file css dan library javascript.

Buat juga folder gambar untuk menyimpan daftar gambar yang di perlukan pada template web responsive dengan bootstrap.

Membuat Halaman index.html

Selanjutnya buat sebuah file dengan nama index.html melalui teks editor :

<!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:

contoh halaman web sederhana bootstrap

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 layout responsive dengan bootstrap

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:

Contoh tampilan web blog dengan bootstrap

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.

Download Source Code

Silahkan buat kalian yang ingin langsung memiliki source code nya kalian bisa download di bawah ini:

[sociallocker id=”5349″] [/sociallocker]

Artikel Terkait