Sistem grid

Contoh

Sistem grid Bootstrap menggunakan satu siri bekas, baris dan lajur untuk menyusun atur dan menjajarkan kandungan. Ia dibina dengan flexbox dan responsif sepenuhnya. Di bawah ialah contoh dan penjelasan mendalam tentang cara sistem grid disatukan.

<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 mencipta tiga lajur lebar yang sama merentas semua peranti dan ruang pandang menggunakan kelas grid kami yang dipratentukan. Lajur tersebut berpusat pada halaman dengan induk .container.

Bagaimana ia berfungsi

Memecahkannya, berikut ialah cara sistem grid disatukan:

• Grid kami menyokong enam titik putus responsif . Titik putus adalah berdasarkan min-widthpertanyaan media, bermakna ia mempengaruhi titik putus itu dan semua yang berada di atasnya (cth, .col-sm-4terpakai pada sm, md, lg, xl, dan xxl). Ini bermakna anda boleh mengawal saiz dan kelakuan bekas dan lajur mengikut setiap titik putus.

• Kontena di tengah dan padatkan kandungan anda secara mendatar. Gunakan .containeruntuk lebar piksel responsif, .container-fluiduntuk width: 100%semua port pandangan dan peranti, atau bekas responsif (cth, .container-md) untuk gabungan lebar cecair dan piksel.

• Baris ialah pembalut untuk lajur. Setiap lajur mempunyai mendatar padding(dipanggil longkang) untuk mengawal ruang antara mereka. Ini paddingkemudiannya dilawan pada baris dengan margin negatif untuk memastikan kandungan dalam lajur anda dijajarkan secara visual ke bawah sebelah kiri. Baris juga menyokong kelas pengubah suai untuk menggunakan kelas saiz lajur dan longkang secara seragam untuk menukar jarak kandungan anda.

• Lajur adalah sangat fleksibel. Terdapat 12 lajur templat yang tersedia bagi setiap baris, membolehkan anda mencipta gabungan elemen yang berbeza yang merangkumi sebarang bilangan lajur. Kelas lajur menunjukkan bilangan lajur templat untuk rentang (cth, col-4menjangkau empat). widths ditetapkan dalam peratusan supaya anda sentiasa mempunyai saiz relatif yang sama.

• Parit juga responsif dan boleh disesuaikan. Kelas longkang tersedia di semua titik putus, dengan semua saiz yang sama dengan jarak margin dan padding kami . Tukar longkang mendatar dengan .gx-*kelas, longkang menegak dengan .gy-*, atau semua longkang dengan .g-*kelas. .g-0juga tersedia untuk membuang longkang.

• Pembolehubah Sass, peta dan campuran kuasa grid. Jika anda tidak mahu menggunakan kelas grid yang dipratentukan dalam Bootstrap, anda boleh menggunakan sumber grid kami Sass untuk mencipta kelas anda sendiri dengan lebih banyak penanda semantik. Kami juga menyertakan beberapa sifat tersuai CSS untuk menggunakan pembolehubah Sass ini untuk lebih fleksibiliti untuk anda.

Berhati-hati dengan pengehadan dan pepijat di sekeliling flexbox , seperti ketidakupayaan untuk menggunakan beberapa elemen HTML sebagai bekas fleksibel .

Pilihan grid

Sistem grid Bootstrap boleh menyesuaikan diri merentasi semua enam titik putus lalai, dan mana-mana titik putus yang anda sesuaikan. Enam peringkat grid lalai adalah seperti berikut:

• Lebih kecil (xs)
• Kecil (sm)
• Sederhana (md)
• Besar (lg)
• Lebih besar (xl)
• Lebih besar lebih besar (xxl)

Seperti yang dinyatakan di atas, setiap titik putus ini mempunyai bekas sendiri, awalan kelas unik dan pengubah suai. Begini cara grid berubah merentas titik putus ini:

Lajur reka letak automatik

Gunakan kelas lajur khusus titik putus untuk saiz lajur yang mudah tanpa kelas bernombor eksplisit seperti .col-sm-6.

Sama lebar

Sebagai contoh, berikut ialah dua reka letak grid yang digunakan pada setiap peranti dan port pandangan, dari xshingga xxl. Tambahkan sebarang bilangan kelas tanpa unit untuk setiap titik putus yang anda perlukan dan setiap lajur akan mempunyai 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>

Menetapkan satu lebar lajur

Reka letak automatik untuk lajur grid flexbox juga bermakna anda boleh menetapkan lebar satu lajur dan mempunyai saiz lajur adik-beradik secara automatik di sekelilingnya. Anda boleh menggunakan kelas grid yang dipratentukan (seperti yang ditunjukkan di bawah), campuran grid atau lebar sebaris. Ambil perhatian bahawa lajur lain akan mengubah saiz tidak kira lebar lajur 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>

Kandungan lebar boleh ubah

Gunakan col-{breakpoint}-autokelas untuk saiz lajur berdasarkan lebar semula jadi kandungannya.

<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

Grid Bootstrap termasuk enam peringkat kelas yang telah ditetapkan untuk membina susun atur responsif yang kompleks. Sesuaikan saiz lajur anda pada peranti yang lebih kecil, kecil, sederhana, besar atau lebih besar mengikut cara yang anda rasa sesuai.

Semua titik putus

Untuk grid yang sama daripada peranti terkecil hingga terbesar, gunakan kelas .coldan .col-*. Tentukan kelas bernombor apabila anda memerlukan lajur bersaiz khusus; jika tidak, sila 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>

Ditindan ke mendatar

Menggunakan satu set .col-sm-*kelas, anda boleh mencipta sistem grid asas yang bermula secara bertindan dan menjadi mendatar pada titik putus 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 padan

Tidak mahu lajur anda hanya disusun dalam beberapa peringkat grid? Gunakan gabungan kelas yang berbeza untuk setiap peringkat mengikut keperluan. Lihat contoh di bawah untuk mendapatkan idea yang lebih baik tentang cara semuanya berfungsi.

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

Lajur baris

Gunakan kelas responsif .row-cols-*untuk menetapkan bilangan lajur yang paling sesuai untuk memaparkan kandungan dan reka letak anda. Manakala .col-*kelas biasa digunakan pada lajur individu (cth, .col-md-4), kelas lajur baris ditetapkan pada induk .rowsebagai lalai untuk lajur yang terkandung. Dengan .row-cols-autoanda boleh memberikan lajur lebar semula jadi mereka.

Gunakan kelas lajur baris ini untuk membuat reka letak grid asas dengan cepat atau untuk mengawal reka letak kad anda dan mengatasi apabila diperlukan di peringkat lajur.

<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 boleh menggunakan campuran Sass yang disertakan, 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 kandungan anda dengan grid lalai, tambahkan lajur baharu .rowdan set .col-sm-*lajur dalam .col-sm-*lajur sedia ada. Baris bersarang hendaklah termasuk satu set lajur yang menambah sehingga 12 atau kurang (tidak diperlukan anda menggunakan kesemua 12 lajur 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>

Sass

Apabila menggunakan fail Sass sumber Bootstrap, anda mempunyai pilihan untuk menggunakan pembolehubah dan campuran Sass untuk membuat reka letak halaman tersuai, semantik dan responsif. Kelas grid pratakrif kami menggunakan pembolehubah dan campuran yang sama ini untuk menyediakan keseluruhan suite kelas sedia untuk digunakan untuk reka letak responsif pantas.

Pembolehubah

Pembolehubah dan peta menentukan bilangan lajur, lebar longkang dan titik pertanyaan media untuk memulakan lajur terapung. Kami menggunakan ini untuk menjana kelas grid pratakrif yang didokumenkan di atas, serta untuk campuran tersuai yang disenaraikan di bawah.

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

Mixin

Campuran digunakan bersama-sama dengan pembolehubah grid untuk menjana CSS semantik untuk lajur 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 boleh mengubah suai pembolehubah kepada nilai tersuai anda sendiri, atau hanya gunakan campuran dengan nilai lalainya. Berikut ialah contoh menggunakan tetapan lalai untuk membuat reka letak dua lajur dengan jurang antara.

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

Menggunakan pembolehubah dan peta Sass grid terbina dalam kami, anda boleh menyesuaikan sepenuhnya kelas grid yang dipratentukan. Tukar bilangan peringkat, dimensi pertanyaan media dan lebar bekas—kemudian susun semula.

Lajur dan longkang

Bilangan lajur grid boleh diubah suai melalui pembolehubah Sass. $grid-columnsdigunakan untuk menjana lebar (dalam peratus) setiap lajur individu sambil $grid-gutter-widthmenetapkan lebar untuk longkang lajur.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

Peringkat grid

Melangkaui lajur itu sendiri, anda juga boleh menyesuaikan bilangan peringkat grid. Jika anda mahu hanya empat peringkat grid, anda akan mengemas kini $grid-breakpointsdan $container-max-widthskepada sesuatu seperti ini:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Apabila membuat sebarang perubahan pada pembolehubah atau peta Sass, anda perlu menyimpan perubahan anda dan menyusun semula. Melakukannya akan mengeluarkan set kelas grid pratakrif baharu untuk lebar lajur, offset dan pesanan. Utiliti keterlihatan responsif juga akan dikemas kini untuk menggunakan titik putus tersuai. Pastikan untuk menetapkan nilai grid dalam px(bukan rem, em, atau %).