Jumbotron Merupakan komponen yang tidak kalah penting, pasalnya komponen ini banyak digunakan utnuk header sebagai pengganti slider, untuk landing page apps dan mudah untuk di kembangan sesuai dengan keinginan.
Jumbotron sendiri dapat digunakan seperti fungsi informasi yang penting dan ditonjolkan seperti section call to action dengan menggunakan tombol. Disini akan dicontohkan cara menggunakannya dan akan seperti kode dibawah ini..
<!DOCTYPE html> <html> <head> <title>Bootstrap Jumbotron</title> <!-- Bootstrap Css --> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body> <!-- mulai container --> <div class="jumbotron"> <div class="container"> <h1>Heading information</h1> <p>additional text an information .....</p> <a href="" class="btn btn-success">Example button</a> </div> </div> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </body> </html>
Contoh diatas menggunakan full body atau halaman penuh, jika ingin menggunakan boxed dapat menambah elemen divsebelum elemen div dengan attribute class="jumbotron" atau dapat memindahkan attribute class container diluar elemen div dengan attribute class="jumbotron"....
Hasil dari kode diatas seperti gambar dibawah ini...
Cara Membuat Jumbotron dengan Mudah Menggunakan Bootstrap
Reviewed by creativekiller
on
January 11, 2018
Rating:
Reviewed by creativekiller
on
January 11, 2018
Rating:
No comments: