in English

andry

Ianaro ny fomba hanovana tsanganana miaraka amin'ny safidy vitsivitsy amin'ny fampifanarahana, ny filaharana ary ny fanonerana noho ny rafitra flexbox grid. Fanampin'izay, jereo ny fomba fampiasana kilasin'ny tsanganana hitantana ny sakan'ireo singa tsy misy grid.

Amin'ity pejy ity

Fampitandremana! Aza hadino ny mamaky ny pejy Grid aloha alohan'ny hidirana amin'ny fomba hanovana sy hanamboarana ny tsanganana grids.

Ny fomba fiasan'izy ireo

Miorina amin'ny rafitra flexbox an'ny grid ny tsanganana. Ny Flexbox dia midika fa manana safidy amin'ny fanovana tsanganana tsirairay sy fanovana vondrona tsanganana eo amin'ny haavon'ny laharana isika . Mifidy ny fomba hitomboan'ny tsanganana, hihena na hiova hafa ianao.
Rehefa manangana rindran-tsarimihetsika dia mandeha amin'ny tsanganana ny atiny rehetra. Ny ambaratongan'ny rindran'i Bootstrap dia avy amin'ny kaontenera mankany amin'ny andalana mankany amin'ny tsanganana mankany amin'ny atiny. Amin'ny fotoana tsy fahita firy, azonao atao ny manambatra votoaty sy tsanganana, saingy tadidio fa mety hisy vokany tsy ampoizina.
Ny Bootstrap dia misy kilasy efa voafaritra mialoha ho an'ny famoronana endrika haingana sy mandray andraikitra. Miaraka amin'ny teboka fahatapahana enina sy tsanganana am-polony isaky ny ambaratongan-tsarimihetsika, dia manana kilasy am-polony efa natsangana ho anao izahay mba hamoronana drafitra tianao. Ity dia azo esorina amin'ny alàlan'ny Sass raha tianao.

Fanitsiana

Mampiasà fitaovana fampifanarahana flexbox mba hampirindra ny tsanganana mitsangana sy mitsivalana.

Fandrindrana mitsangana

Iray amin'ireo tsanganana telo

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>

Iray amin'ireo tsanganana telo

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>

Fandrindrana marindrano

Iray amin'ireo tsanganana roa

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>

Famonosana tsanganana

Raha tsanganana mihoatra ny 12 no apetraka ao anatin'ny andalana iray, ny vondrona tsirairay misy tsanganana fanampiny dia, amin'ny maha singa iray, dia mifono tsipika vaovao.

.col-9

.col-4
Hatramin'ny 9 + 4 = 13 > 12, ity div misy tsanganana 4 ity dia mifamatotra amin'ny tsipika vaovao ho singa iray mifanakaiky.

.col-6
Mitohy manaraka ny tsipika vaovao ny tsanganana manaraka.

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>

Tapaka ny tsanganana

Ny fanapahana tsanganana amin'ny tsipika vaovao ao amin'ny flexbox dia mitaky hack kely: ampio singa iray miaraka width: 100%amin'izay tianao hametahana ny tsangananao amin'ny tsipika vaovao. Amin'ny ankapobeny dia vita amin'ny .rows maromaro izany, saingy tsy ny fomba fampiharana rehetra no afaka mitantana izany.

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

Azonao atao ihany koa ny mampihatra an'io fiatoana io amin'ny toerana fiatoana manokana miaraka amin'ireo fitaovana fampirantiana mandray andraikitra .

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

Fandaminana indray

Manafatra kilasy

Mampiasà .order-kilasy hifehezana ny filaharan'ny maso ny atiny. Ireo kilasy ireo dia mamaly, noho izany dia azonao atao ny mametraka ny orderteboka fiatoana (oh, .order-1.order-md-2). Ahitana fanohanana amin'ny 1alàlan'ny 5ambaratonga enina rehetra.

Voalohany ao amin'ny DOM, tsy misy baiko ampiharina

Faharoa ao amin'ny DOM, miaraka amin'ny baiko lehibe kokoa

Fahatelo ao amin'ny DOM, misy baiko 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>

Misy ihany koa ireo kilasy mamaly .order-firstsy .order-lastmanova ny ordersinga iray amin'ny fampiharana order: -1sy order: 6, tsirairay avy. Ireo kilasy ireo koa dia azo ampifandraisina amin'ireo .order-*kilasy voaisa raha ilaina.

Voalohany ao amin'ny DOM, voabaiko farany

Faharoa ao amin'ny DOM, tsy voalamina

Fahatelo ao amin'ny DOM, voabaiko voalohany

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>

Andry offset

Azonao atao ny manonitra ny tsanganana tsanganana amin'ny fomba roa: ny .offset-kilasin'ny grids mandray andraikitra sy ny fampiasa amin'ny sisiny . Ny kilasin'ny grid dia mifanandrify amin'ny tsanganana raha toa ka mahasoa kokoa ny sisiny ho an'ny fandrindrana haingana izay miovaova ny sakan'ny offset.

Kilasy offset

Afindrao miankavanana ny tsanganana amin'ny fampiasana .offset-md-*kilasy. Ireo kilasy ireo dia mampitombo ny sisiny havia amin'ny tsanganana amin'ny *tsanganana. Ohatra, .offset-md-4mihetsika .col-md-4mihoatra ny tsanganana efatra.

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

Ho fanampin'ny famafana tsanganana amin'ny toerana fiatoana mamaly, mety mila averinao ny offset. Jereo ity hetsika ity ao amin'ny ohatra grid .

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

Fampiasana margin

Miaraka amin'ny fifindrana mankany amin'ny flexbox ao amin'ny v4, azonao atao ny mampiasa fitaovana margin toy .me-autony fanerena ny tsanganana mpiray tam-po amin'ny tsirairay.

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

Kilasy tsanganana tokana

Ny .col-*kilasy dia azo ampiasaina ivelan'ny a .rowmba hanomezana singa iray ny sakany manokana. Isaky ny ampiasaina ho toy ny ankizy tsy mivantana amin'ny laharana ny kilasy tsanganana, dia esorina ny paddings.

.col-3: sakany 25%

.col-sm-9: sakan'ny 75% ambonin'ny teboka tapaka 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>

Ny kilasy dia azo ampiasaina miaraka amin'ny fitaovana mba hamoronana sary mitsingevana mandray andraikitra. Ataovy azo antoka ny famonosana ny atiny amin'ny .clearfixfonony mba hanesorana ny mitsingevana raha fohy kokoa ny lahatsoratra.

Fehintsoratra misy ny toerana misy toerana. Ampiasainay eto izany hanehoana ny fampiasana ny kilasy clearfix. Manampy andian-teny vitsivitsy tsy misy dikany eto izahay mba hanehoana ny fifandraisan'ny tsanganana eto amin'ny sary mitsingevana.

Araka ny hitanao, ny fehintsoratra dia mifono tsara manodidina ilay sary mitsingevana. Alaivo sary an-tsaina hoe ahoana no mety ho endriky ny votoaty tena izy eto, fa tsy ity lahatsoratra mankaleo toerana ity izay mitohy hatrany, fa tsy mampita vaovao azo tsapain-tanana. Mandany toerana fotsiny izy io ary tsy tokony hovakiana.

Na izany aza, eto ianao, mbola maharitra amin'ny famakiana ity lahatsoratry ny toerana misy ny toerana ity, manantena hevi-baovao bebe kokoa, na atody miafina amin'ny atiny. Vazivazy angamba. Indrisy fa tsy misy an'izany eto.

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>