Membuat Website Bootstrap 100% Responsive – Part 2 / 10
Bagian Menu Navigasi dan Header
Pada part 2 ini kita akan membuat bagian header yang dijadikan jumbotron dan akan diisi dengan 2 kolom.
Kolom ini sejajar bersampingan (kanan dan kiri) disebelah kanan kita terapkan media misalnya video sedangkan sebelah kiri kita terapkan judul dengan heading dan beberapa kalimat menggunakan paragraf + tombol besar.
Pada part 1 baru sampai sini:
<div class="container-fluid">
<div class="container">
<div class="row">
</div>
</div>
</div>
Silahkan tambahkan class baru setelah container-fluid, class tersebut akan kita gunakan untuk mengedit bagian ini karena saya tidak menyarankan mengedit bagian dari nama class yang sudah disediakan Bootstrap. Silahkan beri class baru misalnya diberi nama atas, maka akan jadi seperti ini:
Baca Juga:
<div class="container-fluid atas">
<div class="container">
<div class="row">
</div>
</div>
</div><!-- akhir class atas -->
Seperti yang dijelaskan diatas, kita akan sisipkan 2 kolom didalam row ini maka silahkan masukkan code pembuat kolom dari Bootstrap yaitu col-. Misalnya kita gunakan col-md-6 artinya kedua kolom ini akan memiliki lebar yang sama:
<div class="container-fluid atas">
<div class="container">
<div class="row">
<div class="col-md-6 text-atas"></div>
<div class="col-md-6"></div>
</div>
</div>
</div><!-- akhir class atas -->
Pada col-md-6 yang pertama silahkan beri class baru seperti biasa supaya kita dapat mengedit element-element yang ada didalamnya, sekarang silahkan masukkan kode berikut didalam col-md-6 yang pertama:
<h1>Contoh Judul</h1>
<p>rem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover. rem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover</p>
<p><a href="https://posciety.com" target="_blank" class="btn btn-default btn-lg">INI Tombol</a></p>
Ini hanya contoh saja untuk mengisi kolom sebelah kiri dengan judul dan kalimat + tombol, silahkan sesuaikan dengan kebutuhan kalian. Selanjutnya masukkan kode ini pada col-md-6 yang kedua:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/stsQT6Z8Fzw"></iframe>
</div>
Pada kolom kedua ini kita sisipkan video, video ini saya ambil dari YouTube. Jika ingin menyisipkan video dari YouTube juga silahkan buka video YouTube yang ingin di sisipkan kemudian klik Embed / Sematkan dibawah video tersebut, salin code nya dan tempelkan didalam col-md-6 ini.
Lihat : Cara memasukkan media (gambar, video, audio) di HTML CSS.
Sekarang kita buat file CSS baru karena belum punya, file-file CSS yang kita punya sebelumnya itu adalah bawaan dari Bootstrap. Buat file baru dan simpan dengan ekstensi .css misalnya style.css. Untuk apa file ini ? File CSS ini untuk gaya / style kustom yang akan kita terapkan pada class-class yang kita buat sendiri contohnya class atas yang kita buat di col-md-6 tadi.
Save file style.css ini di folder CSS bersamaan dengan file-file CSS Bootstrap lain supaya gak bingung / gak berantakan, atau kalo mau simpan di tempat lain juga silahkan. Sekarang silahkan panggil file tersebut di file HTML ini dibagian <head>: <link href="css/style.css" rel="stylesheet">Kode ini artinya memanggil file style.css yang berada di folder CSS.
Lihat: Cara memanggil file dari luar root HTML CSS (lanjutan).
Sekarang, kita akan mengatur gaya sendiri untuk class atas tadi didalam file style.css. Misalnya saya terapkan gaya seperti ini:
.atas {
background-color: #c41617;
padding: 5% 0 5% 0;
}
Gaya yang diberikan adalah warna merah pada latar belakang pada 2 kolom tadi dan memberi sedikit jarak atas dan bawah 2 kolom tersebut supaya terlihat rapih. Dan kalo kalian perhatikan tadi bagian col-md-6 yang pertama diterapkan juga class baru dengan nama text-atas, nah sekarang silahkan atur gaya untuk class text-atas di style.css ini misalnya seperti ini:
.text-atas h1 {
color: #fff;
font-family: 'KaushanScript-Regular';
}
.text-atas p {
color: #fff;
}
Code ini memberikan nilai / gaya pada tag h1 dan tag p yang ada didalam class text–atas, silahkan sesuaikan gayanya sesuai keinginan. Sekarang Save dan lihat hasilnya ! (lihat gambar)
Masih bingung ? Lihat : Video tutorial membuat tempalte responsive dengan Bootstrap Part 2.
Jangan lupa lihat part berikutnya (part 3) disini, atau klik disini untuk lihat part sebelumnya (part 1).
Selamat mencoba !