Bootstrap Jumbotron dan Header Halaman

I.Latar Belakang.
Membuat suatu tampilan dengan Bootsrap.

II.Alat dan Bahan.
  Laptop / PC
  W3SCHOOLS
  Sublime Text

III.Tujuan.
Agar tampilan suatu program itu responsiv.

IV.Penjelasan.

Bootstrap Jumbotron dan Header Halaman

Membuat Jumbotron sebuah
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 dari teks di dalamnya.

Tip: Di dalam jumbotron Anda dapat menempatkan hampir semua HTML yang valid, termasuk unsur-unsur Bootstrap lainnya / kelas.

Gunakan <div> elemen dengan kelas .

Jumbotron Inside Container

Tempatkan jumbotron di 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>
</div>


Jumbotron Outside Container
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 pembagi.
Kelas .page-header menambahkan garis horizontal di bawah judul (+ menambahkan beberapa ruang tambahan di sekitar elemen):
Contoh Header Halaman

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

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

Contoh :

Maka outputnya :


V.Kesimpulan.Kita bisa gunakan bootstrap untuk membantu kita membuat tampilan

VI.Refrensi.
   https://www.w3schools.com/bootstrap/default.asp

Komentar

Postingan Populer