#3 Membuat JUMBOTRON dengan Bootstrap
Langkah-langkah membuat Jumbotron menggunakan Bootstrap
Jumbotron adalah sebuah komponen website yang disediakan oleh bootstrap untuk menampilkan informasi utama atau informasi awal dari sebuah website, bisa berbentuk gambar, pengumuman atau informasi lainnya yang berkaitan dengan website yang anda buat.
contohnya gambar diatas adalah sebuah jumbotron
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body id="page-top">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="mainNav">
<div class="container"> <a class="navbar-brand" href="#">Kampus Digital Masa Gitu</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#daftar">DAFTAR <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#download">DOWNLOAD</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
TUTORIAL
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">BOOTSTRAP</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">CODE IGNITER</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">LARAVEL</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigge" href="#artikel">ARTIKEL</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigge" href="#hubungikami">HUBUNGI KAMI</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
sebelumnya kunjungi di Getbootsrap.com dan klik Documentation ketikan Jumbotron
pilih sesuai selera saja ya
dan copy skripnya dan tempatkan dibawah navbar
<div class="jumbotron"> <h1 class="display-4">Hello, world!</h1> <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <hr class="my-4"> <p>It uses utility classes for typography and spacing to space content out within the larger container.</p> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </div>
Setalah selesai kita akan memperindah tampilan dengan tambahan CSS,
buat file dengan nama Style.css
buat file dengan nama Style.css
dan hubungkan CSS pada Halaman Index.html dan masukan di TITLE
<link rel="stylesheet" type="text/css" href="style.css">
Modifikasi tampilan Jumbotron agar tulisan jumbotron tidak terlalu mepet dengan margin dengan cara memasukan tag h1 pada jumbotron kedalam sebuah container
<div class="jumbotron"> <div class="container"> <h1 class="display-4">Roni Andarsyah</h1> <p class="lead">Lecture Series untuk belajar pemrograman website menggunakan Bootstrap.</p> <hr class="my-4"> <p>Kumpulan Program Tri Dharma Perguruan Tinggi.</p> <a class="btn btn-primary btn-lg" href="#" role="button">baca selengkapnya</a> </div> </div>
 |
| Hasil Editing Jumbotron sederhana |
Selanjutnya kita akan ganti background menggunakan gambar caranya dengan memasukan class .Jumbotron pada style.css
Jika gambar dirasa terlalu besar maka tambahkan background-sizenya menjadi cover supaya Full
Style.css
.jumbotron {
background-image: url(images/jumbotron/Slider1.jpg);
background-size: cover;
height: 770px;
text-align: center;
}
Selanjutnya kita akan mengganti warna tulisan dengan cara memamnggil class jumbotron dan panggil class yang akan diganti warnanya
.jumbotron {
background-image: url(images/jumbotron/Slider2.jpg);
background-size: cover;
height: 770px;
text-align: center;
}
.jumbotron .display-4{
color: white;
}
.jumbotron .lead {
color: white;
}
.jumbotron p {
color: white;
}
Untuk menaikan background jumbotron tambahkan margin-top: -120px; dan tulisan akan naik keatas
kemudian agar membuat Menu/Navbar menjadi transparan dengan merubah pada html
<nav class="navbar navbar-expand-lg navbar-light bg-transparan fixed-top" id="mainNav">
selanjutnya membuat Nav-Brand menjadi Bold dengan cara font-weight-bold text-white dan
Untuk merubah tulisan/text menjadi putih ketikan text-white
<div class="container"> <a class="navbar-brand font-weight-bold text-white" href="#page-top">Kampus Digital Masa Gitu</a
Copy kesemua menu yang akan dijadikan Warna Putih
Selanjutnya kembali ke Style.css
.jumbotron .display-4{
color: white;
margin-top: 200px;
}
Agar tulisan berubah menjadi bold dengan cara menambahkan <Span> dan buat Class pada span
<span class="font-weight-bold">
div class="jumbotron">
<div class="container">
<h1 class="display-4">RONI ANDARSYAH <br> <span class="font-weight-bold">LECTURE SERIES FOR WEBSITE</span></h1>
<hr class="my-4">
<p>Kumpulan Program Tri Dharma Perguruan Tinggi.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">baca selengkapnya</a>
</div>
</div>
<p class="lead">Kumpulan Program Tri Dharma Perguruan Tinggi.</p>
Untuk membuat tulisan menjadi lebih tipis tambahkan Class="Lead"
hasil menjadi
hasil menjadi
diantara tulisan Lecture Series dan Kumpulan Tri Dharma ada Garis <hr class="my-4">
caranya kita buka style.css dan tambahkan skrip dibawah ini pada Style
.jumbotron .btn{
background-color: #F05f40;
border:none;
border-radius: 25px;
padding-right: 25px;
padding-left: 25px;
margin-top: 40px;
}
Hasilnya seperti ini
