in English

Sistim grid

Anggo grid flexbox munggaran mobile anu kuat pikeun ngawangun perenah tina sagala bentuk sareng ukuran berkat sistem dua belas kolom, lima tingkatan responsif standar, variabel Sass sareng campuran, sareng puluhan kelas anu tos siap.

Kumaha gawéna

Sistem grid Bootstrap ngagunakeun runtuyan wadah, baris, jeung kolom pikeun perenah jeung align eusi. Éta diwangun ku flexbox sareng pinuh responsif. Di handap ieu conto na katingal di-jero kumaha grid datangna babarengan.

Anyar atawa teu wawuh jeung flexbox? Baca ieu CSS Trik flexbox pituduh pikeun latar tukang, terminologi, tungtunan, sarta snippét kode.

Salah sahiji tilu 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>

Conto di luhur nyiptakeun tilu kolom lebar anu sami dina alat anu alit, sedeng, ageung, sareng langkung ageung ngagunakeun kelas grid anu tos disetel. Kolom-kolom éta dipuseurkeun dina halaman sareng indungna .container.

Ngarecahna, ieu cara gawéna:

Wadah nyadiakeun sarana pikeun puseur jeung horisontal Pad eusi situs anjeun. Anggo .containerpikeun lebar piksel responsif atanapi .container-fluidkanggo width: 100%sadaya ukuran viewport sareng alat.
Baris mangrupakeun wrappers pikeun kolom. Unggal kolom boga horizontal padding(disebut talang a) pikeun ngadalikeun spasi antara aranjeunna. Ieu paddinglajeng counteracted dina barisan kalawan margins négatip. Ku cara ieu, sadaya eusi dina kolom anjeun sacara visual dijajarkeun di sisi kénca.
Dina perenah grid, eusi kudu disimpen dina kolom sarta ngan kolom bisa jadi barudak langsung tina barisan.
Hatur nuhun kana flexbox, kolom grid tanpa dieusian widthbakal otomatis perenah salaku kolom lebar sarua. Contona, opat instansi .col-smunggal bakal otomatis jadi 25% lega ti breakpoint leutik jeung up. Tingali bagian kolom perenah otomatis pikeun conto langkung seueur.
Kelas kolom nunjukkeun jumlah kolom anu anjeun hoyong dianggo tina kamungkinan 12 per baris. Janten, upami anjeun hoyong tilu kolom lebar anu sami, anjeun tiasa nganggo .col-4.
Kolom widths diatur dina persentase, ku kituna aranjeunna salawasna cair sareng ukuranana relatif ka unsur indungna.
Kolom gaduh horisontal paddingpikeun nyiptakeun talang antara kolom individu, kumaha ogé, anjeun tiasa ngahapus margintina barisan sareng paddingtina kolom kalayan .no-guttersdina .row.
Pikeun nyieun grid responsif, aya lima breakpoints grid, hiji pikeun tiap breakpoint responsif : sakabeh breakpoints (ekstra leutik), leutik, sedeng, badag, jeung tambahan badag.
Breakpoints grid dumasar kana pamundut média rubak minimum, hartina aranjeunna dilarapkeun ka hiji breakpoint jeung sakabeh nu di luhur eta (misalna .col-sm-4lumaku pikeun leutik, sedeng, badag, jeung alat tambahan badag, tapi lain xsbreakpoint munggaran).
Anjeun tiasa nganggo kelas grid anu tos siapkeun (sapertos .col-4) atanapi campuran Sass pikeun markup semantik langkung.

Waspada kana watesan sareng bug di sabudeureun flexbox , sapertos henteu mampuh ngagunakeun sababaraha elemen HTML salaku wadah fleksibel .

Pilihan grid

Sedengkeun Bootstrap ngagunakeun ems atawa rems pikeun nangtukeun paling ukuran, pxs dipaké pikeun breakpoints grid jeung lebar wadahna. Ieu kusabab lebar viewport aya dina piksel sareng henteu robih sareng ukuran font .

Tingali kumaha aspék sistem grid Bootstrap tiasa dianggo dina sababaraha alat anu nganggo méja anu praktis.

	Ekstra leutik <576px	Leutik ≥576px	Sedeng ≥768px	Badag ≥992px	Ekstra badag ≥1200px
lebar wadahna Max	Euweuh (otomatis)	540px	720px	960px	1140px
Awalan kelas	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# kolom	12
Lebar talang	30px (15px dina unggal sisi kolom)
Nestable	Sumuhun
Susunan kolom	Sumuhun

Kolom perenah otomatis

Anggo kelas kolom khusus breakpoint pikeun ukuran kolom anu gampang tanpa kelas wilangan anu eksplisit sapertos .col-sm-6.

Sarua-lebar

Contona, di dieu aya dua layouts grid nu dilarapkeun ka unggal alat jeung viewport, ti xska xl. Tambahkeun sajumlah kelas unit-kurang pikeun tiap breakpoint nu peryogi tur unggal kolom bakal lebar sarua.

1 ti 2

2 ti 2

1 ti 3

2 ti 3

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

Sarua-lebar multi-garis

Jieun kolom sarua-lebar nu bentang sababaraha garis ku inserting a .w-100dimana rék kolom megatkeun kana garis anyar. Jieun istirahat responsif ku nyampur .w-100sareng sababaraha utilitas tampilan responsif .

Aya kutu Safari flexbox anu nyegah ieu tiasa dianggo tanpa eksplisit flex-basisatanapi border. Aya workarounds pikeun versi browser heubeul, tapi maranéhna teu kudu diperlukeun lamun browser target Anjeun teu digolongkeun kana 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>

Nyetel hiji lebar kolom

Layout otomatis pikeun kolom grid flexbox ogé hartosna anjeun tiasa nyetél lebar hiji kolom sareng gaduh kolom duduluran sacara otomatis ngatur ukuran di sakurilingna. Anjeun tiasa nganggo kelas grid anu tos disetel (sapertos anu dipidangkeun di handap), campuran grid, atanapi lebar inline. Catet yén kolom anu sanés bakal ngarobih ukuran henteu paduli lebar kolom tengah.

1 ti 3

2 ti 3 (leuwih lega)

3 ti 3

1 ti 3

2 ti 3 (leuwih lega)

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

Eusi lebar variabel

Anggo col-{breakpoint}-autokelas pikeun ukuran kolom dumasar kana lebar alami eusina.

1 ti 3

Eusi lebar variabel

3 ti 3

1 ti 3

Eusi lebar variabel

3 ti 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 kalebet lima tingkatan kelas anu tos siap pikeun ngawangun perenah responsif anu kompleks. Sesuaikeun ukuran kolom anjeun dina alat anu langkung alit, alit, sedeng, ageung, atanapi langkung ageung kumaha waé anu anjeun pikahoyong.

Kabéh breakpoints

Pikeun grids anu sarua ti pangleutikna alat ka nu panggedéna, make .coljeung .col-*kelas. Sebutkeun kelas wilanganana nalika anjeun peryogi kolom ukuran khusus; disebutkeun, ngarasa Luncat ka lengket .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 ka horizontal

Ngagunakeun set tunggal .col-sm-*kelas, Anjeun bisa nyieun sistem grid dasar nu dimimitian kaluar tumpuk tur jadi horizontal di breakpoint leutik ( 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 jeung patandingan

Naha anjeun henteu hoyong kolom anjeun ngan saukur tumpukan dina sababaraha tingkatan grid? Anggo kombinasi kelas anu béda pikeun tiap tingkatan upami diperyogikeun. Tingali conto di handap pikeun ide anu langkung saé kumaha éta sadayana jalan.

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

talang

Talang tiasa disaluyukeun sacara responsif ku padding khusus breakpoint sareng kelas utiliti margin négatip. Pikeun ngarobah talang dina baris dibikeun, masangkeun utilitas margin négatip on .rowna cocog padding Utiliti on .cols. The .containeratawa .container-fluidindungna bisa jadi kudu disaluyukeun teuing pikeun nyegah overflow nu teu dihoyongkeun, ngagunakeun deui cocog utilitas padding.

Ieu conto ngaluyukeun kisi Bootstrap dina titik putus ageung ( lg) sareng di luhur. Kami geus ngaronjat .colpadding kalawan .px-lg-5, counteracted yén kalawan .mx-lg-n5on indungna .rowlajeng disaluyukeun .containerwrapper kalawan .px-lg-5.

Padding kolom custom

<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

Anggo .row-cols-*kelas responsif pikeun gancang ngeset jumlah kolom anu paling hadé ngajantenkeun eusi sareng perenah anjeun. Padahal .col-*kelas normal dilarapkeun ka kolom individu (misalna, .col-md-4), kelas kolom baris diatur dina indungna .rowsalaku potong kompas.

Anggo kelas kolom baris ieu pikeun gancang nyieun perenah grid dasar atawa ngadalikeun perenah kartu anjeun.

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>

Anjeun ogé tiasa nganggo campuran Sass anu dibarengan 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);
  }
}

Ngajajar

Paké flexbox alignment utiliti pikeun vertikal sarta horizontal align kolom. Internet Explorer 10-11 teu ngarojong alignment nangtung item flex lamun wadahna flex a min-heightsakumaha ditémbongkeun di handap ieu. Tempo Flexbugs #3 pikeun leuwih rinci.

alignment nangtung

Salah sahiji tilu 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 sahiji tilu 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>

alignment horizontal

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

Taya talang

The talang antara kolom dina kelas grid tos siap kami bisa dihapus kalawan .no-gutters. Ieu ngaluarkeun margins négatip tina .rowjeung horizontal paddingti sakabeh kolom barudak saharita.

Ieu kodeu sumber pikeun nyiptakeun gaya ieu. Catet yén overrides kolom diwengku ukur ka kolom barudak munggaran sareng ditargetkeun ku pamilih atribut . Sanaos ieu ngahasilkeun pamilih anu langkung spésifik, padding kolom masih tiasa disaluyukeun deui sareng utilitas jarak .

Peryogi desain ujung-ka-ujung? Leupaskeun kolot .containeratawa .container-fluid.

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

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

Dina prakna, ieu kumaha rupana. Catet yén anjeun tiasa teras-terasan ngagunakeun ieu sareng sadaya kelas grid anu tos siapkeun (kalebet lebar kolom, tingkatan responsif, susunan ulang, sareng seueur deui).

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

Bungkus kolom

Lamun leuwih ti 12 kolom disimpen dina hiji baris, unggal grup kolom tambahan bakal, salaku hiji unit, mungkus kana garis anyar.

.col-9

.col-4
Kusabab 9 + 4 = 13 > 12, div 4-kolom-lega ieu bakal dibungkus kana garis anyar salaku hiji Unit contiguous.

.col-6
kolom saterusna nuluykeun sapanjang garis anyar.

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

Kolom ngarecah

Megatkeun kolom ka garis anyar dina flexbox merlukeun hack leutik: tambahkeun hiji unsur jeung width: 100%dimana wae Anjeun hoyong mungkus kolom anjeun ka garis anyar. Biasana ieu dilakonan ku sababaraha .rows, tapi teu unggal palaksanaan métode bisa akun pikeun ieu.

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

Anjeun ogé tiasa nerapkeun istirahat ieu dina titik putus khusus sareng 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>

Susunan deui

Mesen kelas

Paké .order-kelas pikeun ngadalikeun urutan visual eusi Anjeun. Kelas ieu responsif, ku kituna anjeun tiasa nyetél orderku breakpoint (contona, .order-1.order-md-2). Ngawengku pangrojong pikeun 1ngalangkungan 12sadaya lima tingkatan grid.

Kahiji di DOM, euweuh urutan dilarapkeun

Kadua dina DOM, kalayan urutan anu langkung ageung

Katilu dina DOM, kalayan 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>

Aya ogé kelas responsif .order-firstsareng .order-lastanu ngarobih orderunsur ku cara nerapkeun order: -1sareng order: 13( order: $columns + 1), masing-masing. Kelas-kelas ieu ogé tiasa dicampurkeun sareng .order-*kelas anu wilanganana upami diperyogikeun.

Kahiji di DOM, maréntahkeun panungtungan

Kadua di DOM, unordered

Katilu di DOM, maréntahkeun munggaran

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

Ngimbangkeun kolom

Anjeun tiasa ngimbangan kolom grid ku dua cara: .offset-kelas grid responsif kami sareng utilitas margin kami . Kelas grid ukuranana cocog kolom bari margins leuwih mangpaat pikeun layouts gancang dimana lebar offset nyaeta variabel.

kelas offset

Pindahkeun kolom ka katuhu nganggo .offset-md-*kelas. Kelas ieu ningkatkeun margin kénca kolom ku *kolom. Contona, .offset-md-4ngalir .col-md-4ngaliwatan opat 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>

Salian ngabersihan kolom dina titik putus responsif, anjeun panginten kedah ngareset offset. Tempo ieu aksi dina conto 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

Kalayan pindah ka flexbox di v4, anjeun tiasa nganggo utilitas margin sapertos .mr-automaksakeun kolom duduluran ti hiji anu sanés.

.col-md-4

.col-md-4 .ml-otomatis

.col-md-3 .ml-md-otomatis

.col-otomatis .mr-otomatis

.col-otomatis

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

Nyarang

Pikeun nyarang eusi anjeun sareng grid standar, tambahkeun kolom anyar .rowsareng set dina .col-sm-*kolom anu tos aya .col-sm-*. Baris Nested kedah ngawengku sakumpulan kolom nu nambahan nepi ka 12 atawa leuwih saeutik (teu diperlukeun nu make sakabeh 12 kolom sadia).

Tingkat 1: .col-sm-9

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

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

Sass mixins

Nalika nganggo file Sass sumber Bootstrap, anjeun gaduh pilihan ngagunakeun variabel Sass sareng mixin pikeun nyiptakeun perenah halaman khusus, semantik, sareng responsif. Kelas grid tos siap kami nganggo ieu variabel sarua jeung mixins nyadiakeun sakabeh suite kelas siap pake pikeun layouts responsif gancang.

Variabel

Variabel sareng peta nangtukeun jumlah kolom, lebar talang, sareng titik query media dimana ngawitan kolom ngambang. Kami nganggo ieu pikeun ngahasilkeun kelas grid anu tos siap didokumentasikeun di luhur, ogé pikeun campuran khusus anu didaptarkeun di handap.

$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

Mixins dipaké ditéang jeung variabel grid keur ngahasilkeun CSS semantis pikeun 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);

Conto pamakéan

Anjeun tiasa ngarobih variabel kana nilai khusus anjeun, atanapi ngan ukur nganggo mixin kalayan nilai standarna. Ieu conto ngagunakeun setélan standar pikeun nyieun tata perenah dua kolom kalayan sela 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);
  }
}

eusi utama

eusi sékundér

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

Ngaropea grid

Nganggo variabel sareng peta Sass grid anu diwangun, anjeun tiasa ngarobih kelas grid anu tos siap. Robah jumlah undakan, dimensi query media, sareng lebar wadahna-teras kompilkeun deui.

Kolom jeung talang

Jumlah kolom grid bisa dirobah via variabel Sass. $grid-columnsdipaké pikeun ngahasilkeun lebar (dina persen) unggal kolom individu bari $grid-gutter-widthsusunan lebar pikeun talang kolom.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Tiers grid

Pindah saluareun kolom sorangan, anjeun ogé tiasa ngaropea jumlah tiers grid. Upami anjeun ngan ukur hoyong opat undakan grid, anjeun badé ngapdet $grid-breakpointssareng $container-max-widthska anu sapertos kieu:

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

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

Nalika ngalakukeun parobahan naon waé kana variabel atanapi peta Sass, anjeun kedah nyimpen parobihan anjeun sareng nyusun ulang. Lakukeun kitu bakal ngahasilkeun set anyar kelas grid tos siap pikeun lebar kolom, offsets, sarta susunan. Utiliti pisibilitas responsif ogé bakal diénggalan pikeun nganggo titik putus khusus. Pastikeun pikeun ngeset nilai grid dina px(sanes rem, em, atawa %).