Tutorial Bootstrap 3 Jumbotron
TikSonic - Komponen Bootstrap jumbotron menunjukkan sebuah kotak besar yang digunakan untuk menampilkan konten utama atau informasi pada halaman web, misalnya seperti seperti judul, deskripsi dan lain sebagainya sesuai keperluan.
Di dalam jumbotron hampir semua HTML yang valid termasuk komponen Bootstrap lainnya dapat dituliskan didalamnya.
Cara Penerapan Jumbotron
Untuk menerapkan bagaimana jumbotron dibuat, gunakan element
Gunakan elemen dan berikan class
.jumbotron sebagai class dasarnya, selengkapnya silahkan lihat contoh berikut :
<div class="jumbotron">
<h1>Tutorial Bootstrap Indonesia</h1>
<p>Panduan belajar bootstrap berbahasa indonesia</p>
<p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
</div>
Hasil :
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<title>Triksonic Demo Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CSS Bootstrap 3 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h1>Tutorial Bootstrap Indonesia</h1>
<p>Panduan belajar bootstrap berbahasa indonesia</p>
<p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
</div>
</div>
<div class="container">
<p>
Rubah lebar area preview untuk melihat area responsive.
</p>
</div>
</body>
</html>
Custom Jumbotron
Secara default bootstrap jumbotron ditampilkan sebagai kotak dengan warna latar abu-abu. Jika menginginkan tampilan yang berbeda pada Jumbotron dapat memberikan class tambahan pada class dasarnya, yang kemudian diatur melalui CSS.
Contoh :
<!-- CSS custom jumbotron-->
<style>
.jumbotron.night {
background-color: #333;
color: #eaeaea;
}
</style>
<!-- html -->
<div class="jumbotron night">
<h1>Tutorial Bootstrap Indonesia</h1>
<p>Panduan belajar bootstrap berbahasa indonesia</p>
<p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
</div>
Hasil :
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<title>Triksonic Demo Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CSS Bootstrap 3 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
<!-- custom jumbotron-->
<style>
.jumbotron.night {
background-color: #333;
color: #eaeaea;
}
</style>
</head>
<body>
<div class="jumbotron night">
<h1>Tutorial Bootstrap Indonesia</h1>
<p>Panduan belajar bootstrap berbahasa indonesia</p>
<p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
</div>
<!--note-->
<div class="container">
<p>
Rubah lebar area preview untuk melihat area responsive.
</p>
</div>
</body>
</html>
Mengatur Lebar Jumbotron 1 halaman penuh
Agar jumbotron memiliki lebar 1 halaman penuh area pandang dan tanpa adanya sudut membulat pada bagian ujungnya, Bungkus semua element yang ada didalam jumbotron dengan element
<div> dengan class .container letakkan pada element dengan posisi level 2.Contoh :
<!-- contoh 1 -->
<div class="jumbotron">
<div class="container"> <!-- level 2-->
<h1>Tutorial Bootstrap Indonesia</h1>
<p>Panduan belajar bootstrap berbahasa indonesia</p>
<p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
</div>
</div>
<!-- contoh 2 -->
<div class="jumbotron night">
<div class="container"> <!-- level 2-->
<h1>Tutorial Bootstrap Indonesia</h1>
<p>Panduan belajar bootstrap berbahasa indonesia</p>
<p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
</div>
</div>
Hasil :
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<title>Triksonic Demo Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CSS Bootstrap 3 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
<!-- custom jumbotron-->
<style>
.jumbotron.night {
background-color: #333;
color: #eaeaea;
}
</style>
</head>
<body>
<!-- contoh 1 -->
<div class="jumbotron">
<div class="container"> <!-- level 2-->
<h1>Tutorial Bootstrap Indonesia</h1>
<p>Panduan belajar bootstrap berbahasa indonesia</p>
<p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
</div>
</div>
<!-- contoh 2 -->
<div class="jumbotron night">
<div class="container"> <!-- level 2-->
<h1>Tutorial Bootstrap Indonesia</h1>
<p>Panduan belajar bootstrap berbahasa indonesia</p>
<p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
</div>
</div>
<!--note-->
<div class="container">
<p>
Rubah lebar area preview untuk melihat area responsive.
</p>
</div>
</body>
</html>
Mengatur Posisi Konten Jumbotron
Untuk mengatur posisi konten yang ada didalam Jumbotron, seperti berada ditengah atau kiri cukup menggunakan class
.text-left (posisi kiri default), .text-center (posisi tengah) dan .text-right (posisi kanan) yang ditulis pada element apapun sesuai keperluan atau bisa juga dengan menempatkannya secara global pada class dasar .jumbotronContoh :
<!-- contoh 1 -->
<div class="jumbotron text-center">
<div class="container">
<h1>Tutorial Bootstrap Indonesia</h1>
<p>Panduan belajar bootstrap berbahasa indonesia</p>
<p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
</div>
</div>
<!-- contoh 2 -->
<div class="jumbotron night text-right">
<div class="container">
<h1>Tutorial Bootstrap Indonesia</h1>
<p>Panduan belajar bootstrap berbahasa indonesia</p>
<p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
</div>
</div>
Hasil :
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<title>Triksonic Demo Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CSS Bootstrap 3 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
<!-- custom jumbotron-->
<style>
.jumbotron.night {
background-color: #333;
color: #eaeaea;
}
</style>
</head>
<body>
<!-- contoh 1 -->
<div class="jumbotron text-center">
<div class="container"> <!-- level 2-->
<h1>Tutorial Bootstrap Indonesia</h1>
<p>Panduan belajar bootstrap berbahasa indonesia</p>
<p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
</div>
</div>
<!-- contoh 2 -->
<div class="jumbotron night text-right">
<div class="container"> <!-- level 2-->
<h1>Tutorial Bootstrap Indonesia</h1>
<p>Panduan belajar bootstrap berbahasa indonesia</p>
<p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
</div>
</div>
<!--note-->
<div class="container">
<p>
Rubah lebar area preview untuk melihat area responsive.
</p>
</div>
</body>
</html>
Posting Komentar