Cara menggunakan bootstrap sidebar template

Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript. sumber : Wikipedia

Untuk membuat sebuah layout boostrap sudah menyediakan Grid system atau colum dimana layout yang kita rancang akan otomatis menyesuaikan tampilannya di berbagai macam resolusi atau device jadi tampilan akan terlihat rapih. Untuk menggunakanyapun tidak terlalu susah anda cukup memanggil class grid yang terdiri dari 12 grid atau kolom yang dapat kita bagi-bagi. Untuk itu kita langsung praktekkan

Konsep dasar dari grid system adalah sebagai berikut:

col-xs-value = Extra small devices Phones (<768px)
col-sm-value = Small devices Tablets (≥768px)
col-md-value = Medium devicesDesktops (≥992px)
col-lg-value = Large devices Desktops (≥1200px)

Untuk Memulainya silahkan anda download Framework Bootstrap dulu di sini Download

1. Setelah itu silahkan buat folder example dan Copy Paste file css botsrap.css dan Js boostrasp.js di dalam folder example'

2. Kemudian silahkan buat document baru dengan format HTML/PHP, Lalu panggil file CSS dan JSnya dan jangan lupa disimpan

<link rel="stylesheet" href="./bootstrap.css"> <script src="./bootstrap.min.js"></script>

3. Untuk membuat sebuah wrapper kita membutuhkan class container, tetapi untuk membuat header full width kita pake bantuan class lagi atau header sepeti dibawah ini

 <header> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-12"> <div class="body_1"></div> </div>

<div class="col-lg-8 col-md-8 col-sm-12"> <div class="body_1"></div> </div> </div></div> </header> 

4. Kemudian kita membuat 2 kolom yaitu content artikel dan sidebar dengan mengunakan value 8 untuk artikel dan 4 sidebar.

 <article> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-8 col-sm-12">  </div>  <div class="col-lg-4 col-md-4 col-sm-12">  </div> </div></div></div> </article>

5. Unutk menambah slider anda cukup menggunakan value 12, Setelah kita buat 2 kolom sekarang kita tinggal membuat isi contentnya dengan menggunakan value 4 jadi didalam conten artikel ada 3 kolom.

<div class="col-md-12 body_3">

</div>

 <div class="row"> <div class="col-lg-4 col-md-4 col-sm-12"> <div class="body_2"></div> </div>

<div class="col-lg-4 col-md-4 col-sm-12"> <div class="body_2"></div> </div>

6. Sekarang kita buat content sidebar menggunakan 1 colom.

<link rel="stylesheet" href="./bootstrap.css"> <script src="./bootstrap.min.js"></script>0

Kode keseluruhan content artikel dan sidebar seperti dibwah ini.

7. Setelah itu kita tinggal membuat Bagian footernya dengan menggukanakan 1 kolom untuk layout utamanya, setelah itu kita buat 3 kolom untuk contentnya, untuk credit anda bisa menggunakan value 4 atau lebih sesuai kebutuhan kalian.

<link rel="stylesheet" href="./bootstrap.css"> <script src="./bootstrap.min.js"></script>1

<link rel="stylesheet" href="./bootstrap.css"> <script src="./bootstrap.min.js"></script>2

<link rel="stylesheet" href="./bootstrap.css"> <script src="./bootstrap.min.js"></script>5

<link rel="stylesheet" href="./bootstrap.css"> <script src="./bootstrap.min.js"></script>6

8. Keseluruhan code seperti dibawah ini

<!-- start;header -->
<header>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="body_1"></div>
</div>

<div class="col-lg-8 col-md-8 col-sm-12">
<div class="body_1"></div>
</div>
</div></div>
</header>
<!-- end: header -->

<!-- start: container artikel -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12">
<div class="body_1" style="background:#eeeeee; height:300px; margin:0 0 20px">SLIDER</div>
<!-- start: galery artikel -->
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="body_2"></div>
</div>

<div class="col-lg-4 col-md-4 col-sm-12">
<div class="body_2"></div>
</div>

<div class="col-lg-4 col-md-4 col-sm-12">
<div class="body_2"></div>
</div>

</div></div>

<!-- start: sidebar -->
<div class="col-lg-4 col-md-4 col-sm-12">

<div class="col-md-12 body_3">
<div class="body_3"></div>
</div>

<div class="col-md-12 body_3">
<div class="body_3"></div>
</div>

<div class="col-md-12 body_3">
<div class="body_3"></div>
</div>

</div>
</div></div>
</article>

<section>
<footer>
<div class="container">
<div class="row">

<div class="col-lg-4 col-md-4 col-sm-12">
<div class="body_3"></div>
</div>

<div class="col-lg-4 col-md-4 col-sm-12">
<div class="body_3"></div>
</div>

<div class="col-lg-4 col-md-4 col-sm-12">
<div class="body_3"></div>
</div>

</div></div>
</footer>
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Dibuat Oleh : s-widodo.com
</p>
</div>
</div></div></div>
</section>

Pembuatan layout simple template ini sudah hampit slesai sekarang tambah css ini diatas kode </head>

<link rel="stylesheet" href="./bootstrap.css"> <script src="./bootstrap.min.js"></script>7