Source

Eto akoj

Lo ẹrọ flexbox alagbeka ti o lagbara-akọkọ lati kọ awọn ipilẹ ti gbogbo awọn nitobi ati awọn iwọn ọpẹ si eto ọwọn mejila, awọn ipele idahun aiyipada marun, awọn oniyipada Sass ati awọn alapọpọ, ati awọn dosinni ti awọn kilasi ti a ti pinnu tẹlẹ.

Bawo ni o ṣe n ṣiṣẹ

Eto akoj Bootstrap nlo oniruuru awọn apoti, awọn ori ila, ati awọn ọwọn lati ṣeto ati mö akoonu. O ti kọ pẹlu flexbox ati pe o jẹ idahun ni kikun. Ni isalẹ jẹ apẹẹrẹ ati iwo jinlẹ ni bii akoj wa papọ.

Titun si tabi aimọ pẹlu flexbox? Ka itọsọna CSS Tricks flexbox yii fun abẹlẹ, awọn ọrọ-ọrọ, awọn itọnisọna, ati awọn snippets koodu.

Ọkan ninu awọn ọwọn mẹta

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

Apẹẹrẹ ti o wa loke ṣẹda awọn ọwọn iwọn dogba mẹta lori kekere, alabọde, nla, ati awọn ẹrọ nla ni lilo awọn kilasi akoj ti a ti yan tẹlẹ. Awọn ọwọn yẹn wa ni aarin si oju-iwe pẹlu obi .container.

Bibalẹ, eyi ni bii o ṣe n ṣiṣẹ:

Awọn apoti pese ọna lati aarin ati petele paadi awọn akoonu ti aaye rẹ. Lo .containerfun iwọn piksẹli ti o ṣe idahun tabi .container-fluidfun width: 100%kọja gbogbo wiwo ati awọn iwọn ẹrọ.
Awọn ori ila ni o wa wrappers fun awọn ọwọn. Ọwọn kọọkan ni petele padding(ti a npe ni gutter) fun iṣakoso aaye laarin wọn. Eyi paddingjẹ ki o tako lori awọn ori ila pẹlu awọn ala odi. Ni ọna yii, gbogbo akoonu ti o wa ninu awọn ọwọn rẹ ti wa ni oju ti o wa ni isalẹ apa osi.
Ni ipilẹ akoj, akoonu gbọdọ wa ni gbe laarin awọn ọwọn ati awọn ọwọn nikan le jẹ ọmọ awọn ori ila lẹsẹkẹsẹ.
Ṣeun si flexbox, awọn ọwọn akoj laisi pato kan widthyoo ṣe iṣeto ni adaṣe bi awọn ọwọn iwọn dogba. Fun apẹẹrẹ, awọn iṣẹlẹ mẹrin ti .col-smyoo kọọkan laifọwọyi jẹ 25% fife lati aaye fifọ kekere ati si oke. Wo apakan awọn ọwọn iṣeto-laifọwọyi fun awọn apẹẹrẹ diẹ sii.
Awọn kilasi ọwọn tọkasi nọmba awọn ọwọn ti o fẹ lati lo ninu 12 ti o ṣeeṣe fun ila kan. Nitorinaa, ti o ba fẹ awọn ọwọn iwọn dogba mẹta kọja, o le lo .col-4.
Awọn iwe widths ti ṣeto ni awọn ipin ogorun, nitorina wọn jẹ ito nigbagbogbo ati iwọn ni ibatan si eroja obi wọn.
Awọn ọwọn ni petele paddinglati ṣẹda awọn gọta laarin awọn ọwọn kọọkan, sibẹsibẹ, o le yọ kuro lati awọn marginori ila ati paddinglati awọn ọwọn pẹlu .no-gutterslori .row.
Lati jẹ ki awọn akoj idahun, nibẹ ni o wa marun akoj breakpoints, ọkan fun kọọkan idahun breakpoint : gbogbo breakpoints (afikun kekere), kekere, alabọde, tobi, ati afikun tobi.
Awọn aaye fifọ Grid da lori awọn ibeere media iwọn ti o kere ju, afipamo pe wọn kan si aaye fifọ kan ati gbogbo awọn ti o wa loke rẹ (fun apẹẹrẹ, .col-sm-4kan si awọn ẹrọ kekere, alabọde, nla, ati awọn ẹrọ nla, ṣugbọn kii ṣe aaye xsfifọ akọkọ).
O le lo awọn kilasi akoj ti a ti sọ tẹlẹ (bii .col-4) tabi awọn alapọpọ Sass fun isamisi atunmọ diẹ sii.

Jẹ mọ ti awọn idiwọn ati idun ni ayika flexbox , bi awọn ailagbara lati lo diẹ ninu awọn HTML eroja bi Flex awọn apoti .

Awọn aṣayan akoj

Lakoko ti Bootstrap nlo ems tabi rems fun asọye awọn titobi pupọ julọ, pxawọn s ni a lo fun awọn aaye fifọ akoj ati awọn iwọn eiyan. Eyi jẹ nitori iwọn wiwo wiwo wa ni awọn piksẹli ati pe ko yipada pẹlu iwọn fonti .

Wo bii awọn abala ti eto akoj Bootstrap ṣe n ṣiṣẹ kọja awọn ẹrọ lọpọlọpọ pẹlu tabili ọwọ.

	Afikun kekere <576px	Kekere ≥576px	Alabọde ≥768px	Nla ≥992px	Afikun nla ≥1200px
Max eiyan iwọn	Ko si (laifọwọyi)	540px	720px	960px	1140px
Ipilẹṣẹ kilasi	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# ti awọn ọwọn	12
Ibú gota	30px (15px ni ẹgbẹ kọọkan ti iwe kan)
Idurosinsin	Bẹẹni
Pipaṣẹ iwe	Bẹẹni

Awọn ọwọn iṣeto-laifọwọyi

Lo awọn kilasi ọwọn-pato-breakpoint fun iwọn awọn ọwọn ti o rọrun laisi kilasi nọmba ti o fojuhan bi .col-sm-6.

Iwọn-dogba

Fun apẹẹrẹ, nibi ni awọn ipilẹ akoj meji ti o kan gbogbo ẹrọ ati ibudo wiwo, lati xssi xl. Ṣafikun nọmba eyikeyi ti awọn kilasi-kere-kere fun aaye fifọ kọọkan ti o nilo ati gbogbo iwe yoo jẹ iwọn kanna.

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>

Dogba-iwọn olona-ila

Ṣẹda awọn ọwọn iwọn dogba ti o gun awọn laini pupọ nipa fifi sii .w-100ibi ti o fẹ ki awọn ọwọn ya si laini titun kan. Jẹ ki awọn isinmi jẹ idahun nipa dapọ .w-100pẹlu diẹ ninu awọn ohun elo ifihan idahun .

Kokoro flexbox Safari kan wa ti o ṣe idiwọ eyi lati ṣiṣẹ laisi fojuhan flex-basistabi border. Awọn agbegbe iṣẹ wa fun awọn ẹya aṣawakiri agbalagba, ṣugbọn wọn ko yẹ ki o ṣe pataki ti awọn aṣawakiri ibi-afẹde rẹ ko ba ṣubu sinu awọn ẹya 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>

Ṣiṣeto iwọn ọwọn kan

Ipilẹ-laifọwọyi fun awọn ọwọn akoj flexbox tun tumọ si pe o le ṣeto iwọn ti iwe kan ki o jẹ ki awọn ọwọn arakunrin ṣe atunṣe laifọwọyi ni ayika rẹ. O le lo awọn kilasi akoj ti a ti sọ tẹlẹ (gẹgẹbi o ṣe han ni isalẹ), awọn alapọpọ akoj, tabi awọn iwọn ila. Ṣe akiyesi pe awọn ọwọn miiran yoo tun iwọn laibikita iwọn ti iwe aarin.

1 ti 3

2 ti 3 (ti o gbooro)

3 ti 3

1 ti 3

2 ti 3 (ti o gbooro)

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>

Ayipada akoonu iwọn

Lo col-{breakpoint}-autoawọn kilasi si iwọn awọn ọwọn ti o da lori iwọn adayeba ti akoonu wọn.

1 ti 3

Ayipada akoonu iwọn

3 ti 3

1 ti 3

Ayipada akoonu iwọn

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>

Awọn kilasi idahun

Akoj Bootstrap pẹlu awọn ipele marun ti awọn kilasi ti a ti yan tẹlẹ fun kikọ awọn ipilẹ idahun idiju. Ṣe akanṣe iwọn awọn ọwọn rẹ lori afikun kekere, kekere, alabọde, nla, tabi awọn ẹrọ nla ni afikun sibẹsibẹ o rii pe o yẹ.

Gbogbo breakpoints

Fun awọn grids ti o jẹ kanna lati awọn ẹrọ ti o kere julọ si ti o tobi julọ, lo awọn .colati .col-*awọn kilasi. Pato kilasi ti o ni nọmba nigbati o nilo iwe ti o ni iwọn pataki; bibẹkọ ti, lero free lati Stick si .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>

Tolera si petele

Lilo awọn .col-sm-*kilasi kan ṣoṣo, o le ṣẹda eto akoj ipilẹ kan ti o bẹrẹ ni akopọ ati di petele ni aaye fifọ kekere ( 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>

Illa ati baramu

Ṣe o ko fẹ ki awọn ọwọn rẹ ni akopọ ni diẹ ninu awọn ipele akoj? Lo apapo awọn kilasi oriṣiriṣi fun ipele kọọkan bi o ṣe nilo. Wo apẹẹrẹ ni isalẹ fun imọran ti o dara julọ ti bii gbogbo rẹ ṣe n ṣiṣẹ.

.kol-md-8

.col-6 .col-md-4

.kól-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>

Awọn gutters

Awọn gutters le ṣe atunṣe ni idahun nipasẹ padding-padding-padding ati awọn kilasi IwUlO ala odi. Lati yi awọn gọọti pada ni ọna ti a fifun, so IwUlO ala odi kan pọ lori .rowati awọn ohun elo padding ti o baamu lori .cols. Obi .containertabi .container-fluidobi le nilo lati ṣatunṣe paapaa lati yago fun iṣan omi aifẹ, ni lilo ohun elo padding tun baamu.

Eyi ni apẹẹrẹ ti isọdi akoj Bootstrap ni aaye fifọ nla ( lg) ati loke. A ti pọ si .colpadding pẹlu .px-lg-5, tako iyẹn pẹlu .mx-lg-n5lori obi .rowati lẹhinna tunse .containermurasilẹ pẹlu .px-lg-5.

Aṣa ọwọn òwú

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

Awọn ọwọn ila

Lo awọn kilasi idahun .row-cols-*lati ṣeto nọmba awọn ọwọn ti o dara julọ fun akoonu ati ifilelẹ rẹ. Lakoko ti awọn kilasi deede .col-*kan si awọn ọwọn kọọkan (fun apẹẹrẹ, .col-md-4), awọn kilasi ori ila ti ṣeto lori obi .rowbi ọna abuja.

Lo awọn kilasi awọn ọwọn ila wọnyi lati yara ṣẹda awọn ipilẹ akoj ipilẹ tabi lati ṣakoso awọn ipalemo kaadi rẹ.

Àwọ̀n

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

Àwọ̀n

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

Àwọ̀n

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

Àwọ̀n

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

Àwọ̀n

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

O tun le lo Sass mixin ti o tẹle, 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);
  }
}

Titete

Lo awọn ohun elo titete apoti flexbox lati so awọn ọwọn ni inaro ati petele. Internet Explorer 10-11 ko ṣe atilẹyin titete inaro ti awọn ohun kan ti o rọ nigbati eiyan flex ni min-heightbi a ṣe han ni isalẹ. Wo Flexbugs #3 fun alaye diẹ sii.

Titete inaro

Ọkan ninu awọn ọwọn mẹta

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

Ọkan ninu awọn ọwọn mẹta

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

Petele titete

Ọkan ninu awọn ọwọn meji

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

Ko si gọta

Awọn gọta laarin awọn ọwọn ninu awọn kilasi akoj ti a ti sọ tẹlẹ le yọkuro pẹlu .no-gutters. Eleyi yọ awọn odi margins lati .rowati awọn petele paddinglati gbogbo lẹsẹkẹsẹ omo ọwọn.

Eyi ni koodu orisun fun ṣiṣẹda awọn aṣa wọnyi. Ṣe akiyesi pe awọn ifasilẹ awọn ọwọn jẹ dopin si awọn ọwọn ọmọ akọkọ nikan ati pe o jẹ ìfọkànsí nipasẹ yiyan abuda . Lakoko ti eyi n ṣe agbejade yiyan pato diẹ sii, fifẹ iwe tun le jẹ adani siwaju pẹlu awọn ohun elo aye aye .

Ṣe o nilo apẹrẹ eti-si-eti? Ju obi .containertabi .container-fluid.

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

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

Ni iṣe, eyi ni bii o ṣe nwo. Ṣe akiyesi pe o le tẹsiwaju lati lo eyi pẹlu gbogbo awọn kilasi akoj ti a ti sọ tẹlẹ (pẹlu awọn iwọn ọwọn, awọn ipele idahun, awọn atunto, ati diẹ sii).

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

Fidi ọwọn

Ti o ba ju awọn ọwọn 12 lọ laarin ila kan, ẹgbẹ kọọkan ti awọn ọwọn afikun yoo, bi ẹyọkan, fi ipari si laini tuntun kan.

.kól-9

.col-4
Lati 9 + 4 = 13> 12, div-jakejado 4-column yii yoo div sori laini titun kan bi ẹyọkan ti o tẹriba.

.col-6
Awọn ọwọn ti o tẹle tẹsiwaju pẹlu laini tuntun.

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

Awọn fifọ ọwọn

Pipa awọn ọwọn si laini tuntun ni flexbox nilo gige kekere kan: ṣafikun eroja kan pẹlu width: 100%nibikibi ti o fẹ lati fi ipari si awọn ọwọn rẹ si laini tuntun kan. Ni deede eyi ni a ṣe pẹlu ọpọlọpọ awọn .rows, ṣugbọn kii ṣe gbogbo ọna imuse le ṣe akọọlẹ fun eyi.

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

O tun le lo isinmi yii ni awọn aaye fifọ ni pato pẹlu awọn ohun elo ifihan idahun wa .

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

Atunse

Awọn kilasi ibere

Lo .order-awọn kilasi fun iṣakoso aṣẹ wiwo akoonu rẹ. Awọn kilasi wọnyi jẹ idahun, nitorinaa o le ṣeto ordernipasẹ aaye fifọ (fun apẹẹrẹ, .order-1.order-md-2). Pẹlu atilẹyin fun 1kọja 12gbogbo awọn ipele akoj marun.

Ni akọkọ ni DOM, ko si aṣẹ ti a lo

Keji ni DOM, pẹlu aṣẹ nla kan

Kẹta ni DOM, pẹlu aṣẹ ti 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>

Awọn idahun tun wa .order-firstati .order-lastawọn kilasi ti o yi orderohun elo pada nipa lilo order: -1ati order: 13( order: $columns + 1), lẹsẹsẹ. Awọn kilasi wọnyi tun le ni idapọ pẹlu awọn .order-*kilasi ti o ni nọmba bi o ṣe nilo.

Ni akọkọ ni DOM, paṣẹ kẹhin

Keji ni DOM, ti ko paṣẹ

Kẹta ni DOM, paṣẹ ni akọkọ

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

Awọn ọwọn aiṣedeede

O le ṣe aiṣedeede awọn ọwọn akoj ni awọn ọna meji: awọn .offset-kilasi grid idahun wa ati awọn ohun elo ala wa . Awọn kilasi akoj jẹ iwọn lati baamu awọn ọwọn lakoko ti awọn ala jẹ iwulo diẹ sii fun awọn ipalemo iyara nibiti iwọn aiṣedeede jẹ oniyipada.

Awọn kilasi aiṣedeede

Gbe awọn ọwọn si ọtun nipa lilo .offset-md-*awọn kilasi. Awọn kilasi wọnyi ṣe alekun ala osi ti iwe kan nipasẹ *awọn ọwọn. Fun apẹẹrẹ, .offset-md-4gbigbe .col-md-4lori awọn ọwọn mẹrin.

.kol-md-4

.col-md-4 .aiṣedeede-md-4

.col-md-3 .aiṣedeede-md-3

.col-md-6 .aiṣedeede-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>

Ni afikun si imukuro ọwọn ni awọn aaye fifọ idahun, o le nilo lati tun awọn aiṣedeede. Wo eyi ni iṣe ni apẹẹrẹ akoj .

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

Awọn ohun elo ala

Pẹlu gbigbe si flexbox ni v4, o le lo awọn ohun elo ala bi .mr-autolati fi ipa mu awọn ọwọn arakunrin kuro lọdọ ara wọn.

.kol-md-4

.col-md-4 .ml-laifọwọyi

.col-md-3 .ml-md-laifọwọyi

.col-laifọwọyi .mr-laifọwọyi

.col-laifọwọyi

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

Itẹle

Lati ṣe itẹ-ẹiyẹ akoonu rẹ pẹlu akoj aiyipada, ṣafikun tuntun .rowati ṣeto awọn .col-sm-*ọwọn laarin ọwọn to wa tẹlẹ .col-sm-*. Awọn ori ila ti o ni itẹ-ẹiyẹ yẹ ki o ni akojọpọ awọn ọwọn ti o fi kun si 12 tabi diẹ (ko nilo pe ki o lo gbogbo awọn ọwọn 12 ti o wa).

Ipele 1: .col-sm-9

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

Ipele 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

Nigbati o ba nlo awọn faili Sass orisun Bootstrap, o ni aṣayan ti lilo awọn oniyipada Sass ati awọn alapọpọ lati ṣẹda aṣa, atunmọ, ati awọn ipilẹ oju-iwe idahun. Awọn kilasi akoj ti a ti sọ tẹlẹ lo awọn oniyipada kanna ati awọn alapọpọ lati pese gbogbo suite ti awọn kilasi imurasilẹ-lati-lo fun awọn ipalemo idahun ni iyara.

Awọn oniyipada

Awọn oniyipada ati awọn maapu pinnu nọmba awọn ọwọn, iwọn gọta, ati aaye ibeere media nibiti lati bẹrẹ awọn ọwọn lilefoofo. A lo iwọnyi lati ṣe ipilẹṣẹ awọn kilasi akoj ti a ti sọ tẹlẹ ti o ni akọsilẹ loke, ati fun awọn apopọ aṣa ti a ṣe akojọ si isalẹ.

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

Mixins

Awọn Mixins ni a lo ni apapo pẹlu awọn oniyipada akoj lati ṣe ipilẹṣẹ CSS atunmọ fun awọn ọwọn akoj kọọkan.

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

Lilo apẹẹrẹ

O le ṣe atunṣe awọn oniyipada si awọn iye aṣa tirẹ, tabi lo awọn alapọpọ pẹlu awọn iye aiyipada wọn. Eyi ni apẹẹrẹ ti lilo awọn eto aiyipada lati ṣẹda ifilelẹ iwe-meji pẹlu aafo laarin.

.example-container {
  width: 800px;
  @include make-container();
}

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

Akọkọ akoonu

Akoonu keji

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

Ṣiṣe akanṣe akoj

Lilo awọn oniyipada Sass akoj ti a ṣe sinu ati awọn maapu, o ṣee ṣe lati ṣe akanṣe awọn kilasi akoj ti a ti yan tẹlẹ. Yi nọmba awọn ipele pada, awọn iwọn ibeere media, ati awọn ibú apoti—lẹhinna ṣajọpọ.

Awọn ọwọn ati awọn gutters

Nọmba awọn ọwọn akoj le ṣe atunṣe nipasẹ awọn oniyipada Sass. $grid-columnsti wa ni lo lati se ina awọn widths (ni ogorun) ti kọọkan kọọkan iwe nigba ti $grid-gutter-widthṣeto awọn iwọn fun awọn ọwọn gọta.

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

Awọn ipele akoj

Lilọ kọja awọn ọwọn funrararẹ, o tun le ṣe akanṣe nọmba awọn ipele akoj. Ti o ba fẹ awọn ipele grid mẹrin nikan, iwọ yoo mu imudojuiwọn naa $grid-breakpointsati $container-max-widthssi nkan bii eyi:

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

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

Nigbati o ba n ṣe awọn ayipada eyikeyi si awọn oniyipada Sass tabi awọn maapu, iwọ yoo nilo lati ṣafipamọ awọn ayipada rẹ ki o tun ṣajọ. Ṣiṣe bẹ yoo ṣe agbejade akojọpọ iyasọtọ tuntun ti awọn kilasi akoj ti a ti sọ tẹlẹ fun awọn iwọn ọwọn, awọn aiṣedeede, ati pipaṣẹ. Awọn ohun elo hihan idahun yoo tun ṣe imudojuiwọn lati lo awọn aaye fifọ aṣa. Rii daju pe o ṣeto awọn iye akoj sinu px(kii ṣe rem, em, tabi %).