Tutorial Bootstrap : Membuat Responsive Layout Dengan Bootstrap 3

0 Comments


Di tulisan sebelumnya, saya menulis tentang bagaimana membuat / meng-customize link menjadi tombol dengan bootstrap 3. Nah, di tulisan kali ini saya ingin share lagi tentang bagaimana membuat layout web khususnya responsive web design / layout.

Membuat Responsive Web Design Dengan Bootstrap 3

Nah, pertama kita bahas tentang responsive layout itu sendiri. Yaitu sebuah cara mendesain web agar mempunyai aksesibilitas yang lebih baik serta tampil optimal pada berbagai macam perangkat yang dimiliki oleh user. Responive layout sangat membantu dalam hal pengoptimalan website pada perangkat-perangkat berlayar kecil semisal smartphone maupun tablet. Tapi, dengan desain responsive kita juga tidak mengesampingkan tampilan di layar yang lebih besar seperti laptop atau PC.

Responsive Web Design Dengan Bootstrap
Ilustrasi Responsive Web Desain


Berikut ini adalah salah satu contoh koding membuat desain web responsive dengan bootstrap.

Contoh Web Responsive Dengan Bootstrap


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Desain Web Responsive Dengan Bootstrap 3</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
    <!-- Tampilan Nama Web -->
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="sr-only">Navigasi</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Ayayank.com</a>
        </div>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="http://www.ayayank.com" target="_blank">Home</a></li>
                <li><a href="http://www.saranwisata.com" target="_blank">Sawi</a></li>
                <li><a href="http://www.ayayank.com/p/hubungi-ayayank.html" target="_blank">Kontak</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="container">
    <div class="jumbotron">
        <h1>Belajar Membuat Website</h1>
        <p>Internet adalah cara paling efektif untuk berbagi dan menyebarluaskan ilmu.  Di <a href="http://www.ayayank.com" target="_blank">ayayank.com</a> anda bisa menemukan artikel-artikel menarik seputar pemrograman dasar juga contoh-contoh pemrograman web dengan PHP, HTML, CSS, Javascript dan framework seperti Bootstrap</p>
        <p><a href="http://www.ayayank.com.com" target="_blank" class="btn btn-success btn-lg">Selengkapnya..</a></p>
    </div>
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-2">
            <h2>HTML</h2>
            <p>HTML adalah bahasa pemrograman dasar untuk membuat sebuah website.  HTML wajib dipelajari jika anda ingin belajar web, baik itu desain web ataupun pemrograman web secara menyeluruh</p>
            <p><a href="http://www.ayayank.com/" target="_blank" class="btn btn-success">Selengkapnya &raquo;</a></p>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-2">
            <h2>CSS</h2>
            <p>CSS adalah salah satu cara untuk meng-kostumasi tampilan web agar tak terkesan monoton sehingga menarik bagi pembaca dan pengunjung website kita. Sebagai seorang desainer web, CSS wajib dipelajari dan dikuasai.</p>
            <p><a href="http://www.ayayank.com" target="_blank" class="btn btn-success">Selengkapnya &raquo;</a></p>
        </div>
        <div class="clearfix visible-sm-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-2">
            <h2>Bootstrap</h2>
            <p>Bootstrap adalah sebuah framework siap pakai yang terdiri dari kumpulan styling CSS, fungsi Javascript, dan Jquery.  Anda dapat mendesain website dengan lebih terorganisir dan mudah menggunakan framework Bootstrap.  Bootstrap memberikan kemudahan desain, dengan upaya yang lebih sedikit karena memiliki banyak fungsi umum yang siap pakai untuk desain web anda.</p>
            <p><a href="http://www.ayayank.com/" target="_blank" class="btn btn-success">Seengkapnya &raquo;</a></p>
        </div>
        <div class="clearfix visible-md-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-2">
            <h2>Lain-lain</h2>
            <p>Temukan Pula banyak informasi bermanfaat lainnya di Ayayank.com, Anda juga dapat berbagi dan berpartisipasi dalam kolom komentar yang disediakan.</p>
            <p><a href="http://www.ayayan.com" target="_blank" class="btn btn-success">Selengkapnya &raquo;</a></p>
        </div>
        <div class="clearfix visible-sm-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-2">
            <h2>Contoh Program</h2>
            <p>Silakan pelajari contoh-contoh program yang dijelaskan dalam blog ini.  Anda tinggal memperhatikan dan mempraktekan agar kemampuan dalam pemrograman meningkat</p>
            <p><a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Selengkapnya &raquo;</a></p>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-2">
            <h2>Referensi</h2>
            <p>Semoga ayayank.com bisa menjadi referensi bagi kawan-kawan yang senang dengan pemrograman ataupun ingin belajar tentang web dan programming.</p>
            <p><a href="http://www.ayayank.com" target="_blank" class="btn btn-success">Kunjungi Ayayank &raquo;</a></p>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-sm-12">
            <footer>
                <p>© Ayayank.com </p>
            </footer>
        </div>
    </div>
</div>
</body>
</html>

Dan hasil tampilan yang akan diperoleh adalah sbb :

Membuat Responsive Web Desain Dengan Bootstrap 3
Tampilan di Desktop PC

Membuat Responsive Web Desain Dengan Bootstrap 3
Tampilan di Tablet

Membuat Responsive Web Desain Dengan Bootstrap 3
Tampilan di Smartphone

Nah, silakan teman-teman coba sendiri dengan mengotak-atik kode di atas. Dengan bantuan Bootstrap 3, kita bisa membuat tampilan website yang eye catchy, jadi pengunjung pun akan betah berlama-lama di website yang kita buat.

Selamat mencoba, semoga bermanfaat.

Baca Juga : Membuat Tombol Dengan Bootstrap

Baca Tulisan Lainnya Juga :)

0 komentar: