Kolonat

Mësoni se si të modifikoni kolonat me një sërë opsionesh për shtrirje, renditje dhe kompensim falë sistemit tonë të rrjetit flexbox. Plus, shikoni se si të përdorni klasat e kolonave për të menaxhuar gjerësinë e elementeve jo-rrjet.

Në këtë faqe

Kokat lart! Sigurohuni që së pari të lexoni faqen e rrjetit përpara se të zhyteni në mënyrën se si të modifikoni dhe personalizoni kolonat tuaja të rrjetit.

Si funksionojnë

Kolonat ndërtohen në arkitekturën flexbox të rrjetit. Flexbox do të thotë se ne kemi opsione për ndryshimin e kolonave individuale dhe modifikimin e grupeve të kolonave në nivelin e rreshtit . Ju zgjidhni se si kolonat rriten, tkurren ose ndryshojnë ndryshe.
Kur ndërtoni paraqitjet e rrjetit, e gjithë përmbajtja shkon në kolona. Hierarkia e rrjetit të Bootstrap shkon nga kontejneri në rresht në kolonë në përmbajtjen tuaj. Në raste të rralla, ju mund të kombinoni përmbajtjen dhe kolonën, por kini parasysh se mund të ketë pasoja të padëshiruara.
Bootstrap përfshin klasa të paracaktuara për krijimin e paraqitjeve të shpejta dhe të përgjegjshme. Me gjashtë pika ndërprerjeje dhe një duzinë kolonash në çdo nivel rrjeti, ne kemi dhjetëra klasa të ndërtuara tashmë për ju që të krijoni paraqitjet tuaja të dëshiruara. Kjo mund të çaktivizohet nëpërmjet Sass nëse dëshironi.

Radhitje

Përdorni shërbimet e shtrirjes flexbox për të rreshtuar kolonat vertikalisht dhe horizontalisht.

Rreshtimi vertikal

Një nga tre kolonat

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

Një nga tre kolonat

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

Rreshtimi horizontal

Një nga dy kolonat

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

Mbështjellja e kolonës

Nëse më shumë se 12 kolona vendosen brenda një rreshti të vetëm, çdo grup kolonash shtesë, si një njësi, do të mbyllet në një rresht të ri.

.kol-9

.col-4
Meqenëse 9 + 4 = 13 > 12, kjo ndarje e gjerë me 4 kolona mbështillet në një linjë të re si një njësi e afërt.

.col-6
Kolonat pasuese vazhdojnë përgjatë vijës së re.

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

Pritet kolona

Thyerja e kolonave në një rresht të ri në flexbox kërkon një hak të vogël: shtoni një element width: 100%kudo që dëshironi të mbështillni kolonat tuaja në një rresht të ri. Normalisht kjo realizohet me .rows të shumëfishta, por jo çdo metodë zbatimi mund ta llogarisë këtë.

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

Ju gjithashtu mund ta aplikoni këtë ndërprerje në pika të veçanta ndërprerjeje me shërbimet tona të ekranit të përgjegjshëm .

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

Rirenditje

Porositni klasa

Përdorni .order-klasa për të kontrolluar rendin vizual të përmbajtjes suaj. Këto klasa janë të përgjegjshme, kështu që ju mund të vendosni pikën e orderndërprerjes (p.sh., .order-1.order-md-2). Përfshin mbështetje për 1të 5gjitha gjashtë nivelet e rrjetit.

Së pari në DOM, nuk u aplikua asnjë urdhër

E dyta në DOM, me një porosi më të madhe

E treta në DOM, me rend 1

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

Ekzistojnë gjithashtu responsive .order-firstdhe .order-lastklasa që ndryshojnë orderelementin e një elementi duke aplikuar order: -1dhe order: 6përkatësisht . Këto klasa gjithashtu mund të përzihen me .order-*klasat e numëruara sipas nevojës.

E para në DOM, e porositur e fundit

E dyta në DOM, e pa porositur

E treta në DOM, e porositur së pari

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

Kompensimi i kolonave

Ju mund të kompensoni kolonat e rrjetit në dy mënyra: .offset-klasat tona të rrjetit të përgjegjshëm dhe shërbimet tona të marzhit . Klasat e rrjetit janë të madhësisë që të përputhen me kolonat ndërsa margjinat janë më të dobishme për paraqitjet e shpejta ku gjerësia e kompensimit është e ndryshueshme.

Klasat e kompensimit

Zhvendosni kolonat në të djathtë duke përdorur .offset-md-*klasat. Këto klasa rrisin kufirin e majtë të një kolone me *kolona. Për shembull, .offset-md-4lëviz .col-md-4mbi katër kolona.

.col-md-4

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

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

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

Përveç pastrimit të kolonës në pikat e ndërprerjes reaguese, mund t'ju duhet të rivendosni kompensimet. Shihni këtë në veprim në shembullin e rrjetit .

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

Shërbimet e marzhit

Me kalimin në flexbox në v4, mund të përdorni shërbime të marzhit si .me-autopër të detyruar kolonat e vëllezërve dhe motrave të largohen nga njëri-tjetri.

.col-md-4

.col-md-4 .ms-auto

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

.col-auto .me-auto

.col-auto

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

Klasat e kolonave të pavarura

Klasat .col-*mund të përdoren gjithashtu jashtë a .rowpër t'i dhënë një elementi një gjerësi specifike. Sa herë që klasat e kolonave përdoren si fëmijë jo të drejtpërdrejtë të një rreshti, mbushjet hiqen.

.col-3: gjerësia prej 25%

.col-sm-9: gjerësi prej 75% mbi pikën e ndërprerjes sm

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

Klasat mund të përdoren së bashku me programet ndihmëse për të krijuar imazhe lundruese të përgjegjshme. Sigurohuni që ta mbështillni përmbajtjen në një .clearfixmbështjellës për të pastruar notën nëse teksti është më i shkurtër.

Një paragraf i tekstit të mbajtësit të vendit. Ne po e përdorim atë këtu për të treguar përdorimin e klasës clearfix. Ne po shtojmë mjaft fraza të pakuptimta këtu për të demonstruar se si kolonat ndërveprojnë këtu me imazhin e lundruar.

Siç mund ta shihni, paragrafët mbështillen me hijeshi rreth imazhit të lundruar. Tani imagjinoni se si do të dukej kjo me një përmbajtje aktuale këtu, në vend të vetëm me këtë tekst të mërzitshëm mbajtës të vendeve që vazhdon dhe vazhdon, por në fakt nuk përcjell asnjë informacion të prekshëm. Thjesht zë hapësirë dhe nuk duhet lexuar realisht.

E megjithatë, ja ku jeni, ende këmbëngulës në leximin e këtij teksti të mbajtësit të vendit, duke shpresuar për disa njohuri të tjera ose ndonjë vezë të fshehur të Pashkëve. Një shaka, ndoshta. Fatkeqësisht, këtu nuk ka asgjë nga këto.

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