sîstema Grid

Bi saya pergalek diwanzdeh stûnan, pênc rêzikên xwerû yên bersivdar, guhêrbar û mixînên Sass, û bi dehan çînên pêşwextkirî, tora flexbox-a meya yekem-mobîl a hêzdar bikar bînin da ku sêwiranên ji her şekl û mezinahiyê ava bikin.

Çawa dixebite

Pergala torê ya Bootstrap rêzek konteyneran, rêzik û stûnan bikar tîne da ku naverok saz û rêz bike. Ew bi flexbox ve hatî çêkirin û bi tevahî bersivdar e. Li jêr mînakek û nihêrînek kûr heye ku meriv çawa tevna hev dike.

Nû bi flexbox re an nizanin? Vê rêberê flexbox-ê ya CSS Tricks ji bo paşnav, termînolojî, rêbername, û perçeyên kodê bixwînin.

Yek ji sê stûnan

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

Mînaka li jor sê stûnên bi firehiya wekhev li ser cîhazên piçûk, navîn, mezin û zêde mezin bi karanîna çînên tora meya pêşwextkirî diafirîne. Ew stûn di nav rûpelê de bi dêûbav re têne navend kirin .container.

Bi şikandina wê, li vir çawa dixebite:

Konteyner amûrek peyda dike ku naverok û horizontî naverokên malpera we dakêşin. Ji .containerbo firehiyek pixelek bersivdar an .container-fluidji bo width: 100%hemî pîvanên dîmenderê û cîhazê bikar bînin.
Rêz ji bo stûnan pêçan in. paddingJi bo kontrolkirina cîhê di navbera wan de her stûnek horizontî heye (ku jê re goşt tê gotin). Dûv re ev paddingyek li ser rêzên bi margîneyên neyînî tê berevajîkirin. Bi vî rengî, hemî naveroka di stûnên we de bi dîtbarî li milê çepê têne rêz kirin.
Di sêwirana torê de, naverok divê di nav stûnan de were danîn û tenê stûn dikarin yekser zarokên rêzikan bin.
Bi saya flexbox, stûnên torê yên bêyî diyarkirî widthdê bixweber wekî stûnên firehiya yeksan werin sêwirandin. Mînakî, çar nimûneyên .col-smdê her yek bixweber ji xala veqetînê ya piçûk û jor 25% fireh bin. Ji bo nimûneyên bêtir li beşa stûnên xweser- sazkirinê binêrin.
Dersên stûnê hejmara stûnên ku hûn dixwazin ji 12-yên gengaz ên di rêzê de bikar bînin destnîşan dikin. Ji ber vê yekê, heke hûn sê stûnên bi firehiya wekhev dixwazin, hûn dikarin bikar bînin .col-4.
Stûnên widths bi sedî têne danîn, ji ber vê yekê ew her gav li gorî hêmana dêûbavê xwe şil û mezin in.
Stûnên horizontî hene paddingda ku di navbera stûnên takekesî de gemaran biafirînin, lêbelê, hûn dikarin marginji rêzan û paddingji stûnên bi .no-guttersser .row.
Ji bo ku torê bibe bersiv, pênc xalên şikestinê hene, yek ji bo her xala veqetandinê ya bersivdar : Hemî xalên veqetandinê (piçûk zêde), piçûk, navîn, mezin û zêde mezin.
Xalên veqetandinê yên torê li ser bingeha pirsên medyaya herî kêm fireh in, tê vê wateyê ku ew li ser wê xala veqetînê û hemî yên li jor wê bicîh dibin (mînak, .col-sm-4ji bo cîhazên piçûk, navîn, mezin û zêde mezin derbas dibe, lê ne xala xsveqetînê ya yekem).
Hûn dikarin ji bo nîşankirina bêtir semantîk dersên torê yên pêşwextkirî (wek .col-4) an Sass mîksên bikar bînin.

Hay ji sînorkirin û xeletiyên li dora flexbox-ê hebin , mîna nebûna karanîna hin hêmanên HTML-ê wekî konteynerên nerm .

Vebijarkên Grid

Dema ku Bootstrap ems an rems-yê ji bo danasîna pir pîvanan bikar tîne, pxs ji bo xalên veqetandinê û firehiyên konteynerê têne bikar anîn. Ji ber ku firehiya porta dîtinê bi pixel e û bi mezinahiya tîpan nayê guhertin .

Binêrin ka aliyên pergala tora Bootstrap-ê li ser gelek cîhazên bi tabloyek bikêr çawa dixebitin.

	Zêde piçûk <576px	Piçûk ≥576px	Navîn ≥768px	Mezin ≥992px	Zêde mezin ≥1200px
Firehiya konteynerê herî zêde	Tune (otomatîk)	540px	720px	960px	1140px
Pêşgira dersê	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# stûnan	12
Firehiya gulikê	30px (15px li her aliyê stûnekê)
Nestable	Erê
Siparîşa stûnê	Erê

Stûnên Auto-layout

Ji bo mezinbûna stûnê ya hêsan bêyî çînek jimarekirî ya eşkere mîna .col-sm-6.

Wekhev-fireh

Mînakî, li vir du sêwiranên torê hene ku li ser her amûr û dîmenderê, ji xsheya xl. Ji bo her xala veqetandinê ya ku hûn hewce ne, hejmarek dersên yekîneyek kêm zêde bikin û her stûn dê heman firehiyê be.

1 ji 2

2 ji 2

1 ji 3

2 ji 3

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

Stûnên bi firehiya wekhev dikarin di çend rêzan de werin şikandin, lê xeletiyek Safari flexbox hebû ku rê li ber vê yekê girt ku bêyî eşkere flex-basisan border. Ji bo guhertoyên gerokên kevntir rêgir hene, lê heke hûn nûve bin divê ew ne hewce bin.

Ling

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

Sazkirina yek width stûnê

Vesazkirina otomatîkî ya ji bo stûnên tora flexbox di heman demê de tê vê wateyê ku hûn dikarin firehiya yek stûnê destnîşan bikin û stûnên xwişk û bira bixweber li dora wê mezin bibin. Hûn dikarin çînên torê yên pêşwextkirî (wek ku li jêr tê xuyang kirin), mîksên torê, an firehiyên hundurîn bikar bînin. Bala xwe bidinê ku stûnên din dê mezinahiya stûna navendê nebe.

1 ji 3

2 ji 3 (berfireh)

3 ji 3

1 ji 3

2 ji 3 (berfireh)

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

Naveroka firehiya guherbar

Dersan bikar bînin col-{breakpoint}-autoku stûnan li gorî firehiya xwezayî ya naveroka wan mezin bikin.

1 ji 3

Naveroka firehiya guherbar

3 ji 3

1 ji 3

Naveroka firehiya guherbar

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

Pir-rêzek wekhev-fireh

.w-100Bi danîna cîhê ku hûn dixwazin stûn di xêzek nû de biherikin stûnên wekhev-fireh ên ku gelek rêzan vedigirin biafirînin. Bi tevlîhevkirina .w-100hin amûrên dîmendera bersivdar veqetiyan bikin.

col

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

Dersên bersivdar

Tora Bootstrap ji bo avakirina sêwiranên bersivdar ên tevlihev pênc rêzikên dersên diyarkirî vedihewîne. Mezinahiya stûnên xwe li ser cîhazên piçûk, piçûk, navîn, mezin, an zêde mezin lê hûn guncaw dibînin, xweş bikin.

Hemû xalên veqetînê

Ji bo torên ku ji cîhazên herî piçûk heya herî mezin yek in, çînên .colû bikar bînin. .col-*Dema ku hûn hewceyê stûnek bi taybetî bi mezinahî hewce bikin, çînek hejmarkirî diyar bikin; wekî din, xwe azad hîs bikin ku pê ve girêdayî bin .col.

col

col-8

col-4

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

Berbi horizontal ve hatî berhev kirin

Bi karanîna komek çînek yekane .col-sm-*, hûn dikarin pergalek torê ya bingehîn biafirînin ku ji hev veqetandî dest pê dike û li xala veqetîna piçûk ( sm) dibe horîzontal.

col-sm-8

col-sm-4

col-sm

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

Mix û hev bikin

Ma hûn naxwazin stûnên we bi tenê di hin rêzikên torê de werin berhev kirin? Li gorî hewcedariyê ji bo her rêzek hevbendiyek çînên cûda bikar bînin. Ji bo ramanek çêtir ka ew hemî çawa dixebite, mînaka jêrîn bibînin.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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>

Alignment

Karûbarên lihevkirina flexbox bikar bînin da ku stûnên vertîkal û horizontî li hev bikin.

Alignment Vertical

Yek ji sê stûnan

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

Yek ji sê stûnan

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

Alignment Horizontal

Yek ji du stûnan

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

Ne gemar

Kevirên di navbera stûnan de di çînên meya tora meya pêşwext de dikarin bi .no-gutters. marginEv s -yên neyînî .rowû horizontî paddingji hemî stûnên zarokan ên yekser radike.

Li vir koda çavkaniyê ji bo afirandina van şêwazan e. Bala xwe bidinê ku guheztinên stûnê tenê li stûnên zarokan ên yekem têne veguheztin û bi rêya hilbijêra taybetmendiyê têne armanc kirin . Digel ku ev hilbijarkek taybetîtir çêdike, lêdana stûnê hîn jî dikare bi karûbarên valahiyê re bêtir were xweş kirin .

Pêdivî ye ku sêwiranek qev-bi-qewim? Dêûbav .containeran bavêjin .container-fluid.

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

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

Di pratîkê de, li vir çawa xuya dike. Têbînî ku hûn dikarin vê yekê bi hemî dersên torê yên pêşwextkirî yên din re bikar bînin (tevî firehiyên stûnê, rêzikên bersivdar, ji nû ve rêzkirin, û hêj bêtir).

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

.col-6 .col-md-4

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

Pêçandina stûnê

Ger ji 12 stûnan zêdetir di nav rêzek yekane de werin danîn, her komek stûnên zêde dê, wekî yekînek, li ser rêzek nû biqelişe.

.col-9

.col-4
Ji ber ku 9 + 4 = 13 > 12, ev div-berfirehiya 4 stûnan li ser xeteke nû wekî yekînek hevgirtî tê pêçandin.

.col-6 Stûnên
paşîn li ser xeta nû berdewam dikin.

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

Stûn diqete

Şikandina stûnan ji rêzek nû ya di flexbox de hackek piçûk hewce dike: li ku width: 100%derê hûn dixwazin stûnên xwe li xêzek nû biqewirînin hêmanek zêde bikin. Bi gelemperî ev bi gelek .rows pêk tê, lê her rêbazek pêkanînê nikare vê yekê hesab bike.

.col-6 .col-sm-3

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

Her weha hûn dikarin vê veqetandinê li ser xalên veqetandinê yên taybetî bi karûbarên meya nîşana bersivdar bicîh bikin .

.col-6 .col-sm-4

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

Reordering

Siparîşa çînên

Ji .order-bo kontrolkirina rêzika dîtbarî ya naveroka xwe ders bikar bînin. Van ders bersivdar in, ji ber vê yekê hûn dikarin xala veqetandinê destnîşan bikin order(mînak, .order-1.order-md-2). Piştgiriya ji bo 1her 12pênc rêzikên torê vedihewîne.

Yekem, lê bê ferman

Duyemîn, lê ya dawî

Ya sêyemîn, lê yekem

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Di heman demê de bersivdar .order-firstû .order-lastçînên ku bi rêzdarî orderbi sepandin order: -1û order: 13( order: $columns + 1), hêmanekê diguherînin hene. .order-*Li gorî hewcedariyê, ev çîn dikarin bi çînên hejmarkirî re jî werin tevlihev kirin .

Pêşî, lê dawî

Duyemîn, lê bê ferman

Ya sêyemîn, lê yekem

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Stûnên jihevdexistin

Hûn dikarin stûnên torê bi du awayan veqetînin: .offset-dersên torê yên bersivdar û karûbarên me yên marjînal . Çînên torê têne mezin kirin ku stûnan li hev bikin dema ku marjînal ji bo sêwiranên bilez ên ku firehiya veqetandinê guhêrbar e bikêrtir in.

Dersên Offset

Bi karanîna dersan stûnan ber bi rastê ve .offset-md-*bigerînin. Van dersan marjîna çepê ya stûnê bi *stûnan zêde dikin. Mînakî, .offset-md-4li .col-md-4ser çar stûnan digere.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

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

Ji bilî paqijkirina stûnê li nuqteyên veqetandî yên bersivdar, dibe ku hûn hewce ne ku guheztinan ji nû ve bikin. Vê di çalakiyê de di mînaka torê de bibînin .

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

Utilities Margin

Bi çûyîna flexbox-ê di v4 de, hûn dikarin karûbarên marjînal bikar bînin mîna .mr-autoku stûnên xwişk û birayên xwe ji hev dûr bikin.

.col-md-4

.col-md-4 .ml-oto

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

.col-auto .mr-auto

.col-auto

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

Nesting

Ji bo ku hûn naveroka xwe bi tora xwerû re nehêlin, di nav stûnek heyî de stûnek nû .rowû komeke zêde bikin . Rêzên hêlînkirî divê komek stûnên ku ji 12 an kêmtir zêde dibin tê de bin (ne hewce ye ku hûn hemî 12 stûnên berdest bikar bînin)..col-sm-*.col-sm-*

Asta 1: .col-sm-9

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

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

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

Sass mixs

Dema ku pelên Sass-a çavkaniya Bootstrap-ê bikar tînin, vebijarka we heye ku hûn guhêrbar û mixînên Sass bikar bînin da ku nexşeyên rûpelê yên xwerû, semantîk û bersivdar biafirînin. Dersên meyên torê yên pêşwextkirî van heman guhêrbar û mixîn bikar tînin da ku ji bo sêwiranên bilez bersivdar komek dersên amade-bikarhêner peyda bikin.

Variables

Guherîn û nexşe hejmara stûnan, firehiya gemarê, û xala pirsiyariya medyayê ya ku tê de dest bi stûnên herikîn dikin diyar dikin. Em vana bikar tînin da ku çînên tora pêşwext ên ku li jor hatine belge kirin, û her weha ji bo mîksên xwerû yên ku li jêr hatine destnîşan kirin çêbikin.

$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
);

Mixins

Miksîn bi guhêrbarên torê re têne bikar anîn da ku CSS-ya semantîk ji bo stûnên torê yên kesane çêbikin.

// 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);

Nimûne karanîna

Hûn dikarin guherbaran li gorî nirxên xweya xwerû biguhezînin, an jî tenê mîksan bi nirxên xweyên xwerû bikar bînin. Li vir mînakek karanîna mîhengên xwerû heye ku hûn nexşeyek du-stûnî bi navberek veqetandî çêbikin.

.example-container {
  width: 800px;
  @include make-container();
}

.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);
  }
}

Naveroka sereke

Naveroka duyemîn

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

Kesayetîkirina torê

Bi karanîna guhêrbar û nexşeyên tora Sass-a me ya çêkirî, gengaz e ku meriv bi tevahî dersên torê yên pêşwextkirî xweş bike. Hejmara rêzan, pîvanên pirsa medyayê, û firehiyên konteynerê biguhezînin - dûv re ji nû ve berhev bikin.

Stûn û gemar

Hejmara stûnên torê dikare bi guhêrbarên Sass ve were guheztin. $grid-columnsji bo hilberandina firehiyên (ji sedî) ya her stûnek kesane tê bikar anîn dema ku firehiyê ji bo guliyên stûnê $grid-gutter-widthdestnîşan dike.

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

Tûrên torê

Ji stûnan bi xwe re derbas bibin, hûn dikarin hejmara rêzikên torê jî xweş bikin. Ger we tenê çar qatên torê dixwest, hûn ê nûve bikin $grid-breakpointsû bi vî rengî nûve bikin $container-max-widths:

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

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

Dema ku hûn guhartinan li guhêrbar an nexşeyên Sass-ê bikin, hûn hewce ne ku guheztinên xwe hilînin û ji nû ve berhev bikin. Bi kirina vê yekê dê komek nû ya çînên torê yên pêşwextkirî ji bo firehiyên stûn, veqetandin, û rêzkirinê derxe. Karûbarên xuyangiya bersivdar jî dê werin nûve kirin da ku xalên veqetandinê yên xwerû bikar bînin. Bawer bikin ku nirxên torê di nav px(ne rem, em, an %) de bicîh bikin.