in English

Dikholomo

Ithute ka moo o ka fetošago dikholomo ka dikgetho tše mmalwa tša go logaganya, go otara, le go lefela tshepedišo ya rena ya keriti ya flexbox. Go tlaleletša, bona ka moo o ka šomišago diklase tša kholomo go laola bophara bja dielemente tšeo e sego tša keriti.

Letlakaleng le

Dihlogo godimo! Kgonthiša gore o bala letlakala la Keriti pele pele o itahlela go ka moo o ka fetošago le go tlwaetša dikholomo tša gago tša keriti.

Kamoo di šomago ka gona

Dikholomo di aga godimo ga mohlwaela wa flexbox wa keriti. Flexbox e ra gore re na le dikgetho tša go fetoša dikholomo ka botee le go fetoša dihlopha tša dikholomo maemong a mothalo . O kgetha ka moo dikholomo di golago, di fokotšegago goba ka tsela ye nngwe di fetogago ka gona.
Ge o aga dipeakanyo tša keriti, diteng ka moka di ya ka dikholomong. Tatelano ya maemo ya keriti ya Bootstrap e ya go tšwa go setshelo go ya go mothaladi go ya go kholomo go ya go diteng tša gago. Mabakeng a sewelo, o ka kopanya diteng le kholomo, eupša ela hloko gore go ka ba le ditlamorago tšeo di sa rerišwago.
Bootstrap e akaretša diklase tše di hlalošitšwego e sa le pele bakeng sa go hlama dipeakanyo tše di akgofilego, tše di arabelago. Ka dintlha tše tshela tša go kgaotša le dikholomo tše lesomepedi legatong le lengwe le le lengwe la keriti, re na le diklase tše masome tšeo di šetšego di agilwe gore o hlame dipeakanyo tšeo o di nyakago. Se se ka šitišwa ka Sass ge o rata.

Go logaganya

Šomiša didirišwa tša go logaganya flexbox go logaganya dikholomo ka go otlologa le ka go rapalala.

Go logaganya ga go ema thwii

E nngwe ya dikholomo tše tharo

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>

E nngwe ya dikholomo tše tharo

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>

Go logaganya mo go rapaletšego

E nngwe ya dikholomo tše pedi

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>

Go phuthela dikholomo

Ge e le gore dikholomo tša go feta tše 12 di beilwe ka gare ga mothalo o tee, sehlopha se sengwe le se sengwe sa dikholomo tša tlaleletšo se tla, bjalo ka yuniti e tee, se phuthela godimo ga mothaladi wo mofsa.

.kol-9

.col-4
Ka ge 9 + 4 = 13 > 12, div ye ya bophara bja dikholomo tše 4 e phuthelwa godimo ga mola wo mofsa bjalo ka yuniti e tee ye e latelanago.

.col-6
Dikholomo tše di latelago di tšwela pele go bapa le mothaladi wo mofsa.

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>

Go kgaotša ga dikholomo

Go thuba dikholomo go mothaladi wo mofsa ka go flexbox go nyaka go thuba mo go nnyane: oketša elemente ka kae le width: 100%kae moo o nyakago go phuthela dikholomo tša gago go mothaladi wo mofsa. Ka tlwaelo se se phethwa ka .rows ye mentši, eupša ga se mokgwa wo mongwe le wo mongwe wa phethagatšo wo o ka ikarabelago ka se.

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

O ka diriša gape le go khutša mo mafelong a itšego a go kgaotša ka didirišwa tša rena tša pontšho tše di arabelago .

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

Go beakanya gape

Otara diklase

Šomiša .order-diklase tša go laola tatelano ya pono ya diteng tša gago. Diklase tše di a arabela, ka fao o ka beakanya orderka breakpoint (mohlala, .order-1.order-md-2). E akaretša thekgo ya go 1feta 5go ralala le maemo ka moka a tshela a keriti.

Pele ka DOM, ga go na taelo yeo e dirišitšwego

Sa bobedi ka DOM, ka taelo e kgolo

Boraro ka DOM, ka taelo 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>

Gape go na le go arabela .order-firstle .order-lastdiklase tšeo di fetošago orderya elemente ka go diriša order: -1le order: 6, ka go latelelana. Diklase tše di ka hlakantšhwa gape le diklase tše di nago le dinomoro .order-*ge go nyakega.

Pele ka DOM, laela la ho qetela

Bobedi ka DOM, unordered

Boraro ka DOM, o ile a laela pele

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>

Go lefela dikholomo

O ka offset dikholomo tša keriti ka ditsela tše pedi: .offset-diklase tša rena tša keriti tše di arabelago le didirišwa tša rena tša margin . Diklase tša keriti di na le bogolo go swana le dikholomo mola mapheko a na le mohola kudu go dipeakanyo tša ka pela moo bophara bja ofesete bo fetogago.

Diklase tša offset

Suthiša dikholomo go ya go le letona o šomiša .offset-md-*diklase. Diklase tše di oketša mošito wa nngele wa kholomo ka *dikholomo. Go fa mohlala, e .offset-md-4sepela .col-md-4godimo ga dikholomo tše nne.

.kol-md-4

.kol-md-4 .ofesete-md-4

.kol-md-3 .gofeti-md-3

.kol-md-6 .gofeti-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>

Go tlaleletša go go hlwekiša kholomo mafelong a go kgaotša ao a arabelago, o ka swanelwa ke go seta gape di-offset. Bona se ka tiro mohlaleng wa keriti .

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

.col-sm-5 .offset-sm-2 .kol-md-6 .gofeti-md-0

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

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

Didirišwa tša ka thoko

Ka go hudugela go flexbox ka v4, o ka šomiša didirišwa tša margin go swana le .me-autogo gapeletša dikholomo tša bana babo rena go tloga go tše dingwe.

.kol-md-4

.col-md-4 .m s- i o t o

.col-md-3 .m s- m d- i o t o

.col-auto .nna-auto

.col-ya go itiriša

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>

Diklase tša dikholomo tše di ikemetšego

Diklase di .col-*ka šomišwa gape ka ntle ga a .rowgo fa elemente bophara bjo bo itšego. Nako le nako ge diklase tša dikholomo di šomišwa bjalo ka bana bao e sego ba thwii ba mothalo, dipadding di a tlogelwa.

.col-3: bophara ba 25% .

.col-sm-9: bophara bja 75% ka godimo ga ntlha ya go kgaotša ya sm

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>

Diklase di ka šomišwa mmogo le didirišwa go hlama diswantšho tše di phaphametšego tše di arabelago. Kgonthiša gore o phuthela diteng ka gare ga .clearfixsephuthelwana go hlatswa sephaphamadi ge e le gore sengwalwa se le se se kopana.

Temana ya sengwalwa sa seswari sa lefelo. Re e šomiša mo go bontšha tšhomišo ya sehlopha sa clearfix. Re tlaleletša ka dipolelwana tše mmalwa kudu tše di se nago mohola mo go laetša ka fao dikholomo di dirišanago mo le seswantšho se se phaphametšego.

Bjalo ka ge o ka bona dirapa di phuthela ka botho go dikologa seswantšho seo se phaphametšego. Bjale nagana ka fao se se bego se tla lebelega ka gona ka diteng tše dingwe tša nnete ka mo, go e na le go no ba sengwalwa se se tenago sa seswari sa lefelo seo se tšwelago pele le go tšwela pele, eupša gabotse se fetišetša tshedimošo ye e bonagalago go. E fo tšea sekgoba gomme ga se ya swanela go balwa e le ka kgonthe.

Gomme le ge go le bjalo, ke wena yo, o sa phegelela go bala sengwalwa se sa seswaro sa lefelo, o holofela ditemogo tše dingwe tše dingwe, goba lee le lengwe la paseka leo le utilwego la diteng. Metlae, mohlomongwe. Ka bomadimabe, ga go le e tee ya tšeo mo.

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>