sistem grid Bootstrap
pengantar singkat
Dalam tutorial ini, Anda akan belajar cara membuat sistem grid Bootstrap (Grid System).
Seperti yang Anda ketahui, dalam desain grafis, sistem grid adalah struktur dua dimensi, dengan sumbu horisontal dan vertikal berpotongan komponen daerah untuk membangun konten. Hal ini banyak diterapkan pada desain tata letak dan struktur isi desain grafis. Dalam desain web, itu adalah cara yang cepat dan efisien untuk membuat tata letak yang konsisten sangat efektif dengan menggunakan HTML dan CSS. Dengan demikian, sistem grid telah menjadi penting komponen / modul bingkai atau desain web alur kerja.
Sederhananya, desain web, kita menggunakan HTML dan CSS untuk membuat baris dan kolom untuk mencapai grid. Dan kolom berisi konten yang sebenarnya.
Dari versi 2.3.2 dan seterusnya, Bootstrap menawarkan dua jenis mesh. Default sistem grid 940 lebar dan 12. Anda dapat menambahkan stylesheet Responsif karena disajikan viewport untuk menyesuaikan lebar 724px dan 1170px.
Ada juga sistem aliran grid, yang didasarkan pada persentase, bukan piksel berbasis. Dan dapat diperpanjang untuk sama sebagai default tetap jaringan responsif. Dalam tutorial ini kita akan membahas grid default melalui beberapa contoh, sistem grid aliran akan dijelaskan dalam tutorial terpisah.
Silahkan download versi terbaru dari file Bootstrap dari "http://twitter.github.io/bootstrap/assets/bootstrap.zip" pada. Anda dapat di kami tutorial pengantar untuk memahami struktur file yang relevan.
Mendapatkan dari grid bawaan
Mari kita mulai dengan HTML dasar mulai melihat bagaimana grid aplikasi bawaan di atas.
<! DOCTYPE html>
<Html>
<Head>
<Title> menggunakan contoh tata letak tetap Bootstrap </ title>
<Meta name = "viewport" content = "width = device-width, awal skala = 1.0">
<! - Bootstrap ->
<Link href = "bootstrap / css / bootstrap.min.css" rel = "stylesheet" Media = "screen">
<Script src = "http://code.jquery.com/jquery.js"> </ script>
<Script src = "bootstrap / js / bootstrap.min.js"> </ script>
</ Kepala>
<Body>
</ Body>
</ Html>
Bootstrap menggunakan kelas CSS "baris" untuk membuat garis horizontal kelas CSS "spanx" (nilai x adalah dari 1 sampai 12) untuk membuat kolom vertikal. Melalui kedua dapat membuat kotak tiga kolom (masing-masing kolom berisi beberapa teks), HTML sebagai berikut
<! DOCTYPE html> <Html> <Head> <Title> menggunakan contoh tata letak tetap Bootstrap </ title> <Meta name = "viewport" content = "width = device-width, awal skala = 1.0"> <! - Bootstrap -> <Link href = "bootstrap / css / bootstrap.min.css" rel = "stylesheet" Media = "screen"> <Script src = "http://code.jquery.com/jquery.js"> </ script> <Script src = "bootstrap / js / bootstrap.min.js"> </ script> </ Kepala> <Body> <Class Div = "container"> <Class Div = "row"> <Div class = "span4"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum di, laoreet Mattis, massa. Sed eleifend nonummy diam. Hubungi Kami mauris ante, elementum et, bibendum di, Enquiry sit amet, nibh. duis tincidunt LECTUS quis dui viverra vestibulum. Suspendisse vulputate Aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi di mauris. Maecenas placerat, nisl di consequat rhoncus, sem nunc ibu hamil justo, quis eleifend Arcu velit quis lacus. Morbi magna magna, tincidunt sebuah, Mattis non, imperdiet vitae, Tellus. Sed Odio est, auctor ac, sollicitudin di, consequat vitae, Orci. Fusce id felis. Vivamus sollicitudin Metus eget eros. < / p> </ div> <Div class = "span4"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum di, laoreet Mattis, massa. Sed eleifend nonummy diam. Hubungi Kami mauris ante, elementum et, bibendum di, Enquiry sit amet, nibh. duis tincidunt LECTUS quis dui viverra vestibulum. Suspendisse vulputate Aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi di mauris. Maecenas placerat, nisl di consequat rhoncus, sem nunc ibu hamil justo, quis eleifend Arcu velit quis lacus. Morbi magna magna, tincidunt sebuah, Mattis non, imperdiet vitae, Tellus. Sed Odio est, auctor ac, sollicitudin di, consequat vitae, Orci. Fusce id felis. Vivamus sollicitudin Metus eget eros. < / p> </ div> <Div class = "span4"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum di, laoreet Mattis, massa. Sed eleifend nonummy diam. Hubungi Kami mauris ante, elementum et, bibendum di, Enquiry sit amet, nibh. duis tincidunt LECTUS quis dui viverra vestibulum. Suspendisse vulputate Aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi di mauris. Maecenas placerat, nisl di consequat rhoncus, sem nunc ibu hamil justo, quis eleifend Arcu velit quis lacus. Morbi magna magna, tincidunt sebuah, Mattis non, imperdiet vitae, Tellus. Sed Odio est, auctor ac, sollicitudin di, consequat vitae, Orci. Fusce id felis. Vivamus sollicitudin Metus eget eros. < / p> </ div> </ Div> </ Div> </ Body> </ Html>
Di bawah ini adalah representasi grafis dari sistem grid
Dengan cara ini, kita bisa menggunakan "span4" kelas untuk setiap kolom, menciptakan grid tiga kolom. "Kontainer" kelas digunakan untuk menyimpan seluruh struktur. Di sini Anda dapat melihat contoh secara online . Dari ini, kita dapat menyimpulkan kelas CSS yang diberikan digunakan untuk membuat jumlah kolom sintaks umum.
Membuat kotak sintaks umum:
<Class Div = & quot; baris & quot;> <Class Div = & quot; spanx & quot;> elemen inline seperti span, elemen-elemen tingkat blok seperti p, div. </ Div> ulangi <div class = & quot; spanx & quot;> y kali.
Dimana y adalah jumlah kolom yang ingin Anda buat, dan x sama dengan 12 (yang merupakan jumlah maksimum kolom yang dapat Anda buat) gabungan. x harus menjadi bilangan bulat positif, dan nilai harus 1-12.
Misalnya, jika Anda memiliki tiga kolom yang sama-lebar, setiap kolom adalah class = "span4", tetapi jika Anda ingin kolom pertama lebih besar dibandingkan dengan dua lainnya, kolom pertama bisa menggunakan class = "span6" dua kolom lainnya menggunakan class = "span3".
Cara membuat baris dalam grid tetap
Kemudian, sebelum kita beralih ke contoh lain, mari kita lihat grid tetap untuk membuat baris dan kolom aturan CSS.
kelas baris sebagai berikut
.row {
margin-left: -20px;
* Zoom: 1;
}
Mengatur margin kiri ke 20px negatif, dan menetapkan "* zoom: 1;". Di sini, "*" menunjukkan zoom atribut semua elemen di set ke 1, untuk memperbaiki IE6 / 7 dari bug. Mengatur properti zoom ke 1, yang mengatur properti internal yang disebut hasLayout untuk perbaikan IE6 / 7 Banyak zoom / masalah rendering.
.row: sebelum,
.row: setelah {
display: table;
line-height: 0;
konten: "";
}
Bootstrap menggunakan kode CSS sebelumnya untuk membuat garis. Menggunakan ": sebelum" dan ": setelah" properti CSS. Kedua pseudo-elemen. "Sebelum" digunakan sebelum elemen target menjadi sesuatu, ": setelah" digunakan untuk memasukkan beberapa konten setelah elemen target. "Tampilan: tabel;" sehingga unsur-unsur yang disajikan dalam bentuk tabel. Dengan menetapkan "line-height: 0;" untuk memastikan bahwa setiap baris tidak memiliki tinggi baris dengan menggunakan 'konten: ""' untuk memastikan bahwa konten tidak dimasukkan ke depan dan elemen belakang.
Kemudian gunakan aturan berikut untuk memastikan ke sisi kiri dan kanan dari elemen yang diberikan tidak mengambang elemen.
.row: setelah {
clear: both;
}
Cara membuat kolom di grid tetap
[Kelas * = "span"] {
float: kiri;
min-height: 1px;
margin-left: 20px;
}
Ini adalah aturan CSS untuk digunakan. '[Kelas * = "span"]' pilih nilai atribut kelas untuk semua elemen dalam 'rentang' dimulai. Sekarang gunakan "float: left;" untuk mencari setiap kolom berdekatan satu sama lain. Gunakan "min-height: 1px" untuk membuat semua kolom memiliki ketinggian minimal 1px, menggunakan "margin-left: 20px;" mengatur margin kiri ke 20px.
Gunakan aturan CSS terpisah untuk mengatur lebar kolom. Secara khusus seperti yang ditunjukkan pada tabel di bawah
| CSS 代码 | 解释 |
|---|---|
.span12 {
width: 940px;
}
|
如果该行有一个单一的列，列宽为 940px。 |
.span11 {
width: 860px;
}
|
如果该行有一个由 11 列合并的列，列宽为 860px。 |
.span10 {
width: 780px;
}
|
如果该行有一个由 10 列合并的列，列宽为 780px。 |
.span9 {
width: 700px;
}
|
如果该行有一个由 9 列合并的列，列宽为 700px。 |
.span8 {
width: 620px;
}
|
如果该行有一个由 8 列合并的列，列宽为 620px。 |
.span7 {
width: 540px;
}
|
如果该行有一个由 7 列合并的列，列宽为 540px。 |
.span6 {
width: 460px;
}
|
如果该行有一个由 6 列合并的列，列宽为 460px。 |
.span5 {
width: 380px;
}
|
如果该行有一个由 5 列合并的列，列宽为 380px。 |
.span4 {
width: 300px;
}
|
如果该行有一个由 4 列合并的列，列宽为 300px。 |
.span3 {
width: 220px;
}
|
如果该行有一个由 3 列合并的列，列宽为 220px。 |
.span2 {
width: 140px;
}
|
如果该行有一个由 2 列合并的列，列宽为 140px。 |
.span1 {
width: 60px;
}
|
单个列宽为 60px。 |
Bootstrap standar jaringan misalnya
Contoh ini menunjukkan cara membuat kolom, dua kolom, enam kolom, 12 kolom dan empat kolom (dalam urutan itu).
Juga mencatat bahwa semua kolom yang dibuat dikelilingi oleh kelas "wadah", "wadah" adalah untuk membuat tata letak tetap menggunakan Bootstrap.
contoh
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> Bootstrap sistem grid contoh - w3cschool Bootstrap Tutorial </ title>
<Nama Meta = "description" content = "Membuat 16 kolom Grid dengan Bootstrap. Belajar dengan contoh untuk membuat Sistem Grid di Bootstrap.">
<Link href = "bootstrap / css / bootstrap.min.css" rel = "stylesheet" Media = "screen">
<Script src = "http://code.jquery.com/jquery.js"> </ script>
<Script src = "bootstrap / js / bootstrap.min.js"> </ script>
<Gaya>
.span12 h1 {color: # FE6E4C; font-weight: bold; padding: 5px;}
h3 {margin: 10px 0 10px 0;}
</ Style>
</ Kepala>
<Body>
<Class Div = "container">
<Class Div = "row">
<Div class = "span12">
<H1> w3cschool.cc adalah desain web dan pengembangan tutorial. </ H1>
</ Div>
</ Div>
<Class Div = "row">
<Div class = "span12">
<P> w3cschool menawarkan tutorial pengembangan web. Kami percaya pada Open Source. Standar Cinta. Dan memprioritaskan kesederhanaan dan mudah dibaca sementara melayani konten. Dengan 3000 + halaman konten yang unik dan ribuan contoh, kami yang komprehensif. Kami memiliki editor latihan online untuk bermain-main dengan kode contoh. </ p>
</ Div>
</ Div>
<Class Div = "row">
<Div class = "span12">
<H3> Beberapa topik dan lebih ...: </ h3>
</ Div>
<Div class = "span2">
<P> <img src = "images / html5_logo.png" width = "140" height = "86" alt = "html5 logo" /> </ p>
</ Div>
<Div class = "span2">
<P> <img src = "images / javascript-logo.png" width = "140" height = "86" alt = "javascript logo" /> </ p>
</ Div>
<Div class = "span2">
<P> <img src = "images / json.gif" width = "140" height = "86" alt = "JSON logo" /> </ p>
</ Div>
<Div class = "span2">
<P> <img src = "images / php.png" width = "140" height = "86" alt = "PHP logo" /> </ p>
</ Div>
<Div class = "span2">
<P> <img src = "images / mysql-logo.png" width = "140" height = "86" alt = "MySQL logo" /> </ p>
</ Div>
<Div class = "span2">
<P> <img src = "images / browser statistics.png" width = "140" height = "86" alt = "Browser Statistik logo" /> </ p>
</ Div>
</ Div>
<Class Div = "row">
<Div class = "span12">
<H3> situs jaringan sosial untuk berbagi: </ h3>
</ Div>
</ Div>
<Class Div = "row">
<Div class = "span1">
<P> <img src = "images / gplus.png" width = "50" height = "49" alt = "gplus logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / twitter.png" width = "50" height = "38" alt = "Twitter logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / orkut.png" width = "50" height = "55" alt = "Orkut logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / ipad.png" width = "50" height = "53" alt = "iPad logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / digo.png" width = "50" height = "54" alt = "Digo logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / zapface.png" width = "51" height = "53" alt = "Zapface logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / facebook.png" width = "48" height = "53" alt = "facebook logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / netvibes.png" width = "51" height = "53" alt = "Netvibes logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / linkedin.png" width = "49" height = "54" alt = "LinkedIn logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / newsvine.png" width = "48" height = "53" alt = "Newsvine logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / blogger.png" width = "51" height = "53" alt = "Blogger logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / reditt.png" width = "48" height = "57" alt = "Reddit logo" /> </ p>
</ Div>
</ Div>
<Class Div = "row">
<Div class = "span3">
<H3> Pengembangan Fontend: </ h3>
<P> HTML4.0, XHTML1.0, CSS2.1, HTML5, CSS3, JavaScript </ p>
</ Div>
<Div class = "span3">
<H3> Backend Developemt: </ h3>
<P> PHP, Ruby, Python, Java, ASP.NET, SCALA </ p>
</ Div>
<Div class = "span3">
<H3> Manajemen Database: </ h3>
<P> SQL, MySQL PostgreSQL, NoSQL, MongoDB </ p>
</ Div>
<Div class = "span3">
<H3> API, Alat dan Tips: </ h3>
<P> Google Plus API, Twitter Bootstrap, JSON, Firebug, WebPNG </ p>
</ Div>
</ Div>
</ Div>
</ Body>
</ Html>
Berikut adalah apa yang akan Anda buat
View online
Lihat contoh di atas di jendela browser yang berbeda.
Silahkan klik di sini untuk men-download semua contoh di atas dari HTML, CSS, JS dan file gambar.
Tambahkan responsif terhadap grid bawaan
Jika Anda ingin menambahkan ke default jaringan kinerja respon Bootstrap, setelah file CSS HTML asli untuk menambahkan
<meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
Untuk melihat grid default dengan responsif, klik di sini untuk melihat demo online . Klik di sini untuk men-download kode .
default sistem jaringan memainkan respon ada dua kondisi. Ketika viewport (jala render ruang bebas) lebih besar dari 1200px [via @media (min-width: 1200px) diperoleh] ketika viewport lebih besar dari 768px tetapi kurang dari 979px [via @media (min-width: 768px) dan ( max-width: 979px) pengaturan].
kolom offset: jaringan standar
Dengan menggunakan offset, Anda dapat memindahkan sisi kanan kolom ke posisi semula. Hal ini dilakukan dengan menambahkan kolom ke margin kiri untuk mencapai. Dengan Bootstrap, Anda dapat menggunakan "offsetx" (dimana nilai x adalah positif integer) kelas dan kelas "spany" (dimana nilai y adalah bilangan bulat positif). Tergantung 'offestx' 'x' adalah nilai kolom mobile terkait 'x' lebar kolom ke kanan.
Lebar offset didefinisikan dalam Bootstrap CSS. margin kiri atas Offset12 adalah 980px, jarak minimal yang tersisa offset1 100px.
Karena sistem default grid berdasarkan pixel, saat aplikasi digeser, Anda harus tahu bahwa Anda ingin menggunakan pixel offset dan kolom pixel yang akan digunakan. Kedua jumlah piksel ditambahkan bersama-sama tidak boleh melebihi viewport tingkat Anda.
Pada contoh berikut, kita akan membuat kotak dua kolom. Di antara mereka, kita bergerak ke kanan sehingga kolom kiri empat kolom. Kode HTML sebagai berikut:
contoh
<Class Div = "row">
<Div class = "span4 offset4">
<P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum di, laoreet Mattis, massa. Sed eleifend nonummy diam. Hubungi Kami mauris ante, elementum et, bibendum di, Enquiry sit amet, nibh. duis tincidunt LECTUS quis dui viverra vestibulum. Suspendisse vulputate Aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi di mauris. Maecenas placerat, nisl di consequat rhoncus, sem nunc gravida justo, quis eleifend Arcu velit quis lacus . Morbi magna magna, tincidunt sebuah, Mattis non, imperdiet vitae, Tellus. Sed Odio est, auctor ac, sollicitudin di, consequat vitae, Orci. Fusce id felis. Vivamus sollicitudin Metus eget jalan. </ p>
</ Div>
<Div class = "span3">
<P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum di, laoreet Mattis, massa. Sed eleifend nonummy diam. Hubungi Kami mauris ante, elementum et, bibendum di, Enquiry sit amet, nibh. duis tincidunt LECTUS quis dui viverra vestibulum. Suspendisse vulputate Aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi di mauris. Maecenas placerat, nisl di consequat rhoncus, sem nunc gravida justo, quis eleifend Arcu velit quis lacus . Morbi magna magna, tincidunt sebuah, Mattis non, imperdiet vitae, Tellus. Sed Odio est, auctor ac, sollicitudin di, consequat vitae, Orci. Fusce id felis. Vivamus sollicitudin Metus eget jalan. </ p>
</ Div>
</ Div>
</ Div>
Klik di sini untuk melihat demo online Klik disini untuk men-download kode .
Anda dapat menambahkan asli CSS responsif CSS, Anda juga dapat diimbangi dengan penggunaan kolom untuk menambah grid respon default.
kolom bersarang: jaringan standar
Bootstrap menggunakan grid default, kolom dapat bersarang. Anda hanya perlu membuat baris dalam kolom, dan jumlah kolom yang ingin membuat baris bersarang. Pada saat yang sama, Anda harus ingat bahwa jumlah kolom untuk kolom bersarang kolom lainnya, untuk memastikan bahwa tidak lebih dari jumlah kolom ketika Anda membuat kolom orangtua disebutkan.
Contoh berikut menunjukkan bagaimana untuk bersarang di kolom default dalam grid Bootstrap.
contoh
<Class Div = "row">
<Div class = "span7">
<Class Div = "row">
<Div class = "span4">
<P> Maecenas aliquet velit vel turpis. Mauris neque Metus, malesuada nec, ultricies sit amet, porttitor Mattis, enim. Dalam massa libero, interdum nec, interdum vel, blandit sed, nulla. Di ullamcorper, est eget tempor cursus, neque mi consectetuer mi, sebuah ultricies massa est sed nisl. Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla Arcu, luctus nonummy, diktum eget, fermentum et, lorem. Nunc porta convallis pede. </ p>
</ Div>
<Div class = "span3">
<P> Maecenas aliquet velit vel turpis. Mauris neque Metus, malesuada nec, ultricies sit amet, porttitor Mattis, enim. Dalam massa libero, interdum nec, interdum vel, blandit sed, nulla. Di ullamcorper, est eget tempor cursus, neque mi consectetuer mi, sebuah ultricies massa est sed nisl. Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla Arcu, luctus nonummy, diktum eget, fermentum et, lorem. Nunc porta convallis pede. </ p>
</ Div>
</ Div>
</ Div>
<Div class = "span5">
<P> Maecenas aliquet velit vel turpis. Mauris neque Metus, malesuada nec, ultricies sit amet, porttitor Mattis, enim. Dalam massa libero, interdum nec, interdum vel, blandit sed, nulla. Di ullamcorper, est eget tempor cursus, neque mi consectetuer mi, sebuah ultricies massa est sed nisl. Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla Arcu, luctus nonummy, diktum eget, fermentum et, lorem. Nunc porta convallis pede. </ p>
</ Div>
</ Div>
</ Div>
Klik di sini untuk melihat demo online Klik disini untuk men-download kode .
Dalam contoh di atas, garis dalam wadah memiliki dua kolom didefinisikan sebagai 'class = "span7"' dan 'class = "span5"'. Membuat total 12 kolom. Sekarang, kita tambahkan baris di kolom kiri, kemudian membuat dua kolom, yang didefinisikan sebagai 'class = "span4"' dan 'class = "span3"'. Oleh karena itu, jumlah total kolom di mana untuk mematuhi ketentuan induknya kolom (3 + 4 = 7).
Anda juga dapat menambahkan di sini kinerja respon.
kesimpulan
Dalam tutorial ini, kita telah membahas default Bootstrap sistem grid. Tutorial ini berdasarkan Bootstrap V2.3.2. Berikut ini adalah ringkasan dari poin utama yang terkait dengan tutorial ini:
- Bootstrap sistem grid default adalah 940 lebar, dan dengan 12 kolom.
- Di grid, baris demi 'class = "row"' Buat kolom dengan 'class = "spanx"' Buat, di mana x adalah bilangan bulat positif. X jumlah semua kolom tidak boleh melebihi 12.
- Dengan menambahkan Bootstrap Responsif CSS, Anda dapat menambahkan respon ke jaringan default.
- Gunakan Offset untuk menciptakan ruang tambahan untuk kolom. Dengan menggunakan 'class = "offsetx"', dimana x adalah bilangan bulat positif. Jika Anda menggunakan sebuah offset, jumlah kolom, nomor termasuk offset untuk digunakan tidak lebih dari 11.
- Kolom dapat bersarang. Jika Anda menggunakan kolom bersarang, ketika jumlah total komputasi grid (garis kontainer) di kolom, kolom bersarang harus dimasukkan.
- Anda juga dapat menggunakan kolom bersarang offset.