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.

Salah satu dari tiga kolom

<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 .containeruntuk lebar piksel responsif atau .container-fluiduntuk width: 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. Ini paddingkemudian 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 widthakan secara otomatis ditata sebagai kolom dengan lebar yang sama. Misalnya, empat instance .col-smmasing-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 widths diatur dalam persentase, sehingga selalu cair dan berukuran relatif terhadap elemen induknya.
Kolom memiliki horizontal paddinguntuk membuat talang di antara kolom individual, namun, Anda dapat menghapus margindari baris dan paddingdari kolom dengan .no-guttersdi .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-4berlaku untuk perangkat kecil, sedang, besar, dan ekstra besar, tetapi bukan titik xshenti 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 ems atau rems untuk mendefinisikan sebagian besar ukuran, pxs 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 xshingga xl. Tambahkan sejumlah kelas tanpa unit untuk setiap breakpoint yang Anda butuhkan dan setiap kolom akan memiliki lebar yang sama.

1 dari 2

2 dari 2

1 dari 3

2 dari 3

3 dari 3

<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-100tempat yang Anda inginkan untuk memisahkan kolom ke baris baru. Jadikan jeda responsif dengan mencampurkan .w-100beberapa utilitas tampilan responsif .

Ada bug Safari flexbox yang mencegah ini bekerja tanpa eksplisit flex-basisatau border. Ada solusi untuk versi browser yang lebih lama, tetapi seharusnya tidak diperlukan jika browser target Anda tidak termasuk dalam versi buggy.

col

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

1 dari 3

2 dari 3 (lebih lebar)

3 dari 3

1 dari 3

2 dari 3 (lebih lebar)

3 dari 3

<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}-autokelas untuk mengukur kolom berdasarkan lebar alami kontennya.

1 dari 3

Konten lebar variabel

3 dari 3

1 dari 3

Konten lebar variabel

3 dari 3

<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 .coland .col-*. Tentukan kelas bernomor saat Anda membutuhkan kolom berukuran khusus; jika tidak, jangan ragu untuk tetap berpegang pada .col.

col

col-8

col-4

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

col-sm-8

col-sm-4

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

.col-md-8

.col-6 .col-md-4

.kol-6

<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 .rowdan utilitas padding yang cocok pada .cols. Orang tua .containeratau .container-fluidmungkin perlu disesuaikan juga untuk menghindari luapan yang tidak diinginkan, menggunakan lagi utilitas padding yang cocok.

Berikut adalah contoh penyesuaian grid Bootstrap pada lgbreakpoint besar ( ) ke atas. Kami telah meningkatkan .colpadding dengan .px-lg-5, menetralkannya dengan .mx-lg-n5pada induknya .rowdan kemudian menyesuaikan .containerpembungkusnya dengan .px-lg-5.

Padding kolom khusus

<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 .rowsebagai jalan pintas.

Gunakan kelas kolom baris ini untuk membuat tata letak kisi dasar dengan cepat atau untuk mengontrol tata letak kartu Anda.

Kolom

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

Kolom

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

Kolom

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

Kolom

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

Kolom

<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-heightseperti yang ditunjukkan di bawah ini. Lihat Flexbugs #3 untuk detail selengkapnya.

Perataan vertikal

Salah satu dari tiga kolom

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

Salah satu dari tiga kolom

<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

Salah satu dari dua kolom

<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 margins negatif dari .rowdan horizontal paddingdari 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 .containeratau .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).

.col-sm-6 .col-md-8

.col-6 .col-md-4

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

.col-9

.col-4
Sejak 9 + 4 = 13 > 12, div lebar 4-kolom ini dibungkus ke baris baru sebagai satu unit yang berdekatan.

.col-6
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 &gt; 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 .rows, tetapi tidak setiap metode implementasi dapat menjelaskan hal ini.

.col-6 .col-sm-3

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

.col-6 .col-sm-4

<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 orderbreakpoint berdasarkan (mis., .order-1.order-md-2). Termasuk dukungan untuk 1melalui 12semua lima tingkatan grid.

Pertama di DOM, tidak ada pesanan yang diterapkan

Kedua di DOM, dengan pesanan yang lebih besar

Ketiga di DOM, dengan urutan 1

<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-firstdan .order-lastyang mengubah orderelemen dengan menerapkan order: -1dan order: 13( order: $columns + 1), masing-masing. Kelas-kelas ini juga dapat dicampur dengan .order-*kelas-kelas bernomor sesuai kebutuhan.

Pertama di DOM, dipesan terakhir

Kedua di DOM, tidak berurutan

Ketiga di DOM, dipesan dulu

<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-4bergerak .col-md-4di atas empat kolom.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

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

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<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-automemaksa kolom saudara menjauh satu sama lain.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<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 .rowdan 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).

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

<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);
  }
}

Isi utama

Konten sekunder

<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-columnsdigunakan untuk menghasilkan lebar (dalam persen) masing-masing kolom sambil $grid-gutter-widthmengatur 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-breakpointsdan $container-max-widthsmenjadi 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 %).