Sistem jaringan

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-widthkueri media, artinya titik henti tersebut memengaruhi titik henti sementara itu dan semua yang ada di atasnya (misalnya, .col-sm-4berlaku untuk sm, md, lg, xl, dan xxl). 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 .containeruntuk lebar piksel responsif, .container-fluiduntuk width: 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. Ini paddingkemudian 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-4rentang empat). widths 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-0juga 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:

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 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}-autokelas 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 .coland .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 kelas normal .col-*berlaku untuk masing-masing kolom (misalnya, .col-md-4), kelas kolom baris ditetapkan pada induk .rowsebagai default untuk kolom yang ditampung. Dengan .row-cols-autoAnda 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 dan menggantinya saat diperlukan di tingkat 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>

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

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">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 .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).

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

// 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-columnsdigunakan untuk menghasilkan lebar (dalam persen) masing-masing kolom sambil $grid-gutter-widthmengatur 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-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 titik henti sementara khusus. Pastikan untuk menyetel nilai kisi di px(bukan rem, em, atau %).