Kolom Pada Bootstrap Framework
Sistem Kolom Pada Bootstrap Framework, memungkinkan anda untuk membuat hingga 12 jenis kolom pada satu halaman. Dimana pengelompokan kolom tersebut diberi Class nya masing-masing, yaitu: col-sm-1 sampai dengan col-sm-12. Adapun sistem Class Kolom Pada Bootstrap Framework di kelompokan menjadi sebagai berikut.
Class Kolom Pada Bootstrap Framework :
1..col-xs-(value 1-12) Untuk ponsel2.
.col-sm-(value 1-12) Untuk tablets3.
.col-md-(value 1-12) Untuk desktop/pc4.
.col-lg-(value 1-12) Untuk larger desktopsSetiap masing-masing
Class Kolom Pada Bootstrap Framework dapat di kombinasikan satu sama lainnya, untuk menghasilkan layout halaman yang dinamis. Jadi jika anda berniat untuk membuat ke-12 Kolom Pada Bootstrap Framework, maka dapat di susun sesuai kelompok classnya masing-masing, seperti contoh berikut:
.col-sm-1 .col-sm-1 .col-sm-2 .col-sm-1 .col-sm-1 .col-sm-2 .col-sm-1 .col-sm-3 .col-sm-4 .col-sm-4 .col-sm-4 .col-sm-4 .col-sm-8 .col-sm-6 .col-sm-6 .col-sm-12
Struktur Kolom Pada Bootstrap Framework
Berikut contoh sederhana Struktur Kolom Pada Bootstrap Framework.
<div class="row">
<div class="col-(value xs/sm/md/lg)-(value 1-12)">/* === Header === */</div>
</div>
<div class="row">
<div class="col-(value xs/sm/md/lg)-(value 1-12)">/* === Menu 1 === */</div>
<div class="col-(value xs/sm/md/lg)-(value 1-12)">/* === Menu 2 === */</div>
<div class="col-(value xs/sm/md/lg)-(value 1-12)">/* === Menu 3 === */</div>
</div>
<div class="row">
<div class="col-(value xs/sm/md/lg)-(value 1-12)">/* ======= ISI KONTEN ======= */</div>
<div class="col-(value xs/sm/md/lg)-(value 1-12)">/* ======= Menu Samping ======= */</div>
</div>Untuk lebih jelasnya silahkan lihat demo di bawah.
DEMO Kolom Pada Bootstrap Framework
/* === Header === */
/* ======= ISI KONTEN ======= */
<div class="row">
<div class="col-lg-12 header-demo">/* === Header === */</div>
<div class="col-lg-4 menu-list">/* === Menu 1 === */</div>
<div class="col-lg-4 menu-list">/* === Menu 2 === */</div>
<div class="col-lg-4 menu-list">/* === Menu 3 === */</div>
<div class="col-lg-8 body-konten">
/* ======= ISI KONTEN ======= */
</div>
<div class="col-lg-4 menu-list">
/* == Menu Samping == */
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
/* Lewati langkah ini jika anda sudah menerapkan bootstrap.css */
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" />
<--- Lewati langkah ini jika anda sudah menerapkan bootstrap.js --->
Sampai disini anda sudah mendapatkan hasil layout halaman yang dinamis, silahkan kembangkan sesuai kreatifitas masing-masing. Jika masih ada yang dipertanyakan, silahkan diskusikan pada kolom komentar.
Subscribe to:
Post Comments
(
Atom
)
2 comments
Tulis Komentar
nice infonya gan ,jangan lupa mampir yaa... ke blog baru ane...bila berkenan join blog ane http://candrafm33.blogspot.com
Casino - Dr.MCD
The casino is 여주 출장샵 a popular gaming destination in the southwest 천안 출장안마 of 의정부 출장샵 the 여주 출장안마 Las Vegas Strip, and the property's location along I-15 여수 출장마사지 in the Las Vegas Strip,
nice infonya gan ,jangan lupa mampir yaa... ke blog baru ane...bila berkenan join blog ane http://candrafm33.blogspot.com
Casino - Dr.MCD
The casino is 여주 출장샵 a popular gaming destination in the southwest 천안 출장안마 of 의정부 출장샵 the 여주 출장안마 Las Vegas Strip, and the property's location along I-15 여수 출장마사지 in the Las Vegas Strip,
Silahkan gunakan form komentar dengan bijak. Komentar yang berisi link aktif, titip link, iklan, kemungkinan tidak akan di terbitkan atau bahkan dimasukan ke dalam folder spam.
Mohon maaf jika kami belum sempat membalas komentar anda.
List Smiley Buka Konverter Tutup Konverter