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 dersên torê yên pêşwext (wek .col-4) an Sass mîksên ji bo nîşankirina semantîktir 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 piraniya pîvanan bikar tîne, pxs ji bo xalên şikestî û 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 torê ya Bootstrap çawa li ser gelek cîhazên bi tabloyek bikêr dixebitin.

	Zêde piçûk <576px	Piçûk ≥576px	Navîn ≥768px	Mezin ≥992px	Zêde mezin ≥1200px
Firehiya konteynerê ya herî zêde	Tune (otomatîk)	540px	720px	960px	1140px
Pêşgira dersê	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# stûnên	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 wekî .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>

Pir-xêza wekhev-fireh

.w-100Bi danîna cîhê ku hûn dixwazin stûn di xetek nû de biherikin stûnên wekhev-fireh ên ku pir rêzan vedigirin biafirînin. Bi tevlihevkirina .w-100bi hin karûbarên pêşandana bersivdar re veqetanan bikin bersiv .

Çewtiyek Safari flexbox hebû ku nehişt ku ev bêyî eşkere flex-basisan eşkere bixebite border. Ji bo guhertoyên gerokên kevintir rêçare hene, lê ger gerokên we yên mebest nekevin nav guhertoyên xeletî, pêdivî ye ku ew ne hewce bin.

col

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

Sazkirina yek width stûnê

Vesazkirina otomatîkî ji bo stûnên tora flexbox jî 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 dersê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>

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

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

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

.col-6 .col-md-4

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

Gutters

Gutters dikarin bi bersivdayinê ji hêla dersên padding-taybetî û marjînalên neyînî ve werin sererast kirin. Ji bo guheztina kelûpelên di rêzek diyarkirî de, amûrek marjînalek negatîf li ser hev bikin .rowû li ser s-yê karûbarên padding bihevre bikin .col. Dibe ku pêdivî .containerbe .container-fluidku dêûbav jî were guheztin da ku ji zêdebûna nedilxwaz dûr bikevin, dîsa bi karanîna kargêriya peldankê ya lihevhatî bikar bînin.

Li vir mînakek xweşkirina tora Bootstrap li xala veqetandinê ya mezin ( lg) û jorîn heye. Me .colpeldank .px-lg-5bi . .mx-lg-n5_ .row_ .container_.px-lg-5

Padding stûna Custom

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

Stûnên rêzê

Dersên bersivdar bikar bînin da .row-cols-*ku zû hejmara stûnên ku naverok û sêwirana we çêtirîn çêdikin destnîşan bikin. Digel ku çînên normal .col-*li ser stûnên takekesî derbas dibin (mînak, .col-md-4), çînên stûnên rêzê li ser dêûbav .rowwekî kurtebir têne danîn.

Van çînên stûnên rêzê bikar bînin da ku zû sêwiranên torê yên bingehîn biafirînin an jî sêwiranên qerta xwe kontrol bikin.

Ling

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

Ling

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

Ling

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

Ling

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

Ling

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

Her weha hûn dikarin tevliheviya Sass-ê ya pêvekirî bikar bînin 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);
  }
}

Alignment

Karûbarên lihevkirina flexbox bikar bînin da ku stûnên vertîkal û horizontî li hev bikin. Internet Explorer 10-11 dema ku konteynera flex min-heightwekî ku li jêr tê xuyang kirin hebe hevrêzkirina vertîkal a hêmanên nerm piştgirî nake. Ji bo bêtir agahdarî li Flexbugs #3 bibînin.

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 torê ya ji berê de diyarkirî 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-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>

Pêçandina stûnê

Heke 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 xetek 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="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>

Stûn diqete

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

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

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

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

Reordering

Siparîşa çînên

Ji .order-bo kontrolkirina rêzika dîtbarî ya naveroka xwe ders bikar bînin. Ev çîn 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 1di 12nav her pênc rêzikên torê de vedihewîne.

Yekem di DOM-ê de, tu ferman nehate sepandin

Duyemîn di DOM-ê de, bi fermanek mezintir

Di DOM-ê de sêyemîn, bi fermana 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>

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 .

Yekem li DOM-ê, paşîn ferman kir

Duyemîn di DOM-ê de, nemir

Di DOM-ê de sêyemîn, yekem emir kir

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

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

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

Utilities Margin

Bi çûna ber bi 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="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>

Nesting

Ji bo ku naveroka xwe bi tora xwerû re bihê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 12 an kêmtir lê zêde dibin (ne hewce ye ku hûn hemî 12 stûnên berdest bikar bînin) pêk 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="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 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 {
  @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);
  }
}

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.