Membuat Timeline Sederhana dengan Bootstrap Bagian 1

Bootstrap 3 adalah salah satu contoh sukses pengembangan framework untuk membuat website responsive. Bagi kalian yang ingin belajar berbagai macam tutorial bootstrap bisa kunjungi kategori bootstrap di dumetschool di link berikut Bootstrap DUMET School. Banyak sekali tips dan trik yang bisa kalian gunakan ketika menggunakan bootstrap. Pada artikel kali ini kita akan menambahkan satu lagi trik yang bisa kita gunakan untuk menambah wawasan kalian tentang bagaimana cara melakukan kustomisasi bootstrap dengan benar.

Pada saat ini kita akan membuat sebuah layout responsive menggunakan bootstrap, layout kali ini adalah layout timeline, jika kalian belum tahu , layout timeline adalah layout yang dibuat untuk menjelaskan tentang urutan aktivitas yang dilakukan oleh pengguna yang sengaja dibuat menarik dan interaktif.

Baiklah, disini kita harus sudah menghubungkan file bootstrap ke dalam html yang kita miliki dengan kode berikut

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="  crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

Selanjutnya kita buat sebuah struktur HTML sebagai layout dasar timeline dengan baris kode berikut

<div class="container">
    <div class="row">
        <div class="col-sm-6 title">
            <h1>Timeline Layout<br><small>Bootstrap 3</small></h1>
        </div>
        <div class="col-sm-6">
            <div class="timeline">
                <div class="line text-muted"></div>
                <div class="separator text-muted">
                    <time>23. 10. 2017</time>
                </div>
                <article class="panel panel-danger panel-outline">
                    <div class="panel-heading icon">
                        <i class="glyphicon glyphicon-heart"></i>
                    </div>
                    <div class="panel-body">
                        <strong>Andi</strong> Mulai Kursus di DUMET School.
                    </div>
                </article>
                <article class="panel panel-primary">
                    <div class="panel-heading icon">
                        <i class="glyphicon glyphicon-plus"></i>
                    </div>
                    <div class="panel-heading">
                        <h2 class="panel-title">Mengambil kursus</h2>
                    </div>
                    <div class="panel-body">
                        Web Master.
                    </div>
                    <div class="panel-body">
                        Graphic Design
                    </div>
                    <div class="panel-body">
                        Digital Marketing
                    </div>
                </article>
                <article class="panel panel-default panel-outline">
                    <div class="panel-heading icon">
                        <i class="glyphicon glyphicon-picture"></i>
                    </div>
                    <div class="panel-body">
                        <img class="img-responsive img-rounded" src="http://placehold.it/350x150" />
                    </div>
                </article>
                <div class="separator text-muted">
                    <time>22. 10. 2017</time>
                </div>
                <article class="panel panel-success">
                    <div class="panel-heading icon">
                        <i class="glyphicon glyphicon-plus"></i>
                    </div>
                    <div class="panel-heading">
                        <h2 class="panel-title">Aktivitas sebelumnya</h2>
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item">Poin Aktivitas 1</li>
                        <li class="list-group-item">Poin aktivitas 2</li>
                    </ul>
                </article>
                <article class="panel panel-info panel-outline">
                    <div class="panel-heading icon">
                        <i class="glyphicon glyphicon-info-sign"></i>
                    </div>
                    <div class="panel-body">
                        Info
                    </div>
                </article>
            </div>
        </div>
    </div>
</div>

Pada baris kode diatas kita memanfaatkan struktur panel yang sudah disediakan bootstrap untuk menata layout konten setiap item timeline nya.

Sekarang coba kalian lihat pada browser kalian.. maka hasilnya akan seperti ini

Kita akan lanjutkan penulisan CSS dan masing-masing fungsinya pada artikel selanjutnya. Demikian artikel tentang cara membuat timeline sederhana dengan bootstrap bagian pertama, semoga bermanfaat.

 

25 Oktober 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Seminar Java April 2024 di DUMET School
chat