in English

Tikholomu

Dyondza ndlela yo cinca tikholomu hi swihlawulekisi swi nga ri swingani swa ku ringanisa, ku oda, na ku tlherisela endzhaku hi ku khensa sisiteme ya hina ya gridi ya flexbox. Ku engetela, vona ndlela yo tirhisa titlilasi ta tikholomu ku lawula ku anama ka swiaki leswi nga riki swa giridi.

Eka tluka leri

Tinhloko ta le henhla! Tiyisisa leswaku u hlaya tluka ra Gridi ku sungula u nga si nghena eka ndlela yo cinca na ku lulamisa tikholomu ta wena ta gridi.

Ndlela leyi ti tirhaka ha yona

Tikholomu ti aka eka xivumbeko xa flexbox xa gridi. Flexbox swi vula leswaku hi na swihlawulekisi swo cinca tikholomu ha yin'we na ku cinca mintlawa ya tikholomu eka xiyimo xa layini . U hlawula ndlela leyi tikholomu ti kulaka ha yona, ti hunguteka kumbe ti cincaka hi ndlela yin’wana.
Loko u aka swivumbeko swa gridi, nhundzu hinkwayo yi ya eka tikholomu. Xiyimo xa le henhla xa giridi ya Bootstrap xi suka eka xikhomela-ndhawu ku ya eka layini ku ya eka kholomo ku ya eka nhundzu ya wena. Eka minkarhi leyi nga tolovelekangiki, u nga ha hlanganisa leswi nga endzeni ni kholomo, kambe xiya leswaku ku nga va ni vuyelo lebyi nga languteriwangiki.
Bootstrap yi katsa titlilasi leti hlamuseriweke ka ha ri emahlweni to tumbuluxa swivumbeko swo hatlisa, leswi hlamulaka. Hi tsevu wa tindhawu to wisa na khume ra tikholomu eka xiyimo xin’wana na xin’wana xa giridi, hi na makume ya titlilasi leti se ti akiweke leswaku u tumbuluxa swivumbeko leswi u swi lavaka. Leswi swi nga tshikiwa hi ku tirhisa Sass loko u swi lava.

Ku ringanisa

Tirhisa switirhisiwa swa ku ringanisa swa flexbox ku ringanisa tikholomu hi ndlela yo olova na yo rhendzeleka.

Ku ringanisa loku yimisiweke

Yin’wana ya tikholomu tinharhu

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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 class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </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.

html

<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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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 5tsemakanya swiyenge hinkwaswo swa tsevu 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

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      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: 6, 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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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 .me-autoku sindzisa tikholomu ta vamakwavo ku suka eka yin’wana.

.kolo-md-4

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

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

.col-xitirhisiwa .mina-xitombo

.col-xiyimo xa le henhla

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Titlilasi ta tikholomu leti tiyimeleke toxe

Titlilasi .col-*ti nga tlhela ti tirhisiwa ehandle ka a .rowku nyika elemente ku anama ko karhi. Nkarhi wun’wana na wun’wana loko titlilasi ta tikholomu ti tirhisiwa tanihi vana lava nga kongomangiki va layini, ti-padding ta tshikiwa.

.col-3: ku anama ka 25% .

.col-sm-9: ku anama ka 75% ehenhla ka sm breakpoint

html

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

Titlilasi ti nga tirhisiwa swin’we na switirhisiwa ku tumbuluxa swifaniso leswi hlamulaka leswi papamalaka. Tiyisisa leswaku u phutsela leswi nga endzeni hi .clearfixxifunengeto ku basisa float loko tsalwa ri komile.

Ndzima ya tsalwa ra xikhomela-ndhawu. Hi yi tirhisa laha ku kombisa matirhiselo ya tlilasi ya clearfix. Hi engetela swivulwa swi nga ri swingani leswi nga riki na nhlamuselo laha ku kombisa ndlela leyi tikholomu ti tirhisanaka ha yona laha na xifaniso lexi papamalaka.

Hilaha u nga swi vonaka hakona tindzimana ti phutsela hi ndlela yo saseka eka xifaniso lexi papamalaka. Sweswi anakanya ndlela leyi leswi swi nga langutekaka ha yona hi nhundzu yin’wana ya xiviri endzeni laha, ku tlula ntsena tsalwa leri ro borha ra xikhomela-ndhawu leri yaka emahlweni ni ku ya emahlweni, kambe entiyisweni ri nga hundziseli rungula leri vonakaka eka. Yi teka ndhawu ntsena naswona a yi fanelanga yi hlayiwa hakunene.

Nakona, hi loyi, wa ha tiyisela eku hlayeni ka tsalwa leri ra xikhomela-ndhawu, hi tshemba ku twisisa kun’wana, kumbe tandza ra paseka leri fihliweke ra nhundzu. Xihlekiso, kumbexana. Khombo ra kona, a ku na xin’we xa sweswo laha.

html

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>