Likholomo

Ithute mokhoa oa ho fetola likholomo ka likhetho tse 'maloa bakeng sa ho tsamaisana, ho odara le ho lokisa, ka lebaka la sistimi ea rona ea flexbox grid. Hape, bona mokhoa oa ho sebelisa litlelase tsa kholomo ho laola bophara ba likarolo tseo e seng tsa grid.

Leqepheng lena

Hlokomela! Etsa bonnete ba hore u bala leqephe la Grid pele pele u kenella ka har'a mokhoa oa ho fetola le ho etsa likholomo tsa grid ea hau.

Kamoo li sebetsang kateng

Likholomo li haha holima meralo ea flexbox ea grid. Flexbox e bolela hore re na le likhetho tsa ho fetola likholomo ka bomong le ho fetola lihlopha tsa kholomo maemong a mela . U khetha hore na litšiea li hola joang, li honyela kapa li fetoha joang.
Ha ho etsoa meralo ea marang-rang, litaba tsohle li tsamaea ka likholomo. Boemo ba grid ea Bootstrap bo tloha ho sets'oants'o ho ea mola ho isa kholomong ho ea ho litaba tsa hau. Maemong a sa tloaelehang, o ka kopanya litaba le kholomo, empa hlokomela hore ho ka ba le litlamorao tse sa lebelloang.
Bootstrap e kenyelletsa litlelase tse boletsoeng esale pele bakeng sa ho theha meralo e potlakileng, e arabelang. Ka li-breakpoints tse tšeletseng le litšiea tse leshome le metso e 'meli karolong e' ngoe le e 'ngoe ea grid, re na le lihlopha tse ngata tse seng li ntse li etselitsoe hore u iketsetse meralo eo u e batlang. Sena se ka emisoa ka Sass haeba u lakatsa.

Ho tsamaisana

Sebelisa lisebelisoa tsa tekano ea flexbox ho hokahanya likholomo tse otlolohileng le tse tšekaletseng.

Tsepamiso e otlolohileng

E 'ngoe ea litšiea tse tharo

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

E 'ngoe ea litšiea tse tharo

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

Ho tsamaisana le maemo

E 'ngoe ea litšiea tse peli

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

Ho phuthela khola

Haeba likholomo tse fetang 12 li behiloe ka har'a mola o le mong, sehlopha ka seng sa likholomo tse eketsehileng, e le yuniti e le 'ngoe, se tla thatela moleng o mocha.

.col-9

.col-4
Ho tloha ha 9 + 4 = 13 > 12, div ena ea 4-column-wide e phuthoa moleng o mocha joalo ka yuniti e le 'ngoe e kopaneng.

.col-6 Likholomo tse
latelang li tsoela pele moleng o mocha.

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

Likhefutso tsa khola

Ho pshatla litšiea ho ea moleng o mocha ka har'a flexbox ho hloka ho qhekella hanyenyane: eketsa ntho le width: 100%kae kapa kae moo u batlang ho phuthela melapo ea hau moleng o mocha. Ka tloaelo sena se finyelloa ka li-multiple .rows, empa ha se mokhoa o mong le o mong oa ts'ebetsong o ka ikarabellang bakeng sa sena.

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

U ka boela ua sebelisa khefu ena libakeng tse ikhethileng ka lisebelisoa tsa rona tse arabelang .

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

Ho hlophisa bocha

Odara lihlopha

Sebelisa .order-litlelase ho laola tatellano ea pono ea litaba tsa hau. Litlelase tsena lia arabela, ka hona, u ka khona ho beha sebaka sa " orderbreakpoint" (mohlala, .order-1.order-md-2). E kenyelletsa tšehetso bakeng sa 1ho 5pholletsa le mekhahlelo eohle e tšeletseng ea grid.

Ea pele ho DOM, ha ho taelo e sebelisitsoeng

Ea bobeli ho DOM, ka odara e kholoanyane

Ea boraro ho DOM, ka taelo ea 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>

Ho boetse ho na le lihlopha tse arabelang .order-firstle .order-lasttse fetolang orderntho e itseng ka ho sebelisa order: -1le order: 6, ka ho latellana. Litlelase tsena le tsona li ka tsoakoa le .order-*lihlopha tse baloang ka linomoro ha ho hlokahala.

Ea pele ka DOM, e laetsoe ho qetela

Ea bobeli ho DOM, e sa laoleheng

Ea boraro ho DOM, e laetsoe pele

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

Litšiea tsa offsetting

O ka hlakola likholomo tsa grid ka mekhoa e 'meli: .offset-litlelase tsa rona tse arabelang le lisebelisoa tsa rona tsa marang-rang . Lihlopha tsa li-grid li lekane ho bapisa likholomo ha li-margin li na le thuso bakeng sa meralo e potlakileng moo bophara ba offset bo fetohang.

Lihlopha tsa Offset

Tsamaisa likholomo ka ho le letona u sebelisa .offset-md-*lihlopha. Lihlopha tsena li eketsa karolo e ka ho le letšehali ea kholomo ka *likholomo. Ka mohlala, .offset-md-4e tsamaea .col-md-4ka holim'a likholomo tse 'nè.

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

Ntle le ho hlakola likholomo libakeng tse arabelang, ho ka 'na ha hlokahala hore u tsosolose li-offsets. Sheba sena ka liketso mohlaleng oa marang-rang .

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

Lisebelisoa tsa marang-rang

Ka ho fallela ho flexbox ho v4, u ka sebelisa lisebelisoa tsa marang-rang tse kang .me-autoho qobella litšiea tsa bana ba motho ho tloha ho tse ling.

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

Lihlopha tse ikemetseng tsa likholomo

Lihlopha .col-*li ka boela tsa sebelisoa ka ntle ho a .rowho fana ka element bophara bo itseng. Nako le nako ha litlelase tsa kholomo li sebelisoa e le bana ba sa tobang ka tatellano, li-paddings lia siuoa.

.col-3: bophara ba 25%

.col-sm-9: bophara ba 75% ka holimo ho sm breakpoint

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

Litlelase li ka sebelisoa hammoho le lisebelisoa ho etsa litšoantšo tse phaphametseng tse arabelang. Etsa bonnete ba hore o thatela litaba ka har'a .clearfixsephutheloana ho hlakola float haeba mongolo o le khuts'oane.

Serapa sa mongolo oa setšoantšisi. Re e sebelisa mona ho bonts'a ts'ebeliso ea sehlopha sa clearfix. Re kenya mantsoe a seng makae a se nang moelelo mona ho bontša hore na likholomo li sebelisana joang le setšoantšo se phaphametseng.

Joalo ka ha u bona lirapa li thatela ka bokhabane setšoantšo se phaphametseng. Joale ak'u nahane hore na sena se ka shebahala joang ka litaba tse ling tsa 'nete ka mona, ho fapana le sengoloa sena se tenang se ntseng se tsoela pele, empa ha se fane ka tlhaiso-leseling e bonahalang ho. E nka sebaka feela 'me ha ea lokela ho baloa.

Leha ho le joalo, ke uena enoa, u ntse u phehella ho bala mongolo oa sets'oants'o sena, ka tšepo ea ho fumana lintlha tse ling, kapa lehe le patiloeng la paseka. Motlae, mohlomong. Ka bomalimabe, ha ho letho la seo mona.

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