Salam kompak selalu buat para sahabat carikode, Seperti biasa kita masih melanjutkan tutorial sebelumnya. Sebelumnya kita sudah membuat halaman artikel menggunakan bootstrap, Nah, pada kesempatan kali ini kita akan membuat sidebar menggunakan bootstrap. Sama seperti sebelumnya, sahabat carikode hanya menyambung tutorial sebelumnya. Buatlah tag div baru dengan class col-lg-4 tepat di akhir penutup tag col- lg-8, Kemudian di dalam tag col-lg-4 buatlah tag dengan class col-lg-12, Berikut syntaxnya : 1 2 3 4 5 <div class="col-lg-4"> <div class="col-lg-12"> </div> </div> Kemudian tambahkan tag div dengan class list-group, Berikut syntaxnya : Sidebar 1 Kemudian buatlah tag link dengan class list-group-item, tag h4 dengan class list-group-item-heading dan tag paragraf <p> dengan class list-group-item- text dan masukkan kan judul di tag h4 dan text paragraf di tag <p> Berikut syntaxnya :
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Salam kompak selalu buat para sahabat carikode, Seperti biasa kita masih melanjutkan tutorial sebelumnya.Sebelumnya kita sudah membuat halaman artikel menggunakan bootstrap, Nah, pada kesempatan kali ini kita akan membuat sidebar menggunakan bootstrap. Sama seperti sebelumnya, sahabat carikode hanya menyambung tutorial sebelumnya.Buatlah tag div baru dengan class col-lg-4 tepat di akhir penutup tag col-lg-8, Kemudian di dalam tag col-lg-4 buatlah tag dengan class col-lg-12, Berikut syntaxnya :
12345
<div class="col-lg-4"> <div class="col-lg-12">
</div></div>
Kemudian tambahkan tag div dengan class list-group, Berikut syntaxnya :
Sidebar 1Kemudian buatlah tag link dengan class list-group-item, tag h4 dengan class list-group-item-heading dan tag paragraf <p> dengan class list-group-item-text dan masukkan kan judul di tag h4 dan text paragraf di tag <p> Berikut syntaxnya :
<a href="#" class="list-group-item"> <h4 class="list-group-item-heading">Lorem Ipsum</h4><hr> <p class="list-group-item-text">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p></a>
Sidebar 2sudah terlihat sidebar yang kita buat, untuk menambahkan item di bawahnya sahabat carikode hanya tinggal meng copy-paste tag link list-group-item serta isi di dalamnya, maka secara otomatis list di bawahnya akan bertambah, Berikut contohnya :
Sidebar 3Untuk penambahan saya membuat list kategori di bawah list tutorial terbaru, Buatlah tag div baru dengan class col-lg-12 di akhir baris col-lg-12 sebelumnya, Kemudian buatlah tag link dengan class list-group-item active, Berikut syntaxnya :
Sidebar 4Selanjutnya kita akan membuat list isi di dalamnya, Buatlah pembuka tag <ul> dengan class list-group dan pembuka tag <li> dengan class list-group-item, Berikut syntaxnya :
12345
<ul class="list-group"> <li class="list-group-item"> Test </li></ul>
Sidebar 7Baik, untuk kesempatan kali ini selesai sudah cara membuat sidebar menggunakan bootstrap, Terus stay di carikode.com dan tunggulah tutorila selanjutnya.