Tiirarka

Baro sida loo beddelo tiirarka iyada oo ay weheliso dhawr doorasho oo toos ah, dalbashada, iyo dib-u-habaynta iyada oo ay ugu wacan tahay nidaamkayaga xargaha flexbox. Intaa waxaa dheer, arag sida loo isticmaalo fasallada tiirarka si loo maareeyo ballaadhka walxaha aan xidhnayn.

Boggan

Madaxa kor u qaad! Hubi inaad akhrido bogga Grid marka hore ka hor intaadan quusin sida loo beddelo oo loo habeeyo tiirarkaaga shabagga.

Sida ay u shaqeeyaan

Tiirarku waxay ku dhismaan qaab dhismeedka flexbox-ka Flexbox macneheedu waxa weeye in aanu haysano doorashooyin lagu bedelo tiirarka gaarka ah iyo wax ka beddelka kooxaha tiirarka ee heerka safka . Adiga ayaa dooranaya sida tiirarku u koraan, u yareeyaan, ama si kale u beddelaan.
Marka la dhisayo qaab-dhismeedyada xadhkaha, dhammaan waxa ku jira waxa ay gelayaan tiirar. Kala sareynta shabakada Bootstrap waxay ka socotaa weel ilaa saf ilaa tiir ilaa nuxurkaga. Marar dhif ah, waxaad isku dari kartaa nuxurka iyo tiirka, laakiin ogow inay jiri karaan cawaaqib aan loo baahnayn.
Bootstrap waxaa ku jira fasallo horay loo sii qeexay si loo abuuro qaab-dhismeed degdeg ah, jawaab celin leh. Iyada oo leh lix dhibcood oo jabin ah iyo darsin tiir oo heer kasta ah, waxaanu haynaa daraasiin fasallo ah oo hore loogu dhisay si aad u abuurto qaab-dhismeedka aad rabto. Tan waxaa lagu curyaami karaa Sass haddii aad rabto.

Toosin

Isticmaal qalabka isku toosinta flexbox si aad u toosiso tiirarka si toos ah iyo toosan.

toosan toosan

Mid ka mid ah saddexda tiir

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>

Mid ka mid ah saddexda tiir

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>

Toosin toosan

Mid ka mid ah labada tiir

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>

Tiirka duubista

Haddii in ka badan 12 tiir la dhigo hal saf, koox kasta oo tiirar dheeraad ah ayaa, hal unug ahaan, ku duubi doona khad cusub.

.col-9

.col-4
Tan iyo 9 + 4 = 13> 12, 4-column-ballaaran div waxa lagu duuduubay xariiq cusub sidii hal unug oo xidhiidhsan.

.col-6 Tiirarrada
xiga waxay ku sii socdaan khadka cusub.

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>

Jajabka tiirka

Jebinta tiirarka laynka cusub ee flexbox waxay u baahan tahay jabsi yar: ku dar curiye width: 100%meel kasta oo aad rabto inaad tiirarkaaga ku duubto xariiq cusub. Caadi ahaan tan waxaa lagu dhammeeyaa .rows badan, laakiin qaab kasta oo dhaqangelin ah kuma xisaabtami karo tan.

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

Waxa kale oo aad ku dabaqi kartaa fasaxan meelaha nasashada ee gaarka ah adigoo isticmaalaya adeegyadeena bandhiga ee ka jawaabaya .

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

Dib u dalbashada

Dalbo fasalada

U adeegso .order-xiisado si aad u xakamayso nidaamka muuqaalka ee waxa ku jira. Fasaladani waa kuwo jawaab celin ah, marka waxaad dejin kartaa barta ordergoynta (tusaale, .order-1.order-md-2). 1Waxaa ka mid ah taageerada 5dhammaan lixda heerar.

Marka hore DOM, wax dalab ah ma jiro

Labaad ee DOM, oo leh amar ka weyn

Saddexaad gudaha DOM, oo wata amar ah 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>

Waxa kale oo jira ka jawaab celin .order-firstiyo .order-lastfasallo beddela ordercuriyaha iyagoo codsanaya order: -1iyo order: 6, siday u kala horreeyaan. Fasalladan waxa kale oo lagu dhex milmi karaa fasallada nambarada leh .order-*haddii loo baahdo.

Marka hore DOM, la dalbado ugu danbeysa

Labaad DOM, aan la dalban

Saddexaad gudaha DOM, marka hore la dalbaday

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>

Tiirarka dib u dejinta

Waxaad u dami kartaa tiirarka shabaqyada laba siyaabood: .offset-fasaladayada wax-ka-qabashada grid iyo utilities our margin . Fasallada xayndaabku waxa lagu qiyaasaa in ay iswaafajiyaan tiirarka halka marginsyadu ay aad uga faa'iidaysan karaan jaangooyooyinka degdega ah halkaas oo ballaca wax-ka-qabashada uu doorsoomayo.

Fasallada la dhimay

Tiirarka u dhaqaaq dhanka midig adigoo isticmaalaya .offset-md-*fasalo. Fasaladani waxay kordhiyaan soohdinta bidix ee tiirarka iyagoo *tiirar ah. Tusaale ahaan, waxa .offset-md-4uu .col-md-4ka wareegayaa afar tiir.

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

Marka lagu daro nadiifinta tiirka meelaha jabinta jawaabaha, waxaa laga yaabaa inaad u baahato inaad dib u dejiso. Fiiri tan ficil ahaan tusaalaha shabkada .

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

Utility Margin

Markaad u guurto flexbox gudaha v4, waxaad isticmaali kartaa utility margin sida .me-autoinaad ka fogaato tiirarka walaalaha.

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

Fasalada tiirarka goonida ah

Fasallada .col-*waxa kale oo loo isticmaali karaa meel ka baxsan a .rowsi loo siiyo curiyaha ballac gaar ah. Mar kasta oo fasallada tiirarka loo isticmaalo sidii carruur isku xigta oo aan toos ahayn, suufka waa la dhaafayaa.

.col-3: ballac 25%

.col-sm-9: ballac 75% ka sarreeya barta sm-ka

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>

Fasallada waxaa lala isticmaali karaa yutiilitida si loo abuuro sawirro sabbaynaya oo jawaab leh. Hubi inaad ku duubto waxa ku jira .clearfixduub si aad u nadiifiso sabaynta haddii qoraalku gaaban yahay.

Cutubka qoraalka meel hayaha. Waxaan u isticmaaleynaa halkan si aan u muujino isticmaalka fasalka clearfix. Waxa aanu halkan ku soo kordhinaynaa weedho aan macno badan lahayn si aanu u muujino sida tiirarku ula falgalaan sawirka sabbaynaya.

Sida aad arki karto cutubyada si xarrago leh ugu duub sawirka sabbaynaya. Bal hadda qiyaas sida ay tani u ekaan doonto qaar ka mid ah nuxurka dhabta ah ee halkan ku jira, halkii aad ka ahaan lahayd qoraalkan boos-haye ee caajiska ah ee socda oo socda, laakiin dhab ahaantii aan soo gudbin macluumaad la taaban karo. Waxay si fudud u qaadanaysaa meel bannaan mana aha in run ahaantii la akhriyo.

Haddana, halkan waxaad joogtaa, oo weli ku adkaysanaysa akhrinta qoraalkan meel hayaha, adigoo rajaynaya fikrado kale, ama ukunta bari ee qarsoon ee nuxurka ah. Kaftan, malaha. Nasiib darro, midna halkan ma jiraan.

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>