Widodo

Cara Membuat Layout Template dengan Bootstrap

Sebelum ke tahap percancangan layout saya akan kenalkan Framework Bootstrap terlebih dahulu

Apati Itu Bootsrap..?

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

Layout Bootstrap s-widodo.com

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

<!-- 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 -->

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

<!-- start: container artikel -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12">
<!-- content artikel -->
</div>

<!-- start: sidebar -->
<div class="col-lg-4 col-md-4 col-sm-12">
<!-- content sidebar -->
</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"><!-- 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>

6. Sekarang kita buat content sidebar menggunakan 1 colom.

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

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. 

<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>

<!-- start:credit -->
<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>

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>

<style>
.row {margin-bottom:20px;}
header { background:#333333; margin: 0 0 20px;}
.body_1{background:#eeeeee; height:50px; width:100%; }
.body_2{background:#eeeeee; height:250px; width:100%; }
.body_3{background:#eeeeee; height:200px; width:100%; margin:0 0 20px; }
footer {width:100%; background:#333333; padding:20px 0 20px;}
.footer-bottom {background:#000000;widht:100%; padding:15px 0 15px}
.footer-bottom p {color:#eeeeee;}
</style>

Fungsi css diatas ini untuk memberi blok pada kolom-kolom yang tadi kita buat, andapun bisa menggantinya sesai kebutuhan kalian masing2.

Untuk download dan tutorial videonya anda bisa klik tautan dibawah ini

Terimakasih semoga tutorial kali ini bermanfaat.



0 Komentar