Kolonni

Tgħallem kif timmodifika l-kolonni b’numru żgħir ta’ għażliet għall-allinjament, l-ordnijiet u t-tpaċija grazzi għas-sistema tal-grilja tal-flexbox tagħna. Barra minn hekk, ara kif tuża klassijiet tal-kolonni biex timmaniġġja wisgħat ta 'elementi mhux tal-grilja.

Fuq din il-paġna

Irjus up! Kun żgur li taqra l-paġna tal-Grid l- ewwel qabel ma tgħaddas dwar kif timmodifika u tippersonalizza l-kolonni tal-grilja tiegħek.

Kif jaħdmu

Il-kolonni jibnu fuq l-arkitettura tal-flexbox tal-grilja. Flexbox ifisser li għandna għażliet biex nibdlu kolonni individwali u nimmodifikaw gruppi ta 'kolonni fil-livell ta' ringiela . Inti tagħżel kif il-kolonni jikbru, jiċkienu, jew inkella jinbidlu.
Meta tibni taqsim tal-grilja, il-kontenut kollu jmur f'kolonni. Il-ġerarkija tal-grilja ta' Bootstrap tmur minn kontenitur għal ringiela għal kolonna għall-kontenut tiegħek. F'okkażjonijiet rari, tista' tgħaqqad il-kontenut u l-kolonna, imma kun konxju li jista' jkun hemm konsegwenzi mhux intenzjonati.
Bootstrap jinkludi klassijiet predefiniti għall-ħolqien ta' layouts veloċi u li jirrispondu. B'sitt breakpoints u tużżana kolonni f'kull saff tal-grilja, għandna għexieren ta 'klassijiet diġà mibnija għalik biex toħloq it-tqassim mixtieq tiegħek. Dan jista 'jiġi diżattivat permezz ta' Sass jekk tixtieq.

Allinjament

Uża l-utilitajiet tal-allinjament tal-flexbox biex tallinja l-kolonni vertikalment u orizzontalment.

Allinjament vertikali

Waħda minn tliet kolonni

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>

Waħda minn tliet kolonni

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>

Allinjament orizzontali

Waħda minn żewġ kolonni

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>

Tgeżwir tal-kolonna

Jekk aktar minn 12-il kolonna jitqiegħdu f'ringiela waħda, kull grupp ta' kolonni żejda se, bħala unità waħda, jgħaqqad fuq linja ġdida.

.kol-9

.col-4
Peress li 9 + 4 = 13 > 12, dan id-div 4-kolonni kollha jitgeżwer fuq linja ġdida bħala unità waħda kontigwa.

.col-6
Kolonni sussegwenti jkomplu tul il-linja l-ġdida.

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>

Pawżi tal-kolonna

It-tkissir tal-kolonni għal linja ġdida fil-flexbox jeħtieġ hack żgħir: żid element b'kull width: 100%fejn trid tkebbeb il-kolonni tiegħek għal linja ġdida. Normalment dan jitwettaq b'ħafna .rows, iżda mhux kull metodu ta 'implimentazzjoni jista' jikkunsidra dan.

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

Tista' wkoll tapplika din il-waqfa f'punti ta' waqfien speċifiċi bl- utilitajiet tal-wiri reattivi tagħna .

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

Ordnar mill-ġdid

Ordna klassijiet

Uża .order-klassijiet biex tikkontrolla l -ordni viżwali tal-kontenut tiegħek. Dawn il-klassijiet jirreaġixxu, għalhekk tista' tissettja l- orderpunt ta' waqfien (eż, .order-1.order-md-2). Jinkludi appoġġ għas 1- 5sitt gradi tal-grilja kollha.

L-ewwel fid-DOM, ma applikat l-ebda ordni

It-tieni fid-DOM, b'ordni akbar

It-tielet fid-DOM, b'ordni ta' 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>

Hemm ukoll klassijiet responsivi .order-firstu li jbiddlu l- ta 'element billi japplikaw u , rispettivament. Dawn il-klassijiet jistgħu wkoll jiġu mħallta mal-klassijiet numerati kif meħtieġ..order-lastorderorder: -1order: 6.order-*

L-ewwel fid-DOM, ordnat l-aħħar

It-tieni fid-DOM, mhux ordnat

It-tielet fid-DOM, ordnat l-ewwel

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>

Kolonni ta' tpaċija

Tista 'tpaċi l-kolonni tal-grilja b'żewġ modi: il .offset--klassijiet tal-grilja li jirrispondu tagħna u l- utilitajiet tal-marġni tagħna . Il-klassijiet tal-grilja huma daqs biex jaqblu mal-kolonni filwaqt li l-marġini huma aktar utli għal layouts ta 'malajr fejn il-wisa' tal-offset hija varjabbli.

Klassijiet offset

Mexxi l-kolonni lejn il-lemin billi tuża .offset-md-*klassijiet. Dawn il-klassijiet iżidu l-marġni tax-xellug ta’ kolonna *b’kolonni. Per eżempju, .offset-md-4jiċċaqlaq .col-md-4fuq erba 'kolonni.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

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

Minbarra l-ikklerjar tal-kolonni f'punti ta 'waqfien li jirrispondu, jista' jkollok bżonn tirrisettja l-offsets. Ara dan fl-azzjoni fl -eżempju tal-grilja .

.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

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>

Utilitajiet tal-marġni

Biċ-ċaqliq lejn flexbox f'v4, tista 'tuża utilitajiet tal-marġni bħal .me-autobiex iġiegħel il-kolonni tal-aħwa 'l bogħod minn xulxin.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

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>

Klassijiet ta' kolonni waħedhom

Il- .col-*klassijiet jistgħu wkoll jintużaw barra a .rowbiex jagħtu element wisa 'speċifika. Kull meta l-klassijiet tal-kolonni jintużaw bħala tfal mhux diretti ta' ringiela, il-paddings jitħallew barra.

.col-3: wisa 'ta' 25%

.col-sm-9: wisa 'ta' 75% 'l fuq mill-punt ta' breakpoint 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>

Il-klassijiet jistgħu jintużaw flimkien ma 'utilitajiet biex jinħolqu immaġini floated li jirrispondu. Kun żgur li tgeżwer il-kontenut .clearfixf'tgeżwir biex tnaddaf il-galleġġjant jekk it-test ikun iqsar.

Paragrafu ta' test ta' placeholder. Qed nużawha hawn biex nuru l-użu tal-klassi clearfix. Qegħdin inżidu pjuttost ftit frażijiet bla sens hawnhekk biex nuru kif il-kolonni jinteraġixxu hawn ma 'l-immaġni floated.

Kif tistgħu taraw il-paragrafi jdawwru b'mod grazzjuż l-immaġni floated. Issa immaġina kif jidher dan b'xi kontenut attwali hawn, aktar milli sempliċement dan it-test ta 'placeholder boring li jibqa' għaddej u jkompli, iżda fil-fatt ma jwassal l-ebda informazzjoni tanġibbli fuq. Sempliċement jieħu spazju u m'għandux jinqara verament.

U madankollu, hawn int, għadek perseveranti fil-qari ta 'dan it-test placeholder, bit-tama għal xi għarfien ieħor, jew xi bajda tal-Għid moħbija ta' kontenut. Ċajta, forsi. Sfortunatament, m'hemm xejn minn dan hawn.

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>