Assalamu'alaikum wr.wb
Kali ini saya akan berbagi Cara Membuat Jumbotron dan Header Halaman menggunakan Bootstrap.
Membuat Jumbotron
Sebuah jumbotron menunjukkan sebuah kotak besar untuk memangggil perhatian extra untuk beberapa konten khuus atau informasi. Sebuah jumbotron ditampilkan sebagai kotak abu-abu dengan sudut membulat. Hal ini juga memperbesar font teks didalamnya.Di dalam jumbotron dapat menempatkan hampir semua HTML yang valid, termasuk elemen Bootstrap lainnya/class. Gunakan elemen <div> dalam class .jumbotron untuk membuat jumbotron.
Jumbotron di Dalam Container
Tempatkan jumbotron di dalam <div class="container"> jika ingin jumbotron tidak memperpanjang ke tepi layar.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Tutorial Bootstrap</h1>
<p>Bootstrap adalah Aplikasi sumber terbuka yang berupa kerangka kerja (framework) untuk membangun website dinamis dengan menggunakan bahasa script CSS. BOOTSTRAP memudahkan developer dan designer untuk membuat sebuah aplikasi web menjadi cepat dan mudah dibandingkan dengan membuatnya dari awal..</p>
</div>
<p>dicky69news.blogspot.co.id</p>
<p>dicky69news.blogspot.co.id</p>
</div>
</body>
</html>
Jumbotron di Luar Container
Tempatkan jumbotron di luar <div class="container"> jika ingin jumbotron memperpanjang ke tepi layar.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
<h1>Tutorial Bootstrap</h1>
<p>BBootstrap adalah Aplikasi sumber terbuka yang berupa kerangka kerja (framework) untuk membangun website dinamis dengan menggunakan bahasa script CSS. BOOTSTRAP memudahkan developer dan designer untuk membuat sebuah aplikasi web menjadi cepat dan mudah dibandingkan dengan membuatnya dari awal.</p>
</div>
<div class="container">
<p>dicky69news.blogspot.co.id</p>
<p>dicky69news.blogspot.co.id</p>
</div>
</body>
</html>
Membuat Header Halaman
Class .page-header menambahkan garis horizontal dibawah judul (+ menambahkan beberapa ruang tambahan disekitar elemen).Gunakan elemen <div> dengan class .page-header untuk membuat header halaman.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Ini adalah Header/Judul Halaman</h1>
</div>
<p>Ini adalah paragraf 1.</p>
<p>Ini adalah paragraf 2.</p>
</div>
</body>
</html>
Sekian Cara Membuat
Jumbotron dan Header Halaman menggunakan Bootstrap.
Semoga Bermanfaat...!!!
Referensi:www.w3schools.com
Wassalamu'alaikum wr.wb
0 komentar:
Posting Komentar