Kradsistemo

Uzu nian potencan poŝtelefonan unue flekskeston por konstrui aranĝojn de ĉiuj formoj kaj grandecoj danke al dekdu kolumna sistemo, kvin defaŭltaj respondemaj niveloj, Sass-variabloj kaj miksaĵoj kaj dekoj da antaŭdifinitaj klasoj.

Kiel ĝi funkcias

La kradsistemo de Bootstrap uzas serion da ujoj, vicoj kaj kolumnoj por aranĝi kaj vicigi enhavon. Ĝi estas konstruita kun flexbox kaj estas plene respondema. Malsupre estas ekzemplo kaj profunda rigardo pri kiel la krado kuniĝas.

Novaĵo aŭ ne konas flexbox? Legu ĉi tiun gvidilon pri flekskesto de CSS Tricks por fono, terminologio, gvidlinioj kaj kodaj fragmentoj.

Unu el tri kolumnoj

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

La supra ekzemplo kreas tri egallarĝajn kolumnojn sur malgrandaj, mezaj, grandaj kaj ekstra grandaj aparatoj uzante niajn antaŭdifinitajn kradklasojn. Tiuj kolumnoj estas centritaj en la paĝo kun la gepatro .container.

Malkonstruante ĝin, jen kiel ĝi funkcias:

Ujoj provizas rimedon por centri kaj horizontale paŝi la enhavon de via retejo. Uzu .containerpor respondema piksela larĝo aŭ .container-fluidpor width: 100%ĉiuj grandecoj de vidpunkto kaj aparato.
Vicoj estas envolvaĵoj por kolonoj. Ĉiu kolono havas horizontalan padding(nomitan kanalon) por kontroli la spacon inter ili. Ĉi paddingtio tiam estas kontraŭagata sur la vicoj kun negativaj randoj. Tiel, la tuta enhavo en viaj kolumnoj estas vide vicigita maldekstre.
En krada aranĝo, enhavo devas esti metita ene de kolumnoj kaj nur kolumnoj povas esti tujaj filoj de vicoj.
Danke al flexbox, kradaj kolumnoj sen specifita widthaŭtomate aranĝos kiel egallarĝaj kolumnoj. Ekzemple, kvar okazoj de .col-smĉiu aŭtomate estos 25% larĝa de la malgranda rompopunkto kaj supren. Vidu la sekcion pri aŭtomata aranĝo de kolumnoj por pliaj ekzemploj.
Kolumnaj klasoj indikas la nombron da kolumnoj, kiujn vi ŝatus uzi el la eblaj 12 por vico. Do, se vi volas tri egallarĝajn kolumnojn laŭlonge, vi povas uzi .col-4.
Kolumnoj widthestas fiksitaj en procentoj, do ili ĉiam estas fluidaj kaj grandecoj rilate al sia gepatra elemento.
Kolumnoj havas horizontalajn paddingpor krei la kanalojn inter unuopaj kolumnoj, tamen vi povas forigi la marginel vicoj kaj paddingel kolumnoj per .no-gutterssur la .row.
Por ke la krado responda, estas kvin kradromppunktoj, unu por ĉiu respondema rompopunkto : ĉiuj rompopunktoj (ekstre malgrandaj), malgrandaj, mezaj, grandaj kaj tro grandaj.
Kradaj rompopunktoj baziĝas sur minimumaj larĝaj amaskomunikiloj, tio signifas, ke ili validas por tiu unu rompopunkto kaj ĉiuj tiuj super ĝi (ekz. .col-sm-4validas por malgrandaj, mezaj, grandaj kaj ekstraj aparatoj, sed ne la unua xsrompopunkto).
Vi povas uzi antaŭdifinitajn kradklasojn (kiel .col-4) aŭ Sass-miksaĵojn por pli semantika markado.

Estu konscia pri la limigoj kaj eraroj ĉirkaŭ flexbox , kiel la malkapablo uzi kelkajn HTML-elementojn kiel fleksujojn .

Kradaj opcioj

Dum Bootstrap uzas ems aŭ rems por difini plej multajn grandecojn, pxs estas uzataj por kradaj rompopunktoj kaj ujo-larĝoj. Ĉi tio estas ĉar la larĝo de vidujo estas en pikseloj kaj ne ŝanĝiĝas laŭ la tiparo .

Vidu kiel aspektoj de la Bootstrap kradsistemo funkcias tra pluraj aparatoj kun oportuna tablo.

	Ekstrema malgranda <576px	Malgranda ≥576px	Meza ≥768px	Granda ≥992px	Ekstre granda ≥1200px
Maksimuma ujo-larĝo	Neniu (aŭtomata)	540 px	720 px	960 px	1140px
Klasprefikso	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
nombro da kolumnoj	12
Larĝo de kanaleto	30 px (15 px sur ĉiu flanko de kolono)
Nestebla	Jes
Kolumna ordigo	Jes

Aŭtomata aranĝo kolumnoj

Uzu romppunkto-specifajn kolumnklasojn por facila kolumna grandeco sen eksplicita numerita klaso kiel .col-sm-6.

Egale-larĝo

Ekzemple, jen du kradaj aranĝoj, kiuj validas por ĉiu aparato kaj vidfenestro, de xsĝis xl. Aldonu ajnan nombron da unuo-malpli klasoj por ĉiu rompo kiun vi bezonas kaj ĉiu kolumno estos la sama larĝo.

1 el 2

2 el 2

1 el 3

2 el 3

3 el 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Egal-larĝa plurlinio

Kreu egallarĝajn kolumnojn, kiuj ampleksas plurajn liniojn, enmetante .w-100kolumnojn kie vi volas, ke la kolumnoj rompas al nova linio. Faru la paŭzojn respondajn miksante .w-100kun iuj respondemaj ekranaj iloj .

Estis Safara flekskesto-cimo kiu malhelpis ĉi tion funkcii sen eksplicita flex-basisaŭ border. Estas solvoj por pli malnovaj foliumilaj versioj, sed ili ne devus esti necesaj se viaj celaj retumiloj ne falas en la bugraj versioj.

kol

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

Agordi unu kolumnan larĝon

Aŭtomata aranĝo por flexbox kradaj kolumnoj ankaŭ signifas, ke vi povas agordi la larĝon de unu kolumno kaj havi la gefratajn kolumnojn aŭtomate regrandigi ĉirkaŭ ĝi. Vi povas uzi antaŭdifinitajn kradklasojn (kiel montrite sube), kradmiksaĵojn aŭ enliniajn larĝojn. Notu, ke la aliaj kolumnoj regrandigos sendepende de la larĝo de la centra kolumno.

1 el 3

2 el 3 (pli larĝa)

3 el 3

1 el 3

2 el 3 (pli larĝa)

3 el 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Varia larĝa enhavo

Uzu col-{breakpoint}-autoklasojn por grandeco kolumnoj surbaze de la natura larĝo de ilia enhavo.

1 el 3

Varia larĝa enhavo

3 el 3

1 el 3

Varia larĝa enhavo

3 el 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Respondema klasoj

La krado de Bootstrap inkluzivas kvin nivelojn de antaŭdifinitaj klasoj por konstrui kompleksajn respondemajn aranĝojn. Agordu la grandecon de viaj kolumnoj sur ekstraj, malgrandaj, mezaj, grandaj aŭ tro grandaj aparatoj kiel vi konvenas.

Ĉiuj rompopunktoj

Por kradoj, kiuj estas la samaj de la plej malgranda el aparatoj ĝis la plej granda, uzu la .colkaj .col-*klasojn. Specifu numeritan klason kiam vi bezonas aparte grandan kolumnon; alie, bonvolu resti al .col.

kol

kol-8

kol-4

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

Stakitaj al horizontalo

Uzante ununuran aron de .col-sm-*klasoj, vi povas krei bazan kradsistemon, kiu komenciĝas stakigita kaj iĝas horizontala ĉe la malgranda rompopunkto ( sm).

kol-sm-8

kol-sm-4

kol-sm

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Miksi kaj kongrui

Ĉu vi ne volas, ke viaj kolumnoj simple stakiĝas en iuj kradaj niveloj? Uzu kombinaĵon de malsamaj klasoj por ĉiu nivelo laŭbezone. Vidu la ekzemplon sube por pli bona ideo pri kiel ĉio funkcias.

.col-md-8

.col-6 .col-md-4

.kol-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Defluiloj

Defluiloj povas esti respondeme alĝustigitaj per romppunkto-specifa remburaĵo kaj negativaj marĝenaj utilaj klasoj. Por ŝanĝi la kanaletojn en donita vico, parigu negativan marĝenservaĵon sur la .rowkaj kongruaj remburaĵservaĵoj sur la .cols. Ankaŭ la .containeraŭ .container-fluidpatro eble devos esti alĝustigita por eviti nedeziratan superfluon, uzante denove kongruan kompletigan ilon.

Jen ekzemplo de personigo de la krado Bootstrap ĉe la granda ( lg) rompopunkto kaj supre. Ni pliigis la .colremburaĵon per .px-lg-5, kontraŭagis tion per .mx-lg-n5sur la gepatro .rowkaj poste ĝustigis la .containerenvolvaĵon per .px-lg-5.

Propra kolumna kompletigo

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Vicaj kolumnoj

Uzu la respondemajn .row-cols-*klasojn por rapide agordi la nombron da kolumnoj, kiuj plej bone prezentas vian enhavon kaj aranĝon. Dum normalaj .col-*klasoj validas por la unuopaj kolumnoj (ekz., .col-md-4), la vicaj kolumnoj klasoj estas fiksitaj sur la gepatro .rowkiel ŝparvojo.

Uzu ĉi tiujn vickolumnajn klasojn por rapide krei bazajn kradajn aranĝojn aŭ por kontroli viajn kartajn aranĝojn.

Kolumno

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Kolumno

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Kolumno

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Kolumno

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Kolumno

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Vi ankaŭ povas uzi la akompanan Sass-miksaĵon, row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Vicigo

Uzu flekskeston vicigi ilojn por vertikale kaj horizontale vicigi kolumnojn. Internet Explorer 10-11 ne subtenas vertikalan vicigon de flekseblaj eroj kiam la fleksebla ujo havas min-heightkiel montrite sube. Vidu Flexbugs #3 por pliaj detaloj.

Vertikala vicigo

Unu el tri kolumnoj

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

Unu el tri kolumnoj

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

Horizontala vicigo

Unu el du kolumnoj

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

Neniuj defluiloj

La defluiloj inter kolumnoj en niaj antaŭdifinitaj kradaj klasoj povas esti forigitaj per .no-gutters. Ĉi tio forigas la negativajn margins de .rowkaj la horizontalon paddingde ĉiuj tujaj filaj kolumnoj.

Jen la fontkodo por krei ĉi tiujn stilojn. Notu, ke kolumnoj anstataŭas nur la unuaj filaj kolumnoj kaj estas celitaj per atributo-elektilo . Dum tio generas pli specifan elektilon, kolumnplenigaĵo ankoraŭ povas esti plue personecigita kun interspacaj utilecoj .

Ĉu vi bezonas rando-al-randan dezajnon? Forigu la gepatron .containeraŭ .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

En la praktiko, jen kiel ĝi aspektas. Notu, ke vi povas daŭre uzi ĉi tion kun ĉiuj aliaj antaŭdifinitaj kradaj klasoj (inkluzive de kolumnlarĝoj, respondemaj niveloj, reordigoj kaj pli).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Kolumna envolvado

Se pli ol 12 kolumnoj estas metitaj ene de ununura vico, ĉiu grupo de kromaj kolumnoj, kiel unu unuo, envolvos novan linion.

.kol-9

.col-4
Ekde 9 + 4 = 13 > 12, ĉi tiu 4-kolumna larĝa div estas envolvita al nova linio kiel unu apuda unuo.

.col-6
Postaj kolumnoj daŭras laŭ la nova linio.

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

Kolumno rompas

Rompi kolumnojn al nova linio en flexbox postulas malgrandan hakon: aldonu elementon kun width: 100%kie ajn vi volas envolvi viajn kolumnojn al nova linio. Normale tio estas plenumita per multoblaj .rows, sed ne ĉiu efektivigmetodo povas respondeci pri tio.

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

Vi ankaŭ povas apliki ĉi tiun paŭzon ĉe specifaj rompopunktoj per niaj respondemaj montraj iloj .

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

Reordigo

Ordigi klasojn

Uzu .order-klasojn por kontroli la vidan ordon de via enhavo. Ĉi tiuj klasoj estas respondemaj, do vi povas agordi la orderper rompopunkto (ekz, .order-1.order-md-2). Inkluzivas subtenon por 1tra 12ĉiuj kvin kradaj niveloj.

Unue en DOM, neniu ordo aplikita

Due en DOM, kun pli granda ordo

Tria en DOM, kun ordo de 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Estas ankaŭ respondemaj .order-firstkaj .order-lastklasoj kiuj ŝanĝas la orderde elemento per aplikado order: -1kaj order: 13( order: $columns + 1), respektive. Ĉi tiuj klasoj ankaŭ povas esti intermiksitaj kun la numeritaj .order-*klasoj laŭbezone.

Unue en DOM, mendita lasta

Due en DOM, neordigita

Tria en DOM, ordonita unue

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

Ofsecaj kolumnoj

Vi povas kompensi kradkolumnojn en du manieroj: niaj respondemaj .offset-kradklasoj kaj niaj marĝenaj utilecoj . Kradklasoj estas grandigitaj por kongrui al kolumnoj dum marĝenoj estas pli utilaj por rapidaj aranĝoj kie la larĝo de la ofseto estas varia.

Ofsetaj klasoj

Movu kolumnojn dekstren uzante .offset-md-*klasojn. Ĉi tiuj klasoj pliigas la maldekstran marĝenon de kolono per *kolumnoj. Ekzemple, .offset-md-4moviĝas .col-md-4super kvar kolumnoj.

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

Krom kolumnpurigo ĉe respondemaj rompopunktoj, vi eble bezonos restarigi kompensojn. Vidu ĉi tion en ago en la kradekzemplo .

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

Marĝenaj utilecoj

Kun la movo al flexbox en v4, vi povas uzi marĝenajn utilecojn kiel .mr-autodevigi gefratajn kolumnojn unu de la alia.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Nesto

Por nesti vian enhavon kun la defaŭlta krado, aldonu novan .rowkaj aron da .col-sm-*kolumnoj en ekzistanta .col-sm-*kolumno. Nestitaj vicoj devus inkluzivi aron da kolumnoj kiuj sumiĝas ĝis 12 aŭ malpli (ne necesas, ke vi uzu ĉiujn 12 disponeblajn kolumnojn).

Nivelo 1: .col-sm-9

Nivelo 2: .col-8 .col-sm-6

Nivelo 2: .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass miksaĵoj

Kiam vi uzas la fontajn Sass-dosierojn de Bootstrap, vi havas la eblon uzi Sass-variablojn kaj miksaĵojn por krei kutimajn, semantikajn kaj respondemajn paĝajn aranĝojn. Niaj antaŭdifinitaj kradaj klasoj uzas ĉi tiujn samajn variablojn kaj miksaĵojn por provizi tutan serion da uzeblaj klasoj por rapidaj respondemaj aranĝoj.

Variabloj

Variabloj kaj mapoj determinas la nombron da kolumnoj, la defluillarĝon, kaj la amaskomunikilaron demandpunkton ĉe kiu komenci flosajn kolonojn. Ni uzas ĉi tiujn por generi la antaŭdifinitajn kradklasojn dokumentitajn supre, same kiel por la kutimaj miksaĵoj listigitaj sube.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Miksinoj

Miksinoj estas uzitaj lige kun la kradvariabloj por generi semantikan CSS por individuaj kradkolumnoj.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Ekzempla uzado

Vi povas modifi la variablojn al viaj propraj kutimaj valoroj, aŭ simple uzi la miksaĵojn kun iliaj defaŭltaj valoroj. Jen ekzemplo de uzado de la defaŭltaj agordoj por krei du-kolumnan aranĝon kun interspaco.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Ĉefa enhavo

Malĉefa enhavo

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Agordo de la krado

Uzante niajn enkonstruitajn krad-variablojn kaj mapojn Sass, eblas tute personecigi la antaŭdifinitajn kradklasojn. Ŝanĝu la nombron da niveloj, la amaskomunikilaraj demandaj dimensioj kaj la ujlarĝoj—tiam rekompilu.

Kolumnoj kaj defluiloj

La nombro da kradaj kolumnoj povas esti modifita per Sass-variabloj. $grid-columnsestas uzata por generi la larĝojn (en procentoj) de ĉiu individua kolumno dum $grid-gutter-widthfiksas la larĝon por la kolumnoj defluiloj.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Kradaj niveloj

Movante preter la kolumnoj mem, vi ankaŭ povas agordi la nombron da kradaj niveloj. Se vi volus nur kvar kradnivelojn, vi ĝisdatigus la $grid-breakpointskaj $container-max-widthsal io tia:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Kiam vi faras ajnajn ŝanĝojn al la Sass-variabloj aŭ mapoj, vi devos konservi viajn ŝanĝojn kaj rekompili. Farante tion eligos tute novan aron de antaŭdifinitaj kradaj klasoj por kolumnlarĝoj, ofsetoj kaj mendo. Respondema videblecaj utilecoj ankaŭ estos ĝisdatigitaj por uzi la kutimajn rompopunktojn. Certiĝu agordi kradvalorojn en px(ne rem, emaŭ %).