Bootstrap 3 Jumbotron - Tutorial Bootstrap Indonesia
Tutorial Bootstrap 3 Jumbotron
TikSonic - Komponen Bootstrap jumbotron memperlihatkan sebuah kotak besar yang dipakai untuk menampilkan konten utama atau isu pada halaman web, contohnya menyerupai seolah-olah judul, deskripsi dan lain sebagainya sesuai keperluan.
Di dalam jumbotron hampir semua HTML yang valid termasuk komponen Bootstrap lainnya sanggup dituliskan didalamnya.
Cara Penerapan Jumbotron
Untuk menerapkan bagaimana jumbotron dibuat, gunakan element Gunakan elemen dan berikan class
.jumbotron sebagai class dasarnya, selengkapnya silahkan lihat teladan berikut : <div class="jumbotron"> <h1>Tutorial Bootstrap Indonesia</h1> <p>Panduan berguru 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 berguru 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 sanggup memperlihatkan class pemanis 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 berguru 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 berguru 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 mempunyai lebar 1 halaman penuh area pandang dan tanpa adanya sudut membulat pada bab ujungnya, Bungkus semua element yang ada didalam jumbotron dengan element
<div> dengan class .container letakkan pada element dengan posisi level 2.Contoh :
<!-- teladan 1 --> <div class="jumbotron"> <div class="container"> <!-- level 2--> <h1>Tutorial Bootstrap Indonesia</h1> <p>Panduan berguru bootstrap berbahasa indonesia</p> <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p> </div> </div> <!-- teladan 2 --> <div class="jumbotron night"> <div class="container"> <!-- level 2--> <h1>Tutorial Bootstrap Indonesia</h1> <p>Panduan berguru 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> <!-- teladan 1 --> <div class="jumbotron"> <div class="container"> <!-- level 2--> <h1>Tutorial Bootstrap Indonesia</h1> <p>Panduan berguru bootstrap berbahasa indonesia</p> <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p> </div> </div> <!-- teladan 2 --> <div class="jumbotron night"> <div class="container"> <!-- level 2--> <h1>Tutorial Bootstrap Indonesia</h1> <p>Panduan berguru 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, menyerupai berada ditengah atau kiri cukup memakai class
.text-left (posisi kiri default), .text-center (posisi tengah) dan .text-right (posisi kanan) yang ditulis pada element apapun sesuai keperluan atau sanggup juga dengan menempatkannya secara global pada class dasar .jumbotronContoh :
<!-- teladan 1 --> <div class="jumbotron text-center"> <div class="container"> <h1>Tutorial Bootstrap Indonesia</h1> <p>Panduan berguru bootstrap berbahasa indonesia</p> <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p> </div> </div> <!-- teladan 2 --> <div class="jumbotron night text-right"> <div class="container"> <h1>Tutorial Bootstrap Indonesia</h1> <p>Panduan berguru 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> <!-- teladan 1 --> <div class="jumbotron text-center"> <div class="container"> <!-- level 2--> <h1>Tutorial Bootstrap Indonesia</h1> <p>Panduan berguru bootstrap berbahasa indonesia</p> <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p> </div> </div> <!-- teladan 2 --> <div class="jumbotron night text-right"> <div class="container"> <!-- level 2--> <h1>Tutorial Bootstrap Indonesia</h1> <p>Panduan berguru 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>