Friday, December 16, 2016

Belajar Bootstrap Part 5 : Membuat Jumbotron Dengan Bootstrap

Penulis INero Diterbitkan 6:13 PM

MEMBUAT JUMBOTRON DENGAN BOOTSTRAP
Jumbotron merupakan semacam bentuk untuk tujuan pengumuman, Konten khusus atau informasi tentang halaman website. Biasanya jumbotron digunakan untuk halaman depan website. Secara default Bootstrap memiliki tampilan jumbotron berwarna abu - abu dan memiliki sisi bulat pada setiap sisi pojoknya. Jumbotron berisi text yang dapat sobat costumize sendiri sesuai keinginan sobat.

Hampir seluruh design template website sekarang ini rata-rata semua menggunakan jumbotron untuk memberi informasi tentang halaman website pada halaman depannya. jumbotron bootstrap juga dapat sobat modifikasi sendiri dengan menambahkan css anda sendiri dan dapat anda design sesuai dengan keinginan anda. tetapi pada contoh kali ini tentang membuat jumbotron dengan bootstrap kita hanya akan menggunakan atau membuat jumbotron bootstrap dengan gaya standar dari bootstrap sendiri.

<!DOCTYPE html>
<html>
<head>
    <title>Part 5 : Mmbuat jombrotan dengan Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
    <div class="container">
        <div class="jumbotron">
        <h1>PENGUMUMAN</h1>
        <p>
        Besok hari senin libur<br>
        Dikarenakan seluruh guru mengadakan arisan<br>
        Libur mulai tanggal 10 Januari - 10 Desember <br>
        </p>
        <p>
        <button class="btn btn-lg btn-danger">Mantab</button>
        <button class="btn btn-lg btn-success">Banget</button>
    </p>
    </div>
    </div>
</body>
</html>

KESIMPULAN
Untuk merubah tampilan jumbotron menjadi penuh sobat dapat mengganti class "container" menjadi "container-fluid" . Saya kira untuk membuat jumbotron dengan Bootsrap cukup mudah yaitu dengan memberikan class "jumbotron" dan kita tinggal mengisi isi dari jumbotron tersebut. Cukup sekian terima Kasih

REFERENSI : Malas Ngoding

TUTORIAL BOOTSTRAP DASAR LAINYA :