Kamis, 04 Februari 2016

Penerapan Jumbotron pada Web

Sebuah jumbotron menunjukkan sebuah kotak besar untuk memanggil perhatian ekstra untuk beberapa konten khusus atau informasi.
Sebuah jumbotron ditampilkan sebagai kotak abu-abu dengan sudut membulat. Hal ini juga memperbesar ukuran font teks di dalamnya.
Tip: Di dalam jumbotron Anda dapat menempatkan hampir semua HTML yang valid, termasuk elemen Bootstrap lainnya / kelas.
Gunakan <div> elemen dengan kelas .jumbotron untuk membuat jumbotron:

bootstrap Tutorial

Bootstrap adalah HTML, CSS, dan kerangka JS paling populer untuk mengembangkan responsif, proyek seluler pertama di web.

Jumbotron Inside Kontainer

Tempatkan jumbotron dalam <div class="container"> jika Anda ingin jumbotron untuk tidak memperpanjang ke tepi layar:
Contoh

<div class="container">
<div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
    responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</di>

Jumbotron luar Kontainer

Tempatkan jumbotron luar <div class="container"> jika Anda ingin jumbotron untuk memperpanjang ke tepi layar:
Contoh

<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
mobile-first projects on the web.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>

Membuat Header Halaman

Sebuah header halaman seperti bagian divider.
The .page-header kelas menambahkan garis horizontal di bawah judul (+ menambahkan beberapa ruang tambahan di sekitar elemen):

Misalnya Header Halaman

Gunakan <div> elemen dengan kelas .page-header untuk membuat header halaman:
Contoh

<div class="page-header">
<h1>Example Page Header</h1>
</div>

Referensi : http://www.w3schools.com/

Risma Anggraeni