Source

Sistema tal-grilja

Uża l-grilja qawwija tagħna tal-flexbox mobile-first biex tibni taqsim tal-forom u daqsijiet kollha grazzi għal sistema ta 'tnax-il kolonna, ħames livelli ta' rispons default, varjabbli Sass u mixins, u għexieren ta 'klassijiet predefiniti.

Kif taħdem

Is-sistema tal-grilja ta 'Bootstrap tuża serje ta' kontenituri, ringieli, u kolonni biex tqassam u tallinja l-kontenut. Huwa mibni bil- flexbox u jirreaġixxi bis-sħiħ. Hawn taħt hemm eżempju u ħarsa fil-fond lejn kif il-grilja tingħaqad.

Ġdid jew mhux familjari mal-flexbox? Aqra din il-gwida tal-flexbox CSS Tricks għall-isfond, it-terminoloġija, il-linji gwida, u snippets tal-kodiċi.

Waħda minn tliet kolonni
Waħda minn tliet kolonni
Waħda minn tliet kolonni
<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>

L-eżempju ta’ hawn fuq joħloq tliet kolonni ta’ wisa’ ugwali fuq apparati żgħar, medji, kbar u kbar żejda bl-użu tal-klassijiet tal-grilja predefiniti tagħna. Dawk il-kolonni huma ċċentrata fil-paġna bil-ġenitur .container.

Tkissirha, hawn kif taħdem:

  • Il-kontejners jipprovdu mezz biex iċċentraw u jgħattu orizzontalment il-kontenut tas-sit tiegħek. Uża .containergħal wisa 'pixel reattivi jew .container-fluidgħal width: 100%madwar id-daqsijiet kollha ta' viewport u apparat.
  • Ringieli huma tgeżwir għall-kolonni. Kull kolonna għandha orizzontali padding(imsejħa kanal) għall-kontroll tal-ispazju bejniethom. Dan paddingimbagħad jiġi kkontrobattat fuq ir-ringieli b'marġini negattivi. Dan il-mod, il-kontenut kollu fil-kolonni tiegħek huwa viżwalment allinjat fin-naħa tax-xellug.
  • F'tqassim ta' grilja, il-kontenut għandu jitqiegħed f'kolonni u kolonni biss jistgħu jkunu tfal immedjati ta' ringieli.
  • Grazzi għall-flexbox, il-kolonni tal-grilja mingħajr speċifikat widthse jitqassmu awtomatikament bħala kolonni ta 'wisa' ugwali. Per eżempju, erba 'każijiet ta' .col-smkull waħda awtomatikament tkun 25% wiesgħa mill-punt ta 'waqfien żgħir u 'l fuq. Ara t -taqsima tal -kolonni awto-layout għal aktar eżempji.
  • Il-klassijiet tal-kolonni jindikaw in-numru ta' kolonni li tixtieq tuża mit-12 possibbli għal kull ringiela. Allura, jekk trid tliet kolonni ta 'wisa' ugwali madwar, tista 'tuża .col-4.
  • Il-kolonni widthhuma stabbiliti f'perċentwali, għalhekk huma dejjem fluwidi u ta' daqs relattiv għall-element ġenitur tagħhom.
  • Il-kolonni għandhom orizzontali paddingbiex joħolqu l-kanali bejn kolonni individwali, madankollu, tista 'tneħħi l- marginmir-ringieli u paddingmill-kolonni b'fuq .no-guttersil- .row.
  • Biex il-grilja tirreaġixxi, hemm ħames punti ta' waqfien tal-grilja, wieħed għal kull breakpoint li jirrispondu : il-punti ta' waqfien kollha (żgħar żejjed), żgħar, medji, kbar u kbar żejjed.
  • Il-punti ta' waqfien tal-grilja huma bbażati fuq mistoqsijiet tal-midja tal-wisa 'minimu, li jfisser li japplikaw għal dak il-punt ta' waqfien wieħed u dawk kollha 'l fuq minnu (eż., .col-sm-4japplika għal apparati żgħar, medji, kbar u kbar żejda, iżda mhux l-ewwel xsbreakpoint).
  • Tista 'tuża klassijiet ta' grid definiti minn qabel (bħal .col-4) jew Sass mixins għal aktar markup semantiku.

Kun konxju tal-limitazzjonijiet u bugs madwar flexbox , bħall- inkapaċità li tuża xi elementi HTML bħala kontenituri flex .

Għażliet tal-grilja

Filwaqt li Bootstrap juża ems jew rems biex jiddefinixxi l-biċċa l-kbira tad-daqsijiet, pxs jintużaw għal breakpoints tal-grilja u wisgħat tal-kontenituri. Dan għaliex il-wisa' tal-vetrina hija f'pixels u ma tinbidilx bid- daqs tat-tipa .

Ara kif l-aspetti tas-sistema tal-grilja Bootstrap jaħdmu fuq diversi apparati b'tabella utli.

Żgħir
żejjed <576px
Żgħar
≥576px
Medju
≥768px
Kbir
≥992px
Kbir
żejjed ≥1200px
Wisa 'massimu tal-kontenitur Xejn (awto) 540px 720px 960px 1140px
Prefiss tal-klassi .col- .col-sm- .col-md- .col-lg- .col-xl-
# ta’ kolonni 12
Wisa' tal-kanal 30px (15px fuq kull naħa ta' kolonna)
Nestable Iva
L-ordni tal-kolonna Iva

Kolonni ta' tqassim awtomatiku

Uża klassijiet ta' kolonni speċifiċi għal breakpoint għal daqs faċli tal-kolonna mingħajr klassi nnumerata espliċita bħal .col-sm-6.

Wisa' ugwali

Pereżempju, hawn żewġ layouts tal-grilja li japplikaw għal kull apparat u viewport, minn xssa xl. Żid kwalunkwe numru ta 'klassijiet mingħajr unitajiet għal kull breakpoint li għandek bżonn u kull kolonna tkun l-istess wisa'.

1 minn 2
2 minn 2
1 minn 3
2 minn 3
3 minn 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>

Kolonni ta 'wisa' ugwali jistgħu jinqasmu f'linji multipli, iżda kien hemm bug tal-flexbox Safari li ma waqqafx dan milli jaħdem mingħajr espliċita flex-basisjew border. Hemm soluzzjonijiet għall-verżjonijiet eqdem tal-browser, iżda m'għandhomx ikunu meħtieġa jekk int aġġornat.

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

L-issettjar ta' wisa' ta' kolonna waħda

It-tqassim awtomatiku għall-kolonni tal-grilja tal-flexbox ifisser ukoll li tista 'tissettja l-wisa' ta 'kolonna waħda u jkollok il-kolonni tal-aħwa awtomatikament ridimensjonaw madwarha. Tista' tuża klassijiet ta' gril definiti minn qabel (kif muri hawn taħt), mixins ta' grilja, jew wisgħat inline. Innota li l-kolonni l-oħra se jibdlu d-daqs irrispettivament mill-wisa 'tal-kolonna ċentrali.

1 minn 3
2 minn 3 (usa')
3 minn 3
1 minn 3
2 minn 3 (usa')
3 minn 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>

Kontenut ta 'wisa' varjabbli

Uża col-{breakpoint}-autoklassijiet għad-daqs tal-kolonni bbażati fuq il-wisa 'naturali tal-kontenut tagħhom.

1 minn 3
Kontenut ta 'wisa' varjabbli
3 minn 3
1 minn 3
Kontenut ta 'wisa' varjabbli
3 minn 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>

Multi-ringieli ta 'wisa' ugwali

Oħloq kolonni ta 'wisa' ugwali li jifirxu fuq ringieli multipli billi ddaħħal .w-100fejn trid li l-kolonni jinkisru għal linja ġdida. Agħmel il-pawżi li jirrispondu billi tħallat .w-100ma' xi utilitajiet tal-wiri li jirrispondu .

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

Klassijiet li jirrispondu

Il-grilja ta' Bootstrap tinkludi ħames saffi ta' klassijiet predefiniti għall-bini ta' layouts kumplessi li jirrispondu. Ippersonalizza d-daqs tal-kolonni tiegħek fuq apparat żgħir żejjed, żgħir, medju, kbir jew kbir żejjed kif jidhirlek xieraq.

Kollha breakpoints

Għal grilji li huma l-istess mill-iżgħar ta 'apparati għall-akbar, uża l- .colu .col-*klassijiet. Speċifika klassi numerata meta jkollok bżonn kolonna ta' daqs partikolari; inkella, tħossok liberu li żżomm mal- .col.

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

Stacked għal orizzontali

Bl-użu ta 'sett wieħed ta' .col-sm-*klassijiet, tista 'toħloq sistema ta' grilja bażika li tibda f'munzelli qabel ma ssir orizzontali fil-punt ta 'waqfien żgħir ( sm).

kol-sm-8
kol-sm-4
kol-sm
kol-sm
kol-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>

Ħallat u qabblu

Ma tridx li l-kolonni tiegħek sempliċement jiġbru f'xi gradi tal-grilja? Uża taħlita ta 'klassijiet differenti għal kull saff kif meħtieġ. Ara l-eżempju hawn taħt għal idea aħjar ta' kif jaħdem kollox.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.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>

Allinjament

Uża l-utilitajiet tal-allinjament tal-flexbox biex tallinja l-kolonni vertikalment u orizzontalment.

Allinjament vertikali

Waħda minn tliet kolonni
Waħda minn tliet kolonni
Waħda minn tliet kolonni
Waħda minn tliet kolonni
Waħda minn tliet kolonni
Waħda minn tliet kolonni
Waħda minn tliet kolonni
Waħda minn tliet kolonni
Waħda minn tliet kolonni
<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>
Waħda minn tliet kolonni
Waħda minn tliet kolonni
Waħda minn tliet kolonni
<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>

Allinjament orizzontali

Waħda minn żewġ kolonni
Waħda minn żewġ kolonni
Waħda minn żewġ kolonni
Waħda minn żewġ kolonni
Waħda minn żewġ kolonni
Waħda minn żewġ kolonni
Waħda minn żewġ kolonni
Waħda minn żewġ kolonni
Waħda minn żewġ kolonni
Waħda minn żewġ kolonni
<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>

Ebda kanali

Il-kanali bejn il-kolonni fil-klassijiet tal-grilja predefiniti tagħna jistgħu jitneħħew b' .no-gutters. Dan ineħħi l-i negattivi marginminn .rowu l-orizzontali paddingmill-kolonni tat-tfal immedjati kollha.

Hawn il-kodiċi tas-sors għall-ħolqien ta 'dawn l-istili. Innota li l-overrides tal-kolonni huma skoperti biss għall-ewwel kolonni tat-tfal u huma mmirati permezz tas- selettur tal-attributi . Filwaqt li dan jiġġenera selettur aktar speċifiku, l-ikkuttunar tal-kolonna xorta jista 'jiġi personalizzat aktar b'utilitajiet ta' spazjar .

Għandek bżonn disinn minn tarf għal tarf? Waqqa 'l-ġenitur .containerjew .container-fluid.

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

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

Fil-prattika, hawn kif tidher. Innota li tista 'tkompli tuża dan mal-klassijiet l-oħra kollha tal-grilja predefiniti (inklużi wisa' tal-kolonni, livelli li jirrispondu, ordnijiet mill-ġdid, u aktar).

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

Tgeżwir tal-kolonna

Jekk aktar minn 12-il kolonna jitqiegħdu f'ringiela waħda, kull grupp ta' kolonni żejda se, bħala unità waħda, jgħaqqad fuq linja ġdida.

.kol-9
.col-4
Peress li 9 + 4 = 13 > 12, dan id-div 4-kolonni kollha jitgeżwer fuq linja ġdida bħala unità waħda kontigwa.
.col-6
Kolonni sussegwenti jkomplu tul il-linja l-ġdida.
<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>

Pawżi tal-kolonna

It-tkissir tal-kolonni għal linja ġdida fil-flexbox jeħtieġ hack żgħir: żid element b'kull width: 100%fejn trid tkebbeb il-kolonni tiegħek għal linja ġdida. Normalment dan jitwettaq b'ħafna .rows, iżda mhux kull metodu ta 'implimentazzjoni jista' jikkunsidra dan.

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.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>

Tista' wkoll tapplika din il-waqfa f'punti ta' waqfien speċifiċi bl- utilitajiet tal-wiri reattivi tagħna .

.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.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>

Ordnar mill-ġdid

Ordna klassijiet

Uża .order-klassijiet biex tikkontrolla l -ordni viżwali tal-kontenut tiegħek. Dawn il-klassijiet jirreaġixxu, għalhekk tista' tissettja l- orderpunt ta' waqfien (eż, .order-1.order-md-2). Jinkludi appoġġ għal 1permezz 12tal-ħames livelli tal-grilja kollha.

L-ewwel, iżda mhux ordnat
It-tieni, iżda l-aħħar
It-tielet, imma l-ewwel
<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>

Hemm ukoll klassijiet responsivi .order-firstu li jbiddlu l -element ta' element billi japplikaw u ( ), rispettivament. Dawn il-klassijiet jistgħu wkoll jiġu mħallta mal-klassijiet numerati kif meħtieġ..order-lastorderorder: -1order: 13order: $columns + 1.order-*

L-ewwel, iżda l-aħħar
It-tieni, iżda mhux ordnat
It-tielet, imma l-ewwel
<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>

Kolonni ta' tpaċija

Tista 'tpaċi l-kolonni tal-grilja b'żewġ modi: il .offset--klassijiet tal-grilja li jirrispondu tagħna u l- utilitajiet tal-marġni tagħna . Il-klassijiet tal-grilja huma daqs biex jaqblu mal-kolonni filwaqt li l-marġini huma aktar utli għal layouts ta 'malajr fejn il-wisa' tal-offset hija varjabbli.

Klassijiet offset

Mexxi l-kolonni lejn il-lemin billi tuża .offset-md-*klassijiet. Dawn il-klassijiet iżidu l-marġni tax-xellug ta’ kolonna *b’kolonni. Per eżempju, .offset-md-4jiċċaqlaq .col-md-4fuq erba 'kolonni.

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.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>

Minbarra l-ikklerjar tal-kolonni f'punti ta 'waqfien li jirrispondu, jista' jkollok bżonn tirrisettja l-offsets. Ara dan fl-azzjoni fl -eżempju tal-grilja .

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

Utilitajiet tal-marġni

Biċ-ċaqliq lejn flexbox f'v4, tista 'tuża utilitajiet tal-marġni bħal .mr-autobiex iġiegħel il-kolonni tal-aħwa 'l bogħod minn xulxin.

.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.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>

Ibejtu

Biex tbejta l-kontenut tiegħek mal-grilja default, żid kolonni ġodda .rowu sett ta .col-sm-*' kolonna eżistenti .col-sm-*. Ringieli mdaħħla għandhom jinkludu sett ta’ kolonni li jammontaw għal 12 jew inqas (mhux meħtieġ li tuża t-12-il kolonna kollha disponibbli).

Livell 1: .col-sm-9
Livell 2: .col-8 .col-sm-6
Livell 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 mixins

Meta tuża l-fajls Sass sors ta 'Bootstrap, għandek l-għażla li tuża varjabbli u mixins Sass biex toħloq layouts tal-paġna personalizzati, semantiċi u li jirrispondu. Il-klassijiet tal-grilja predefiniti tagħna jużaw dawn l-istess varjabbli u mixins biex jipprovdu firxa sħiħa ta 'klassijiet lesti għall-użu għal layouts li jirrispondu malajr.

Varjabbli

Varjabbli u mapep jiddeterminaw in-numru ta 'kolonni, il-wisa' tal-kanal, u l-punt ta 'mistoqsija tal-midja li fih jibdew il-kolonni f'wiċċ l-ilma. Aħna nużaw dawn biex niġġeneraw il-klassijiet tal-grilja predefiniti dokumentati hawn fuq, kif ukoll għall-mixins personalizzati elenkati hawn taħt.

$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

Mixins jintużaw flimkien mal-varjabbli tal-grilja biex jiġġeneraw CSS semantiċi għal kolonni tal-grilja individwali.

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

Eżempju ta' użu

Tista 'timmodifika l-varjabbli għall-valuri tad-dwana tiegħek stess, jew sempliċement tuża l-mixins bil-valuri awtomatiċi tagħhom. Hawn eżempju ta 'użu tas-settings default biex jinħoloq tqassim ta' żewġ kolonni b'vojt bejniethom.

.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);
  }
}
Kontenut prinċipali
Kontenut sekondarju
<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>

Jippersonalizza l-grilja

Bl-użu tal-varjabbli u l-mapep Sass tal-grilja integrata tagħna, huwa possibbli li tippersonalizza kompletament il-klassijiet tal-grilja predefiniti. Ibdel in-numru ta 'saffi, id-dimensjonijiet tal-interrogazzjoni tal-midja, u l-wisa' tal-kontenituri—imbagħad ikkompila mill-ġdid.

Kolonni u kanali

In-numru ta 'kolonni tal-grilja jista' jiġi modifikat permezz ta 'varjabbli Sass. $grid-columnsjintuża biex jiġġenera l-wisgħat (f'perċentwali) ta 'kull kolonna individwali filwaqt li $grid-gutter-widthjippermetti wisgħat speċifiċi għall-punt ta' waqfien li huma maqsuma b'mod ugwali madwar padding-leftu padding-rightgħall-kanali tal-kolonna.

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

Saffi tal-grilja

Li timxi lil hinn mill-kolonni nfushom, tista 'wkoll tippersonalizza n-numru ta' gradi tal-grilja. Jekk ridt biss erba' livelli tal-grilja, taġġorna l- $grid-breakpointsu $container-max-widthsgħal xi ħaġa bħal din:

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

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

Meta tagħmel xi bidliet fil-varjabbli jew il-mapep Sass, ikollok bzonn issalva l-bidliet tiegħek u tikkompila mill-ġdid. Jekk tagħmel hekk toħroġ sett ġdid fjamant ta' klassijiet ta' gril definiti minn qabel għal wisa' ta' kolonni, offsets u ordnijiet. L-utilitajiet ta' viżibilità li jirrispondu se jiġu aġġornati wkoll biex jużaw il-punti ta' waqfien tad-dwana. Kun żgur li tissettja l-valuri tal-grilja fi px(mhux rem, em, jew %).