Sistem jaringan
Gunakan kisi flexbox mobile-first kami yang kuat untuk membangun tata letak dari semua bentuk dan ukuran berkat sistem dua belas kolom, enam tingkat responsif default, variabel Sass dan mixin, dan lusinan kelas yang telah ditentukan sebelumnya.
Contoh
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 penjelasan mendalam tentang bagaimana sistem grid bersatu.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Contoh di atas membuat tiga kolom dengan lebar yang sama di semua perangkat dan area pandang menggunakan kelas kisi yang telah ditentukan sebelumnya. Kolom tersebut dipusatkan di halaman dengan induknya .container
.
Bagaimana itu bekerja
Memecahnya, inilah cara sistem grid bersatu:
-
Grid kami mendukung enam breakpoint responsif . Titik henti sementara didasarkan pada
min-width
kueri media, artinya titik henti tersebut memengaruhi titik henti sementara itu dan semua yang ada di atasnya (misalnya,.col-sm-4
berlaku untuksm
,md
,lg
,xl
, danxxl
). Ini berarti Anda dapat mengontrol ukuran dan perilaku penampung dan kolom dengan setiap titik henti sementara. -
Pusat wadah dan isi konten Anda secara horizontal. Gunakan
.container
untuk lebar piksel responsif,.container-fluid
untukwidth: 100%
semua area pandang dan perangkat, atau wadah responsif (misalnya,.container-md
) untuk kombinasi lebar piksel dan lancar. -
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 untuk memastikan konten di kolom Anda sejajar secara visual di sisi kiri. Baris juga mendukung kelas pengubah untuk menerapkan ukuran kolom dan kelas talang secara seragam untuk mengubah jarak konten Anda. -
Kolom sangat fleksibel. Ada 12 kolom template yang tersedia per baris, memungkinkan Anda untuk membuat kombinasi elemen yang berbeda yang mencakup sejumlah kolom. Kelas kolom menunjukkan jumlah kolom template yang akan direntang (misalnya,
col-4
rentang empat).width
s diatur dalam persentase sehingga Anda selalu memiliki ukuran relatif yang sama. -
Talang juga responsif dan dapat disesuaikan. Kelas selokan tersedia di semua titik henti sementara, dengan semua ukuran yang sama dengan margin dan spasi padding kami . Ubah talang horizontal dengan
.gx-*
kelas, talang vertikal dengan.gy-*
, atau semua talang dengan.g-*
kelas..g-0
juga tersedia untuk menghapus talang. -
Variabel Sass, peta, dan mixin memberi daya pada grid. Jika Anda tidak ingin menggunakan kelas grid yang telah ditentukan sebelumnya di Bootstrap, Anda dapat menggunakan Sass sumber grid kami untuk membuat markup semantik Anda sendiri. Kami juga menyertakan beberapa properti kustom CSS untuk menggunakan variabel Sass ini untuk fleksibilitas yang lebih besar bagi Anda.
Waspadai keterbatasan dan bug di sekitar flexbox , seperti ketidakmampuan untuk menggunakan beberapa elemen HTML sebagai wadah fleksibel .
Opsi kisi
Sistem grid Bootstrap dapat beradaptasi di keenam breakpoint default, dan setiap breakpoint yang Anda sesuaikan. Enam tingkatan grid default adalah sebagai berikut:
- Ekstra kecil (xs)
- Kecil (sm)
- Sedang (md)
- Besar (lg)
- Ekstra besar (xl)
- Ekstra ekstra besar (xxl)
Seperti disebutkan di atas, masing-masing breakpoint ini memiliki wadahnya sendiri, awalan kelas yang unik, dan pengubah. Berikut adalah bagaimana grid berubah di seluruh breakpoint ini:
xs <576 piksel |
sm 576px |
md 768px |
lg 992px |
xl 1200px |
xxl 1400px |
|
---|---|---|---|---|---|---|
Wadahmax-width |
Tidak ada (otomatis) | 540px | 720px | 960px | 1140px | 1320px |
Awalan kelas | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# kolom | 12 | |||||
lebar selokan | 1.5rem (.75rem di kiri dan kanan) | |||||
Talang khusus | Ya | |||||
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 xxl
. 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>
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 enam 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>
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. Dengan .row-cols-auto
Anda dapat memberikan kolom lebar alami mereka.
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-auto">
<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);
}
}
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-3">
Level 1: .col-sm-3
</div>
<div class="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>
Kelancangan
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: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
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();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);
// Offset with margins
@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: 1.5rem !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 titik henti sementara khusus. Pastikan untuk menyetel nilai kisi di px
(bukan rem
, em
, atau %
).