Sistem jaringan
Gunakan kisi flexbox mobile-first kami yang kuat untuk membangun tata letak dari semua bentuk dan ukuran berkat sistem dua belas kolom, lima tingkat responsif default, variabel Sass dan mixin, dan lusinan kelas yang telah ditentukan sebelumnya.
Bagaimana itu bekerja
Sistem grid Bootstrap menggunakan serangkaian wadah, baris, dan kolom untuk tata letak dan menyelaraskan konten. Itu dibangun dengan flexbox dan sepenuhnya responsif. Di bawah ini adalah contoh dan pandangan mendalam tentang bagaimana kisi-kisi itu bersatu.
Baru atau tidak terbiasa dengan flexbox? Baca panduan flexbox Trik CSS ini untuk latar belakang, terminologi, pedoman, dan cuplikan kode.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Contoh di atas membuat tiga kolom dengan lebar yang sama pada perangkat kecil, sedang, besar, dan ekstra besar menggunakan kelas kisi yang telah ditentukan sebelumnya. Kolom tersebut dipusatkan di halaman dengan induknya .container
.
Mengurainya, begini cara kerjanya:
- Wadah menyediakan sarana untuk memusatkan dan memuat konten situs Anda secara horizontal. Gunakan
.container
untuk lebar piksel responsif atau.container-fluid
untukwidth: 100%
semua area pandang dan ukuran perangkat. - Baris adalah pembungkus untuk kolom. Setiap kolom memiliki horizontal
padding
(disebut talang) untuk mengontrol ruang di antara mereka. Inipadding
kemudian dilawan pada baris dengan margin negatif. Dengan cara ini, semua konten di kolom Anda disejajarkan secara visual di sisi kiri. - Dalam tata letak kisi, konten harus ditempatkan di dalam kolom dan hanya kolom yang boleh menjadi turunan langsung dari baris.
- Berkat flexbox, kolom kisi tanpa spesifikasi
width
akan secara otomatis ditata sebagai kolom dengan lebar yang sama. Misalnya, empat instance.col-sm
masing-masing akan secara otomatis memiliki lebar 25% dari breakpoint kecil ke atas. Lihat bagian kolom tata letak otomatis untuk contoh lainnya. - Kelas kolom menunjukkan jumlah kolom yang ingin Anda gunakan dari kemungkinan 12 per baris. Jadi, jika Anda ingin tiga kolom dengan lebar yang sama, Anda dapat menggunakan
.col-4
. - Kolom
width
s diatur dalam persentase, sehingga selalu cair dan berukuran relatif terhadap elemen induknya. - Kolom memiliki horizontal
padding
untuk membuat talang di antara kolom individual, namun, Anda dapat menghapusmargin
dari baris danpadding
dari kolom dengan.no-gutters
di.row
. - Untuk membuat grid responsif, ada lima breakpoint grid, satu untuk setiap breakpoint responsif : semua breakpoint (ekstra kecil), kecil, sedang, besar, dan ekstra besar.
- Titik henti sementara kisi didasarkan pada kueri media dengan lebar minimum, yang berarti titik henti tersebut berlaku untuk satu titik henti sementara tersebut dan semua yang ada di atasnya (misalnya,
.col-sm-4
berlaku untuk perangkat kecil, sedang, besar, dan ekstra besar, tetapi bukan titikxs
henti sementara pertama). - Anda dapat menggunakan kelas kisi yang telah ditentukan sebelumnya (seperti
.col-4
) atau mixin Sass untuk markup semantik yang lebih banyak.
Waspadai keterbatasan dan bug di sekitar flexbox , seperti ketidakmampuan untuk menggunakan beberapa elemen HTML sebagai wadah fleksibel .
Opsi kisi
Sementara Bootstrap menggunakan em
s atau rem
s untuk mendefinisikan sebagian besar ukuran, px
s digunakan untuk breakpoint grid dan lebar kontainer. Ini karena lebar viewport dalam piksel dan tidak berubah dengan ukuran font .
Lihat bagaimana aspek sistem grid Bootstrap bekerja di beberapa perangkat dengan tabel praktis.
Ekstra kecil <576px |
Kecil 576px |
Sedang 768px |
Besar 992px |
Ekstra besar 1200px |
|
---|---|---|---|---|---|
Lebar kontainer maks | Tidak ada (otomatis) | 540px | 720px | 960px | 1140px |
Awalan kelas | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# kolom | 12 | ||||
lebar selokan | 30px (15px di setiap sisi kolom) | ||||
Bersarang | Ya | ||||
Pemesanan kolom | Ya |
Kolom tata letak otomatis
Manfaatkan kelas kolom khusus breakpoint untuk ukuran kolom yang mudah tanpa kelas bernomor eksplisit seperti .col-sm-6
.
sama-lebar
Misalnya, berikut adalah dua tata letak kisi yang berlaku untuk setiap perangkat dan area pandang, dari xs
hingga xl
. Tambahkan sejumlah kelas tanpa unit untuk setiap breakpoint yang Anda butuhkan dan setiap kolom akan memiliki lebar yang sama.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Multi-baris dengan lebar yang sama
Buat kolom dengan lebar yang sama yang menjangkau beberapa baris dengan menyisipkan .w-100
tempat yang Anda inginkan untuk memisahkan kolom ke baris baru. Jadikan jeda responsif dengan mencampurkan .w-100
beberapa utilitas tampilan responsif .
Ada bug Safari flexbox yang mencegah ini bekerja tanpa eksplisit flex-basis
atau border
. Ada solusi untuk versi browser yang lebih lama, tetapi seharusnya tidak diperlukan jika browser target Anda tidak termasuk dalam versi buggy.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
Mengatur lebar satu kolom
Tata letak otomatis untuk kolom kisi flexbox juga berarti Anda dapat mengatur lebar satu kolom dan mengubah ukuran kolom saudara di sekitarnya secara otomatis. Anda dapat menggunakan kelas kisi yang telah ditentukan sebelumnya (seperti yang ditunjukkan di bawah), mixin kisi, atau lebar sebaris. Perhatikan bahwa kolom lain akan diubah ukurannya tidak peduli lebar kolom tengah.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Konten lebar variabel
Gunakan col-{breakpoint}-auto
kelas untuk mengukur kolom berdasarkan lebar alami kontennya.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Kelas responsif
Kisi Bootstrap mencakup lima tingkatan kelas yang telah ditentukan sebelumnya untuk membangun tata letak responsif yang kompleks. Sesuaikan ukuran kolom Anda pada perangkat ekstra kecil, kecil, sedang, besar, atau ekstra besar sesuai keinginan Anda.
Semua breakpoint
Untuk kisi-kisi yang sama dari perangkat terkecil hingga terbesar, gunakan kelas .col
and .col-*
. Tentukan kelas bernomor saat Anda membutuhkan kolom berukuran khusus; jika tidak, jangan ragu untuk tetap berpegang pada .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Ditumpuk menjadi horizontal
Dengan menggunakan satu set .col-sm-*
kelas, Anda dapat membuat sistem grid dasar yang mulai bertumpuk dan menjadi horizontal pada breakpoint kecil ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Campur dan cocokkan
Tidak ingin kolom Anda hanya menumpuk di beberapa tingkatan kisi? Gunakan kombinasi kelas yang berbeda untuk setiap tingkatan sesuai kebutuhan. Lihat contoh di bawah untuk ide yang lebih baik tentang cara kerjanya.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Talang
Talang dapat disesuaikan secara responsif dengan bantalan khusus breakpoint dan kelas utilitas margin negatif. Untuk mengubah talang pada baris tertentu, pasangkan utilitas margin negatif pada .row
dan utilitas padding yang cocok pada .col
s. Orang tua .container
atau .container-fluid
mungkin perlu disesuaikan juga untuk menghindari luapan yang tidak diinginkan, menggunakan lagi utilitas padding yang cocok.
Berikut adalah contoh penyesuaian grid Bootstrap pada lg
breakpoint besar ( ) ke atas. Kami telah meningkatkan .col
padding dengan .px-lg-5
, menetralkannya dengan .mx-lg-n5
pada induknya .row
dan kemudian menyesuaikan .container
pembungkusnya dengan .px-lg-5
.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
Kolom baris
Gunakan kelas responsif .row-cols-*
untuk dengan cepat mengatur jumlah kolom yang paling baik merender konten dan tata letak Anda. Sedangkan .col-*
kelas normal berlaku untuk masing-masing kolom (misalnya, .col-md-4
), kelas kolom baris ditetapkan pada induk .row
sebagai jalan pintas.
Gunakan kelas kolom baris ini untuk membuat tata letak kisi dasar dengan cepat atau untuk mengontrol tata letak kartu Anda.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Anda juga dapat menggunakan mixin Sass yang menyertainya, row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Penyelarasan
Gunakan utilitas perataan flexbox untuk menyelaraskan kolom secara vertikal dan horizontal. Internet Explorer 10-11 tidak mendukung perataan vertikal item fleksibel ketika wadah fleksibel memiliki min-height
seperti yang ditunjukkan di bawah ini. Lihat Flexbugs #3 untuk detail selengkapnya.
Perataan vertikal
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Perataan horizontal
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Tidak ada selokan
Talang antar kolom di kelas kisi yang telah ditentukan sebelumnya dapat dihapus dengan .no-gutters
. Ini menghilangkan margin
s negatif dari .row
dan horizontal padding
dari semua kolom turunan langsung.
Berikut kode sumber untuk membuat gaya ini. Perhatikan bahwa penggantian kolom dicakup hanya untuk kolom turunan pertama dan ditargetkan melalui pemilih atribut . Meskipun ini menghasilkan pemilih yang lebih spesifik, pengisi kolom masih dapat disesuaikan lebih lanjut dengan utilitas spasi .
Butuh desain ujung-ke-ujung? Jatuhkan orang tua .container
atau .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Dalam praktiknya, inilah tampilannya. Perhatikan bahwa Anda dapat terus menggunakan ini dengan semua kelas kisi yang telah ditentukan sebelumnya (termasuk lebar kolom, tingkat responsif, pengurutan ulang, dan lainnya).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Pembungkus kolom
Jika lebih dari 12 kolom ditempatkan dalam satu baris, setiap kelompok kolom tambahan akan, sebagai satu unit, membungkus ke baris baru.
Sejak 9 + 4 = 13 > 12, div lebar 4-kolom ini dibungkus ke baris baru sebagai satu unit yang berdekatan.
Kolom berikutnya berlanjut di sepanjang baris baru.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
Istirahat kolom
Memutus kolom ke baris baru di flexbox memerlukan sedikit peretasan: tambahkan elemen di width: 100%
mana pun Anda ingin membungkus kolom ke baris baru. Biasanya ini dilakukan dengan beberapa .row
s, tetapi tidak setiap metode implementasi dapat menjelaskan hal ini.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
Anda juga dapat menerapkan jeda ini pada titik henti sementara tertentu dengan utilitas tampilan responsif kami .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
Menata ulang
Pesan kelas
Gunakan .order-
kelas untuk mengontrol urutan visual konten Anda. Kelas-kelas ini responsif, sehingga Anda dapat mengatur order
breakpoint berdasarkan (mis., .order-1.order-md-2
). Termasuk dukungan untuk 1
melalui 12
semua lima tingkatan grid.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Ada juga kelas responsif .order-first
dan .order-last
yang mengubah order
elemen dengan menerapkan order: -1
dan order: 13
( order: $columns + 1
), masing-masing. Kelas-kelas ini juga dapat dicampur dengan .order-*
kelas-kelas bernomor sesuai kebutuhan.
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
Mengimbangi kolom
Anda dapat mengimbangi kolom kisi dengan dua cara: .offset-
kelas kisi responsif dan utilitas margin kami . Kelas kisi berukuran untuk mencocokkan kolom sementara margin lebih berguna untuk tata letak cepat di mana lebar offset bervariasi.
Kelas offset
Pindahkan kolom ke kanan menggunakan .offset-md-*
kelas. Kelas-kelas ini meningkatkan margin kiri kolom demi *
kolom. Misalnya, .offset-md-4
bergerak .col-md-4
di atas empat kolom.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
Selain pembersihan kolom pada breakpoint responsif, Anda mungkin perlu mengatur ulang offset. Lihat ini beraksi dalam contoh grid .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
Utilitas margin
Dengan pindah ke flexbox di v4, Anda dapat menggunakan utilitas margin seperti .mr-auto
memaksa kolom saudara menjauh satu sama lain.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Bersarang
Untuk menyarangkan konten Anda dengan kisi default, tambahkan kolom baru .row
dan kumpulan .col-sm-*
kolom di dalam kolom yang sudah ada .col-sm-*
. Baris bersarang harus menyertakan kumpulan kolom yang berjumlah hingga 12 atau kurang (Anda tidak perlu menggunakan semua 12 kolom yang tersedia).
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Campur aduk
Saat menggunakan file Sass sumber Bootstrap, Anda memiliki opsi untuk menggunakan variabel Sass dan mixin untuk membuat tata letak halaman kustom, semantik, dan responsif. Kelas kisi yang telah ditentukan sebelumnya menggunakan variabel dan mixin yang sama ini untuk menyediakan seluruh rangkaian kelas siap pakai untuk tata letak responsif yang cepat.
Variabel
Variabel dan peta menentukan jumlah kolom, lebar talang, dan titik kueri media untuk memulai kolom mengambang. Kami menggunakan ini untuk menghasilkan kelas kisi yang telah ditentukan sebelumnya yang didokumentasikan di atas, serta untuk mixin khusus yang tercantum di bawah ini.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
campuran
Mixin digunakan bersama dengan variabel grid untuk menghasilkan CSS semantik untuk kolom grid individu.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Contoh penggunaan
Anda dapat memodifikasi variabel ke nilai kustom Anda sendiri, atau cukup gunakan mixin dengan nilai defaultnya. Berikut adalah contoh penggunaan pengaturan default untuk membuat tata letak dua kolom dengan celah di antaranya.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Menyesuaikan kisi-kisi
Dengan menggunakan variabel dan peta Sass grid bawaan kami, dimungkinkan untuk sepenuhnya menyesuaikan kelas grid yang telah ditentukan sebelumnya. Ubah jumlah tingkatan, dimensi kueri media, dan lebar penampung—lalu kompilasi ulang.
Kolom dan talang
Jumlah kolom grid dapat dimodifikasi melalui variabel Sass. $grid-columns
digunakan untuk menghasilkan lebar (dalam persen) masing-masing kolom sambil $grid-gutter-width
mengatur lebar untuk talang kolom.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Tingkat jaringan
Bergerak di luar kolom itu sendiri, Anda juga dapat menyesuaikan jumlah tingkat kisi. Jika Anda hanya menginginkan empat tingkat kisi, Anda akan memperbarui $grid-breakpoints
dan $container-max-widths
menjadi seperti ini:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Saat membuat perubahan apa pun pada variabel atau peta Sass, Anda harus menyimpan perubahan dan mengkompilasi ulang. Melakukannya akan menampilkan serangkaian kelas kisi yang telah ditentukan sebelumnya untuk lebar kolom, offset, dan pemesanan. Utilitas visibilitas responsif juga akan diperbarui untuk menggunakan breakpoint kustom. Pastikan untuk menyetel nilai kisi di px
(bukan rem
, em
, atau %
).