Sistem grid

Gunakan grid flexbox pertama mudah alih kami yang berkuasa untuk membina reka letak semua bentuk dan saiz terima kasih kepada sistem dua belas lajur, lima peringkat lalai responsif, pembolehubah dan campuran Sass serta berdozen kelas yang dipratentukan.

Bagaimana ia berfungsi

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 pandangan yang mendalam tentang cara grid disatukan.

Baru atau tidak biasa dengan flexbox? Baca panduan flexbox Tricks CSS ini untuk latar belakang, istilah, garis panduan dan coretan kod.

Satu daripada tiga lajur

<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 mencipta tiga lajur yang sama lebar pada peranti kecil, sederhana, besar dan lebih besar menggunakan kelas grid kami yang telah ditetapkan. Lajur tersebut berpusat pada halaman dengan induk .container.

Memecahkannya, berikut ialah cara ia berfungsi:

Bekas menyediakan cara untuk memusatkan dan mendatar kandungan tapak anda. Gunakan .containeruntuk lebar piksel responsif atau .container-fluiduntuk width: 100%semua port pandangan dan saiz peranti.
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. Dengan cara ini, semua kandungan dalam lajur anda dijajarkan secara visual ke bawah sebelah kiri.
Dalam susun atur grid, kandungan mesti diletakkan dalam lajur dan hanya lajur yang boleh menjadi anak langsung baris.
Terima kasih kepada flexbox, lajur grid tanpa dinyatakan widthsecara automatik akan susun atur sebagai lajur lebar yang sama. Sebagai contoh, empat kejadian .col-smsetiap satu secara automatik akan menjadi 25% lebar dari titik putus kecil dan ke atas. Lihat bahagian lajur reka letak automatik untuk lebih banyak contoh.
Kelas lajur menunjukkan bilangan lajur yang anda ingin gunakan daripada kemungkinan 12 setiap baris. Jadi, jika anda mahukan tiga lajur yang sama lebar merentas, anda boleh menggunakan .col-4.
Lajur widths ditetapkan dalam peratusan, jadi ia sentiasa cair dan bersaiz berbanding dengan elemen induknya.
Lajur mempunyai mendatar paddinguntuk membuat longkang antara lajur individu, walau bagaimanapun, anda boleh mengalih keluar margindaripada baris dan paddingdari lajur dengan .no-gutterspada .row.
Untuk menjadikan grid responsif, terdapat lima titik putus grid, satu untuk setiap titik putus responsif : semua titik putus (lebih kecil), kecil, sederhana, besar dan lebih besar.
Titik putus grid adalah berdasarkan pertanyaan media lebar minimum, bermakna ia digunakan pada satu titik putus itu dan semua yang berada di atasnya (cth, .col-sm-4digunakan pada peranti kecil, sederhana, besar dan lebih besar, tetapi bukan xstitik putus pertama).
Anda boleh menggunakan kelas grid yang dipratentukan (seperti .col-4) atau campuran Sass untuk lebih banyak penanda semantik.

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

Pilihan grid

Walaupun Bootstrap menggunakan ems atau rems untuk menentukan kebanyakan saiz, pxs digunakan untuk titik putus grid dan lebar bekas. Ini kerana lebar port pandangan adalah dalam piksel dan tidak berubah dengan saiz fon .

Lihat cara aspek sistem grid Bootstrap berfungsi merentas berbilang peranti dengan jadual yang berguna.

	Lebih kecil <576px	Kecil ≥576px	Sederhana ≥768px	Besar ≥992px	Lebih besar ≥1200px
Lebar bekas maksimum	Tiada (auto)	540px	720px	960px	1140px
Awalan kelas	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# lajur	12
Lebar longkang	30px (15px pada setiap sisi lajur)
Nestable	ya
Susunan lajur	ya

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 xl. Tambahkan sebarang bilangan kelas tanpa unit untuk setiap titik putus yang anda perlukan dan setiap lajur akan mempunyai lebar yang sama.

1 daripada 2

2 daripada 2

1 daripada 3

2 daripada 3

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

Berbilang baris lebar sama

Buat lajur sama lebar yang menjangkau berbilang baris dengan memasukkan .w-100lajur tempat anda mahu lajur dipecahkan ke baris baharu. Jadikan rehat responsif dengan mencampurkan .w-100dengan beberapa utiliti paparan responsif .

Terdapat pepijat Safari flexbox yang menghalang ini daripada berfungsi tanpa pepijat flex-basisatau border. Terdapat penyelesaian untuk versi penyemak imbas yang lebih lama, tetapi ia tidak sepatutnya diperlukan jika penyemak imbas sasaran anda tidak termasuk dalam versi buggy.

kol

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

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.

1 daripada 3

2 daripada 3 (lebih luas)

3 daripada 3

1 daripada 3

2 daripada 3 (lebih luas)

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

Kandungan lebar boleh ubah

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

1 daripada 3

Kandungan lebar boleh ubah

3 daripada 3

1 daripada 3

Kandungan lebar boleh ubah

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

Grid Bootstrap termasuk lima 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.

kol

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>

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

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

.col-md-8

.col-6 .col-md-4

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

longkang

Parit boleh dilaraskan secara responsif dengan pelapik khusus titik putus dan kelas utiliti margin negatif. Untuk menukar longkang dalam baris tertentu, pasangkan utiliti margin negatif pada .rowdan padanan utiliti pelapik pada .cols. Induk .containeratau .container-fluidinduk mungkin perlu dilaraskan juga untuk mengelakkan limpahan yang tidak diingini, menggunakan utiliti pelapik yang sepadan sekali lagi.

Berikut ialah contoh menyesuaikan grid Bootstrap pada lgtitik putus besar ( ) dan ke atas. Kami telah meningkatkan .colpelapik dengan .px-lg-5, mengimbanginya dengan .mx-lg-n5pada induk .rowdan kemudian melaraskan .containerpembungkus dengan .px-lg-5.

Pelapik lajur tersuai

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

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

Gunakan kelas lajur baris ini untuk membuat reka letak grid asas dengan cepat atau mengawal reka letak kad anda.

Kolum

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

Kolum

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

Kolum

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

Kolum

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

Kolum

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

Penjajaran

Gunakan utiliti penjajaran flexbox untuk menjajarkan lajur secara menegak dan mendatar. Internet Explorer 10-11 tidak menyokong penjajaran menegak item fleksibel apabila bekas fleksibel mempunyai min-heightseperti yang ditunjukkan di bawah. Lihat Flexbugs #3 untuk butiran lanjut.

Penjajaran menegak

Satu daripada tiga lajur

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

Satu daripada tiga lajur

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

Penjajaran mendatar

Satu daripada dua lajur

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

Tiada longkang

Parit antara lajur dalam kelas grid kami yang telah ditetapkan boleh dialihkan dengan .no-gutters. Ini mengalih keluar s negatif margindaripada .rowdan mendatar paddingdaripada semua lajur kanak-kanak segera.

Berikut ialah kod sumber untuk mencipta gaya ini. Ambil perhatian bahawa penggantian lajur diskop kepada hanya lajur anak pertama dan disasarkan melalui pemilih atribut . Walaupun ini menjana pemilih yang lebih khusus, pelapik lajur masih boleh disesuaikan lagi dengan utiliti jarak .

Perlukan reka bentuk tepi ke tepi? Gugurkan ibu bapa .containeratau .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Dalam amalan, inilah rupanya. Harap maklum bahawa anda boleh terus menggunakan ini dengan semua kelas grid pratakrif lain (termasuk lebar lajur, peringkat responsif, susunan semula dan banyak lagi).

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

Pembalut lajur

Jika lebih daripada 12 lajur diletakkan dalam satu baris, setiap kumpulan lajur tambahan akan, sebagai satu unit, membalut pada baris baharu.

.col-9

.col-4
Sejak 9 + 4 = 13 > 12, div lebar 4 lajur ini akan dibalut pada baris baharu sebagai satu unit bersebelahan.

.col-6
Lajur berikutnya diteruskan di sepanjang baris baharu.

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

Pecah lajur

Memecahkan lajur kepada baris baharu dalam flexbox memerlukan penggodaman kecil: tambah elemen dengan mana- width: 100%mana sahaja anda mahu membungkus lajur anda ke baris baharu. Biasanya ini dicapai dengan berbilang .rows, tetapi tidak setiap kaedah pelaksanaan boleh mengambil kira 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 boleh menggunakan rehat ini pada titik putus tertentu dengan utiliti paparan 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>

Menyusun semula

Memesan kelas

Gunakan .order-kelas untuk mengawal susunan visual kandungan anda. Kelas ini responsif, jadi anda boleh menetapkan ordertitik putus mengikut (cth, .order-1.order-md-2). Termasuk sokongan untuk 1melalui 12semua lima peringkat grid.

Pertama dalam DOM, tiada pesanan digunakan

Kedua dalam DOM, dengan susunan yang lebih besar

Ketiga dalam DOM, dengan susunan 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>

Terdapat juga kelas responsif .order-firstdan .order-lastyang menukar orderelemen dengan menggunakan order: -1dan order: 13( order: $columns + 1), masing-masing. Kelas ini juga boleh dicampur dengan .order-*kelas bernombor mengikut keperluan.

Pertama di DOM, dipesan terakhir

Kedua dalam DOM, tidak tersusun

Ketiga dalam DOM, dipesan dahulu

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

Anda boleh mengimbangi lajur grid dalam dua cara: .offset-kelas grid responsif kami dan utiliti margin kami . Kelas grid bersaiz untuk memadankan lajur manakala margin lebih berguna untuk susun atur pantas dengan lebar offset berubah-ubah.

Kelas mengimbangi

Alihkan lajur ke kanan menggunakan .offset-md-*kelas. Kelas ini meningkatkan margin kiri lajur dengan *lajur. Sebagai contoh, .offset-md-4bergerak .col-md-4ke atas empat lajur.

.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 mengosongkan lajur pada titik putus responsif, anda mungkin perlu menetapkan semula offset. Lihat ini dalam tindakan 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>

Utiliti margin

Dengan beralih ke flexbox dalam v4, anda boleh menggunakan utiliti margin seperti .mr-automemaksa lajur adik-beradik menjauhi 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 kandungan anda dengan grid lalai, tambahkan lajur baharu .rowdan set .col-sm-*lajur dalam .col-sm-*lajur sedia ada. Baris bersarang hendaklah mengandungi satu set lajur yang menambah sehingga 12 atau kurang (tidak diperlukan anda menggunakan kesemua 12 lajur yang tersedia).

Tahap 1: .col-sm-9

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

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

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

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

Kandungan utama

Kandungan 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 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: 30px !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 %).