Source

Endlelo ra gridi

Tirhisa giridi ya hina ya matimba ya mobile-first flexbox ku aka swivumbeko swa swivumbeko hinkwaswo na vukulu hi ku khensa sisiteme ya khume mbirhi wa tikholomu, ntlhanu wa swiyenge swa ku hlamula swa ntolovelo, swilo leswi cinca-cincaka swa Sass na mixins, na makume ya titlilasi leti hlamuseriweke ka ha ri emahlweni.

Ndlela leyi swi tirhaka ha yona

Sisiteme ya gridi ya Bootstrap yi tirhisa nxaxamelo wa swikhomela-ndhawu, tilayini, na tikholomu ku layout na ku ringanisa swilo leswi nga endzeni. Yi akiwile hi flexbox naswona yi hlamula hi ku helela. Laha hansi ku na xikombiso na ku languta hi vuenti eka ndlela leyi gridi yi hlanganaka ha yona.

Xana u ha ku sungula kumbe u nga yi tolovelanga flexbox? Hlaya nkongomiso lowu wa CSS Tricks flexbox ku kuma ndzhaku, theminoloji, swiletelo, na swiphemu swa khodi.

Yin’wana ya tikholomu tinharhu

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

Xikombiso lexi nga laha henhla xi tumbuluxa tikholomu tinharhu ta ku anama loku ringanaka eka switirhisiwa leswitsongo, swa le xikarhi, leswikulu, na leswikulu swinene hi ku tirhisa titlilasi ta hina ta giridi leti hlamuseriweke ka ha ri emahlweni. Tikholomu teto ti le xikarhi ka tluka leri nga ni mutswari .container.

Ku yi tshovela, hi leyi ndlela leyi yi tirhaka ha yona:

Swikhomela-ndhawu swi nyika ndlela yo veka exikarhi ni ku rhendzeleka hi ndlela yo olova leswi nga endzeni ka sayiti ya wena. Tirhisa .containereka ku anama ka pixel loku hlamulaka kumbe .container-fluideka ku width: 100%tsemakanya vukulu hinkwabyo bya viewport na xitirhisiwa.
Tilayini i swifunengeto swa tikholomu. Kholomo yin’wana na yin’wana yina horizontal padding(leyi vuriwaka gutter) kuva yi lawula ndzhawu leyi nga exikarhi ka yona. Leswi paddingswitlhela swi lwisana eka tilayini letingana matlhelo yo biha. Hi ndlela leyi, swilo hinkwaswo leswi nga eka tikholomu ta wena swi ringanisiwa hi ndlela leyi vonakaka ehansi hi tlhelo ra ximatsi.
Eka layout ya grid, nhundzu yi fanele ku vekiwa endzeni ka tikholomu naswona i tikholomu ntsena leti nga vaka vana va xihatla va tilayini.
Hikwalaho ka flexbox, tikholomu ta gridi leti nga riki na leswi boxiweke widthti ta layout hi ku tisungulela tanihi tikholomu ta ku anama loku ringanaka. Xikombiso, swikombiso swa mune swa .col-smxin’wana na xin’wana hi xoxe xi va 25% hi ku anama ku suka eka ndhawu leyitsongo yo tshoveka ku ya ehenhla. Vona xiyenge xa tikholomu ta auto-layout ku kuma swikombiso swin’wana.
Titlilasi ta tikholomu ti kombisa nhlayo ya tikholomu leti u lavaka ku ti tirhisa eka 12 leti nga kotekaka hi layini. Kutani, loko u lava tikholomu tinharhu ta ku anama loku ringanaka ku tsemakanya, u nga tirhisa .col-4.
Tikholomu widths ti vekiwa hi tiphesente, kutani ti tshama ti ri na mati naswona ti ri na vukulu loko ti pimanisiwa na elemente ya tona ya mutswari.
Tikholomu ti na horizontal paddingku tumbuluxa ti gutters exikarhi ka tikholomu ha yin’we, hambiswiritano, u nga susa ku marginsuka eka tilayini na paddingku suka eka tikholomu hi .no-gutterseka .row.
Ku endla leswaku giridi yi hlamula, ku na tindhawu ta ntlhanu to tshoveka ta giridi, yin’we eka ndhawu yin’wana na yin’wana yo tshoveka leyi hlamulaka : tindhawu hinkwato to tshoveka (titsongo swinene), letitsongo, ta le xikarhi, letikulu, na letikulu swinene.
Tindhawu to tshoveka ta gridi ti sekeriwe eka swivutiso swa midiya ya ku anama ka le hansi, leswi vulaka leswaku ti tirha eka ndhawu yoleyo yin’we yo tshoveka na hinkwaswo leswi nga ehenhla ka yona (xikombiso, .col-sm-4swi tirha eka switirhisiwa leswitsongo, swa le xikarhi, leswikulu, na leswikulu swinene, kambe ku nga ri ku xstshoveka ko sungula).
U nga tirhisa titlilasi ta gridi leti hlamuseriweke ka ha ri emahlweni (ku fana na .col-4) kumbe ti -mixin ta Sass ku kuma ku fungha loku engetelekeke ka semantiki.

Tiva swipimelo na swihoxo leswi rhendzeleke flexbox , ku fana na ku tsandzeka ku tirhisa swiaki swin'wana swa HTML tanihi swikhomela-ndhawu swa flex .

Swihlawulekisi swa gridi

Loko Bootstrap yi tirhisa ems kumbe rems ku hlamusela vukulu byo tala, pxs yi tirhisiwa eka tindhawu to tshoveka ta gridi na ku anama ka xikhomela. Leswi swi vangiwa hikuva ku anama ka xivono ku le ka tipikseli naswona a ku cinci hi mpimo wa fonto .

Vona ndlela leyi swiphemu swa sisiteme ya giridi ya Bootstrap swi tirhaka ha yona eka switirhisiwa swo tala leswi nga ni tafula leri nga ni mavoko.

	Switsongo swinene < 576px	Switsongo ≥576px	Xikarhi xa ≥768px	Lexikulu ≥992px	Ku tlula mpimo ≥1200px
Max ku anama ka xigwitsirisi	Ku hava (auto) .	540px	720px hi ku	960px	1140px hi ndlela leyi
Xirhangi xa tlilasi	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# ya tikholomu	12.
Ku anama ka gutter	30px (15px eka tlhelo rin’wana ni rin’wana ra kholomo) .
Swi nga ni swisaka	Ina
Ku oda ka tikholomu	Ina

Tikholomu ta auto-layout

Tirhisa titlilasi ta tikholomu leti kongomeke ta breakpoint ku olovisa ku pima mpimo wa kholomo handle ka tlilasi leyi nga na tinomboro leti nga erivaleni ku fana na .col-sm-6.

Ku anama loku ringanaka

Xikombiso, hi leswi swivumbeko swimbirhi swa giridi leswi tirhaka eka xitirhisiwa xin’wana ni xin’wana ni ndhawu yo languta, ku sukela eka xsku ya eka xl. Engetela nhlayo yihi na yihi ya titlilasi leti nga riki na yuniti eka breakpoint yin’wana na yin’wana leyi u yi lavaka naswona kholomo yin’wana na yin’wana yi ta va na ku anama loku fanaka.

1 ya 2

2 ya 2

1 wa 3

2 ya 3

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

Layini yo tala ya ku anama loku ringanaka

Endla tikholomu ta ku anama loku ringanaka leti hlanganisaka milayeni yo tala hi ku nghenisa .w-100laha u lavaka leswaku tikholomu ti tshoveka ku ya eka layini leyintshwa. Endla leswaku ku wisa ku hlamula hi ku hlanganisa .w-100na switirhisiwa swin'wana swa nkombiso leswi hlamulaka .

Ku vile na xihoxo xa Safari flexbox lexi a xi sivela leswi ku tirha handle ka explicit flex-basiskumbe border. Ku na swintshuxo swa tivhidiyo ta khale ta swihlamusela-marito, kambe a swi fanelanga swi laveka loko swihlamusela-marito swa wena leswi u swi kongomisaka swi nga weli eka vuhundzuluxeri bya swihoxo.

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>

Ku veka ku anama ka kholomo yin’we

Auto-layout ya tikholomu ta gridi ya flexbox yi tlhela yi vula leswaku u nga veka ku anama ka kholomo yin’we naswona u endla leswaku tikholomu ta vamakwavo ti cinca mpimo hi ku tisungulela ku yi rhendzela. U nga tirhisa titlilasi ta gridi leti hlamuseriweke ka ha ri emahlweni (hilaha swi kombisiweke hakona laha hansi), ti-mixin ta gridi, kumbe ku anama ka le ndzeni ka layini. Xiya leswaku tikholomu tin’wana ti ta cinca sayizi ku nga khathariseki ku anama ka kholomo ya le xikarhi.

1 wa 3

2 wa 3 (ku anama) .

3 wa 3

1 wa 3

2 wa 3 (ku anama) .

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

Nhundzu ya ku anama loku cinca-cincaka

Tirhisa col-{breakpoint}-autotitlilasi ku pima tikholomu hi ku ya hi ku anama ka ntumbuluko ka leswi nga endzeni ka tona.

1 wa 3

Nhundzu ya ku anama loku cinca-cincaka

3 wa 3

1 wa 3

Nhundzu ya ku anama loku cinca-cincaka

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

Titlilasi leti hlamulaka

Gridi ya Bootstrap yi katsa swiyenge swa ntlhanu swa titlilasi leti hlamuseriweke ka ha ri emahlweni to aka swivumbeko swo hlamula leswi rharhanganeke. Endla vukulu bya tikholomu ta wena eka switirhisiwa leswitsongo swinene, leswitsongo, swa le xikarhi, leswikulu, kumbe leswikulu swinene hambi swi ri tano u vona swi fanerile.

Hinkwaswo swilo swo tshoveka

Eka tigridi leti fanaka ku suka eka switirhisiwa leswitsongo ku ya eka leswikulu, tirhisa titlilasi ta .colna . .col-*Boxa tlilasi leyi nga ni tinomboro loko u lava kholomo leyi nga ni mpimo wo karhi; handle ka sweswo, titwe u ntshunxekile ku namarhela .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>

Ku hlanganisiwa ku ya eka horizontal

Hi ku tirhisa sete yin’we ya .col-sm-*titlilasi, u nga endla sisiteme ya giridi ya xisekelo leyi sungulaka yi hlanganisiwile ivi yi va leyi nga etlhelo eka ndhawu leyitsongo yo tsema ( sm).

kol-sm-8

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

Hlanganisa na ku hlanganisa

A wu lavi leswaku tikholomu ta wena ti hlangana ntsena eka ti-tier tin’wana ta gridi? Tirhisa nhlanganelo wa titlilasi to hambana eka xiyimo xin’wana na xin’wana tanihilaha swi lavekaka hakona. Vona xikombiso lexi nga laha hansi ku kuma mianakanyo yo antswa ya ndlela leyi hinkwaswo swi tirhaka ha yona.

.kolo-md-8

.kolo-6 .kol-md-4

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

Swidziva swa le matini

Ti gutters tinga lulamisiwa hiku hlamula hi breakpoint-specific padding na negative margin utility classes. Ku cinca ti gutters eka layini leyi nyikiweke, pair negative margin utility eka .rowna matching padding utilities eka .cols. Mutswari .containerkumbe .container-fluidu nga ha lava ku lulamisiwa na yena ku papalata ku tala loku nga laviwiki, ku tirhisa nakambe ku fambisana ka padding utility.

Hi lexi xikombiso xa ku lulamisa giridi ya Bootstrap eka ndhawu leyikulu ( lg) yo wisa na le henhla. Hi engetele .colpadding hi .px-lg-5, hi counteract sweswo hi .mx-lg-n5eka mutswari .rowivi hi lulamisa .containerwrapper hi .px-lg-5.

Ku padding ka kholomo ya ntolovelo

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

Tikholomu ta layini

Tirhisa .row-cols-*titlilasi leti hlamulaka ku hatlisa u veka nhlayo ya tikholomu leti humesaka kahle nhundzu ya wena na layout. Loko titlilasi ta ntolovelo .col-*ti tirha eka tikholomu ha yin’we (xikombiso, .col-md-4), titlilasi ta tikholomu ta layini ti vekiwa eka mutswari .rowtanihi ndlela yo koma.

Tirhisa titlilasi leti ta tikholomu ta tilayini ku hatlisa u tumbuluxa swivumbeko swa masungulo swa giridi kumbe ku lawula swivumbeko swa makhadi ya wena.

Kholomo

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

Kholomo

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

Kholomo

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

Kholomo

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

Kholomo

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

U nga ha tlhela u tirhisa mixin ya Sass leyi fambisanaka na yona, 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);
  }
}

Ku ringanisa

Tirhisa switirhisiwa swa ku ringanisa swa flexbox ku ringanisa tikholomu hi ndlela yo olova na yo rhendzeleka. Internet Explorer 10-11 a yi seketeli ku ringanisiwa loku yimisiweke ka swilo leswi flex loko xigwitsirisi xa flex xi ri na min-heighttanihilaha swi kombisiweke hakona laha hansi. Vona Flexbugs #3 ku kuma vuxokoxoko byo tala.

Ku ringanisa loku yimisiweke

Yin’wana ya tikholomu tinharhu

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

Yin’wana ya tikholomu tinharhu

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

Ku ringanisa loku nga etlhelo

Yin’wana ya tikholomu timbirhi

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

Ku hava swidziva

Ti gutters exikarhi ka tikholomu eka titlilasi ta hina ta gridi leti hlamuseriweke ka ha ri emahlweni ti nga susiwa hi .no-gutters. Leswi swi susa margins ya negative eka .rowna horizontal paddingeka tikholomu hinkwato ta vana ta le kusuhi.

Hi leyi khodi ya xihlovo yo tumbuluxa switayele leswi. Xiya leswaku ku tlula ka tikholomu ku ringanisiwa ntsena eka tikholomu ta vana to sungula naswona ku kongomisiwa hi ku tirhisa xihlawulekisi xa swihlawulekisi . Loko leswi swi humesa xihlawulekisi lexi kongomeke swinene, ku pfariwa ka kholomo ka ha nga ha tlhela ku lulamisiwa hi ku tirhisa switirhisiwa swa ku hambana .

Xana u lava dizayini ya le tlhelo ku ya emakumu? Lahla mutswari .containerkumbe .container-fluid.

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

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

Hi ku tirhisa, hi leyi ndlela leyi swi langutekaka ha yona. Xiya leswaku u nga ya emahlweni u tirhisa leswi na titlilasi tin’wana hinkwato ta gridi leti hlamuseriweke ka ha ri emahlweni (ku katsa na ku anama ka tikholomu, swiyenge leswi hlamulaka, ku oda nakambe, na swin’wana).

.kolo-sm-6 .kolo-md-8

.kolo-6 .kol-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>

Ku phutsela ka tikholomu

Loko ku vekiwa tikholomu to tlula 12 endzeni ka layini yin’we, ntlawa wun’wana ni wun’wana wa tikholomu leti engetelekeke wu ta, tanihi yuniti yin’we, wu phutsela eka layini leyintshwa.

.kol-9

.col-4
Tanihi leswi 9 + 4 = 13 > 12, div leyi ya 4-kholomo yo anama yi phutseriwe eka layini leyintshwa tanihi yuniti yin’we leyi landzelelanaka.

.col-6
Tikholomu leti landzelaka ti ya emahlweni hi layini leyintshwa.

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

Ku tshoveka ka tikholomu

Ku tshovela tikholomu eka layini leyintshwa eka flexbox swi lava hack leyitsongo: engetela element na kun’wana na width: 100%kun’wana laha u lavaka ku phutsela tikholomu ta wena eka layini leyintshwa. Hi ntolovelo leswi swi hetisisiwa hi .rows yo tala, kambe a hi ndlela yin’wana na yin’wana yo tirhisa leyi nga hlamuselaka leswi.

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

U nga ha tlhela u tirhisa ku wisa loku eka tindhawu to karhi to wisa hi switirhisiwa swa hina swa nkombiso leswi hlamulaka .

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

Ku oda nakambe

Oda titlilasi

Tirhisa .order-titlilasi to lawula ku landzelelana loku vonakaka ka swilo swa wena. Titlilasi leti ta hlamula, kutani u nga veka orderhi breakpoint (xikombiso, .order-1.order-md-2). Ku katsa nseketelo wa ku 1hundza ku 12tsemakanya swiyenge hinkwaswo swa ntlhanu swa giridi.

Xo sungula eka DOM, ku hava oda leyi tirhisiweke

Xa vumbirhi eka DOM, hi oda leyikulu

Xa vunharhu eka DOM, hi oda ya 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>

Ku tlhela ku va na ti responsive .order-firstna .order-lasttitlilasi leti cincaka the orderya elemente hi ku tirhisa order: -1na order: 13( order: $columns + 1), hi ku landzelelana. Titlilasi leti ti nga tlhela ti hlanganisiwa na .order-*titlilasi leti nga na tinomboro tanihilaha swi lavekaka hakona.

Xo sungula eka DOM, xi oda ro hetelela

Xa vumbirhi eka DOM, lexi nga odariwangiki

Xa vunharhu eka DOM, u oda ro sungula

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

Ku tlherisela endzhaku tikholomu

U nga offset tikholomu ta gridi hi tindlela timbirhi: .offset-titlilasi ta hina ta gridi leti hlamulaka na switirhisiwa swa hina swa margin . Titlilasi ta gridi ti ringanisiwa ku fambisana na tikholomu kasi margin ya pfuna swinene eka swivumbeko swa xihatla laha ku anama ka offset ku cinca-cincaka.

Titlilasi ta offset

Susa tikholomu exineneni hi ku tirhisa .offset-md-*titlilasi. Titlilasi leti ti engetela margin ya ximatsi ya kholomo hi *tikholomu. Hi xikombiso, .offset-md-4yi famba .col-md-4ehenhla ka tikholomu ta mune.

.kolo-md-4

.col-md-4 .xihlawulekisi-md-4

.col-md-3 .xihlawulekisi-md-3

.col-md-6 .xihlawulekisi-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>

Ku engetela eka ku basisiwa ka kholomo eka tindhawu to tshoveka leti hlamulaka, u nga ha lava ku tlhela u veka ti-offset. Vona leswi hi xiendlo eka xikombiso xa gridi .

.kolo-sm-5 .kolo-md-6

.col-sm-5 .xihlawulekisi-sm-2 .col-md-6 .xihlawulekisi-md-0

.kol-sm-6 .kol-md-5 .kol-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .kol-lg-6 .ku rhendzeleka-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>

Switirhisiwa swa margin

Hi ku rhurhela eka flexbox eka v4, u nga tirhisa switirhisiwa swa margin ku fana na .mr-autoku sindzisa tikholomu ta vamakwavo ku suka eka yin’wana.

.kolo-md-4

.col-md-4 .ml-xifaniso xa xirhendzevutani

.col-md-3 .ml-md-xifaniso xa xirhendzevutani

.col-xitirhisiwa .mr-xitirhisiwa

.col-xiyimo xa le henhla

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

Ku endla swisaka

Ku hlanganisa nhundzu ya wena hi gridi ya ntolovelo, engetela leyintshwa .rowna sete ya .col-sm-*tikholomu endzeni ka .col-sm-*kholomo leyi nga kona. Tilayini leti pfaleriweke ti fanele ku katsa sete ya tikholomu leti hlanganisaka ku fika eka 12 kumbe ehansi (a swi bohi leswaku u tirhisa tikholomu hinkwato ta 12 leti kumekaka).

Xiyimo xa 1: .col-sm-9

Xiyimo xa 2: .col-8 .col-sm-6

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

Ti mixins ta Sass

Loko u tirhisa tifayela ta Sass ta xihlovo xa Bootstrap, u na nhlawulo wo tirhisa swilo leswi cinca-cincaka swa Sass na mixins ku tumbuluxa swivumbeko swa matluka swa ntolovelo, swa semantiki, na leswi hlamulaka. Titlilasi ta hina ta gridi leti hlamuseriweke ka ha ri emahlweni ti tirhisa swilo leswi fanaka leswi cinca-cincaka na ti-mixin ku nyika nxaxamelo hinkwawo wa titlilasi leti lunghekeleke ku tirhisiwa eka swivumbeko leswi hlamulaka hi ku hatlisa.

Swilo leswi cinca-cincaka

Swilo leswi cinca-cincaka ni mimepe swi kombisa nhlayo ya tikholomu, ku anama ka gutter ni ndhawu leyi ku vutisiwaka eka yona hi swihaxa-mahungu leyi ku nga ta sungula tikholomu leti papamalaka eka yona. Hi tirhisa leswi ku tumbuluxa titlilasi ta gridi leti hlamuseriweke ka ha ri emahlweni leti tsariweke laha henhla, xikan’we na ti mixins ta ntolovelo leti xaxametiweke laha hansi.

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

Ti- mixins

Mixins yi tirhisiwa swin’we na swilo leswi cinca-cincaka swa gridi ku tumbuluxa CSS ya semantiki ya tikholomu ta gridi yin’wana na yin’wana.

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

Xikombiso xa matirhiselo

U nga cinca swilo leswi cinca-cincaka eka mimpimo ya wena ya ntolovelo, kumbe u tirhisa ntsena ti-mixin hi mimpimo ya tona ya ntolovelo. Hi lexi xikombiso xa ku tirhisa swiletelo swa ntolovelo ku endla xivumbeko xa tikholomu timbirhi lexi nga ni xivandla exikarhi.

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

Nhundzu leyikulu

Nhundzu ya vumbirhi

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

Ku endla leswaku gridi yi va leyi u yi lavaka

Hi ku tirhisa swilo swa hina swa Sass swa gridi leswi akiweke endzeni na mimepe, swa koteka ku lulamisa hi ku helela titlilasi ta gridi leti hlamuseriweke ka ha ri emahlweni. Cinca nhlayo ya ti-tier, tidimenxini ta xivutiso xa midiya, ni ku anama ka xikhomela—kutani u tlhela u hlengeleta.

Tikholomu na swidziva

Nhlayo ya tikholomu ta gridi yi nga cinciwa hi ku tirhisa swilo leswi cinca-cincaka swa Sass. $grid-columnsyi tirhisiwa ku humesa ku anama (hi tiphesente) ta kholomo yin’wana na yin’wana loko yi ri karhi $grid-gutter-widthyi veka ku anama ka ti gutters ta kholomo.

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

Swiyenge swa gridi

Ku hundza eka tikholomu hi toxe, u nga ha tlhela u cinca nhlayo ya swiphemu swa giridi. Loko u lava ntsena mune wa ti-grid tiers, u ta pfuxeta $grid-breakpointsand $container-max-widthseka nchumu wo fana na lowu:

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

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

Loko u endla ku cinca kwihi na kwihi eka swilo leswi cinca-cincaka swa Sass kumbe mimepe, u ta lava ku hlayisa ku cinca ka wena ni ku hlengeleta nakambe. Ku endla tano swi ta humesa sete leyintshwa ya titlilasi ta gridi leti hlamuseriweke ka ha ri emahlweni ta ku anama ka tikholomu, ti-offset, na ku oda. Switirhisiwa swa ku vonakala leswi hlamulaka na swona swi ta pfuxetiwa ku tirhisa tindhawu to wisa ta ntolovelo. Tiyisisa leswaku u veka mimpimo ya gridi eka px(hayi rem, em, kumbe %).