Awọn ọwọn

Kọ ẹkọ bi o ṣe le ṣe atunṣe awọn ọwọn pẹlu ọwọ awọn aṣayan fun titete, pipaṣẹ, ati aiṣedeede ọpẹ si eto grid flexbox wa. Pẹlupẹlu, wo bii o ṣe le lo awọn kilasi ọwọn lati ṣakoso awọn iwọn ti awọn eroja ti kii ṣe akoj.

Lori iwe yi

Efeti sile! Rii daju lati ka oju-iwe Grid ni akọkọ ṣaaju ki o to omiwẹ sinu bi o ṣe le yipada ati ṣe akanṣe awọn ọwọn akoj rẹ.

Bawo ni wọn ṣe n ṣiṣẹ

Awọn ọwọn kọ lori akoj ká flexbox faaji. Flexbox tumọ si pe a ni awọn aṣayan fun iyipada awọn ọwọn kọọkan ati iyipada awọn ẹgbẹ ti awọn ọwọn ni ipele ila . O yan bi awọn ọwọn ṣe dagba, dinku, tabi bibẹẹkọ yipada.
Nigbati o ba n kọ awọn ipilẹ akoj, gbogbo akoonu lọ ni awọn ọwọn. Awọn logalomomoise ti Bootstrap ká akoj lọ lati eiyan si kana si iwe si akoonu rẹ. Ni awọn iṣẹlẹ to ṣọwọn, o le darapọ akoonu ati iwe, ṣugbọn ṣe akiyesi pe awọn abajade airotẹlẹ le wa.
Bootstrap pẹlu awọn kilasi asọye tẹlẹ fun ṣiṣẹda iyara, awọn ipilẹ idahun. Pẹlu awọn aaye fifọ mẹfa ati awọn ọwọn mejila ni ipele akoj kọọkan, a ni dosinni ti awọn kilasi ti a ti kọ tẹlẹ fun ọ lati ṣẹda awọn ipalemo ti o fẹ. Eyi le jẹ alaabo nipasẹ Sass ti o ba fẹ.

Titete

Lo awọn ohun elo titete apoti flexbox lati so awọn ọwọn ni inaro ati petele.

Titete inaro

Ọkan ninu awọn ọwọn mẹta

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>

Ọkan ninu awọn ọwọn mẹta

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>

Petele titete

Ọkan ninu awọn ọwọn meji

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>

Fidi ọwọn

Ti o ba ju awọn ọwọn 12 ti a gbe laarin ila kan, ẹgbẹ kọọkan ti awọn ọwọn afikun yoo, bi ẹyọkan, fi ipari si laini tuntun kan.

.kól-9

.col-4
Lati 9 + 4 = 13> 12, div-jakejado 4-column yii yoo div sori laini titun kan bi ẹyọkan ti o tẹriba.

.col-6
Awọn ọwọn ti o tẹle tẹsiwaju pẹlu laini tuntun.

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>

Awọn fifọ ọwọn

Pipa awọn ọwọn si laini tuntun ni flexbox nilo gige kekere kan: ṣafikun eroja kan pẹlu width: 100%nibikibi ti o fẹ lati fi ipari si awọn ọwọn rẹ si laini tuntun kan. Ni deede eyi ni a ṣe pẹlu ọpọlọpọ awọn .rows, ṣugbọn kii ṣe gbogbo ọna imuse le ṣe akọọlẹ fun eyi.

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

O tun le lo isinmi yii ni awọn aaye fifọ ni pato pẹlu awọn ohun elo ifihan idahun wa .

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

Atunse

Awọn kilasi ibere

Lo .order-awọn kilasi fun iṣakoso aṣẹ wiwo akoonu rẹ. Awọn kilasi wọnyi jẹ idahun, nitorinaa o le ṣeto ordernipasẹ aaye fifọ (fun apẹẹrẹ, .order-1.order-md-2). Pẹlu atilẹyin fun 1kọja 5gbogbo awọn ipele akoj mẹfa.

Ni akọkọ ni DOM, ko si aṣẹ ti a lo

Keji ni DOM, pẹlu aṣẹ nla kan

Kẹta ni DOM, pẹlu aṣẹ ti 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>

Awọn idahun tun wa .order-firstati .order-lastawọn kilasi ti o yi orderohun elo pada nipa lilo order: -1ati order: 6, lẹsẹsẹ. Awọn kilasi wọnyi tun le ni idapọ pẹlu awọn .order-*kilasi ti o ni nọmba bi o ṣe nilo.

Ni akọkọ ni DOM, paṣẹ kẹhin

Keji ni DOM, ti ko paṣẹ

Kẹta ni DOM, paṣẹ ni akọkọ

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>

Awọn ọwọn aiṣedeede

O le ṣe aiṣedeede awọn ọwọn akoj ni awọn ọna meji: awọn .offset-kilasi grid idahun wa ati awọn ohun elo ala wa . Awọn kilasi akoj jẹ iwọn lati baamu awọn ọwọn lakoko ti awọn ala jẹ iwulo diẹ sii fun awọn ipalemo iyara nibiti iwọn aiṣedeede jẹ oniyipada.

Awọn kilasi aiṣedeede

Gbe awọn ọwọn si ọtun nipa lilo .offset-md-*awọn kilasi. Awọn kilasi wọnyi ṣe alekun ala osi ti iwe kan nipasẹ *awọn ọwọn. Fun apẹẹrẹ, .offset-md-4gbigbe .col-md-4lori awọn ọwọn mẹrin.

.kol-md-4

.col-md-4 .aiṣedeede-md-4

.col-md-3 .aiṣedeede-md-3

.col-md-6 .aiṣedeede-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>

Ni afikun si imukuro ọwọn ni awọn aaye fifọ idahun, o le nilo lati tun awọn aiṣedeede. Wo eyi ni iṣe ni apẹẹrẹ akoj .

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

Awọn ohun elo ala

Pẹlu gbigbe si flexbox ni v4, o le lo awọn ohun elo ala bi .me-autolati fi ipa mu awọn ọwọn arakunrin kuro lọdọ ara wọn.

.kol-md-4

.col-md-4 .ms-laifọwọyi

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

.col-auto .me-auto

.col-laifọwọyi

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>

Standalone iwe kilasi

Awọn .col-*kilasi tun le ṣee lo ni ita kan .rowlati fun ano ni iwọn kan pato. Nigbakugba ti awọn kilasi iwe ba lo bi awọn ọmọde ti kii ṣe taara ti ọna kan, awọn padding ti wa ni ti lọ.

.col-3: ibú 25%

.col-sm-9: iwọn ti 75% loke 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>

Awọn kilasi le ṣee lo papọ pẹlu awọn ohun elo lati ṣẹda awọn aworan ti o lelefo loju omi. Rii daju pe o fi ipari si akoonu naa sinu iwe .clearfixipari lati ko oju omi leefofo kuro ti ọrọ ba kuru.

A ìpínrọ ti placeholder ọrọ. A n lo o nibi lati ṣafihan lilo kilasi clearfix. A n ṣafikun pupọ awọn gbolohun ọrọ ti ko ni itumọ nibi lati ṣe afihan bi awọn ọwọn ṣe n ṣe ajọṣepọ nibi pẹlu aworan ti o leefofo.

Bi o ṣe le rii awọn oju-iwe naa pẹlu oore-ọfẹ yi aworan ti o leefofo. Bayi fojuinu bawo ni eyi yoo ṣe rii pẹlu diẹ ninu akoonu gangan ni ibi, dipo ki o kan ọrọ ibi ibi alaidun yii ti o tẹsiwaju ati siwaju, ṣugbọn nitootọ ko ṣe alaye alaye ojulowo ni. O kan gba aaye ati pe ko yẹ ki o ka ni gaan.

Ati sibẹsibẹ, nibi o wa, tun ni itara ni kika ọrọ ibi-aye yii, nireti fun awọn oye diẹ sii, tabi diẹ ninu awọn ẹyin Ọjọ ajinde Kristi ti o farapamọ ti akoonu. Awada, boya. Laanu, ko si eyi nibi.

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>