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

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

Multi-line ta 'wisa' ugwali

Oħloq kolonni ta 'wisa' ugwali li jkopru linji 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 .

Kien hemm bug tal-flexbox Safari li ma jħallix li dan jaħdem mingħajr espliċita flex-basisjew border. Hemm soluzzjonijiet għall-verżjonijiet anzjani tal-brawżer, iżda m'għandhomx ikunu meħtieġa jekk il-browsers fil-mira tiegħek ma jaqgħux fil-verżjonijiet buggy.

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>

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>

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

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 u ssir orizzontali fil-punt ta 'waqfien żgħir ( 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>

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

Canali

Il-kanali jistgħu jiġu aġġustati b'mod reattiv permezz ta 'ikkuttunar speċifiku għall-punt ta' waqfien u klassijiet ta 'utilità ta' marġini negattivi. Biex tibdel il-kanali f'ringiela partikolari, għaqqad utilità ta 'marġni negattiv fuq il- .rowu utilitajiet tal-ikkuttunar li jaqblu fuq is- .cols. Il -ġenitur .containerjew .container-fluidjista 'jkollhom bżonn jiġu aġġustati wkoll biex jiġi evitat overflow mhux mixtieq, billi terġa' tuża l-utilità tal-ikkuttunar li tqabbel.

Hawn eżempju ta 'personalizzazzjoni tal-grilja Bootstrap fil-punt ta' lgwaqfa kbir ( ) u 'l fuq. Żidna l- .colikkuttunar bil- .px-lg-5, ikkontrobattu dak bil .mx-lg-n5-ġenitur .rowu mbagħad aġġustajna l- .containerippakkjar bil- .px-lg-5.

Kuttunar tal-kolonna apposta

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

Kolonni ta' ringiela

Uża l- .row-cols-*klassijiet li jirrispondu biex issettja malajr in-numru ta’ kolonni li jirrendu l-aħjar il-kontenut u t-tqassim tiegħek. Filwaqt li l-klassijiet normali .col-*japplikaw għall-kolonni individwali (eż., .col-md-4), il-klassijiet tal-kolonni tar-ringieli huma stabbiliti fuq il-ġenitur .rowbħala shortcut.

Uża dawn il-klassijiet tal-kolonni ringieli biex toħloq malajr layouts bażiċi tal-grilja jew biex tikkontrolla t-tqassim tal-karti tiegħek.

Kolonna

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

Kolonna

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

Kolonna

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

Kolonna

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

Kolonna

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

Tista' wkoll tuża l-mixin Sass li jakkumpanja 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);
  }
}

Allinjament

Uża l-utilitajiet tal-allinjament tal-flexbox biex tallinja l-kolonni vertikalment u orizzontalment. Internet Explorer 10-11 ma jappoġġjax l-allinjament vertikali ta 'oġġetti flex meta l-kontenitur flex ikollu a min-heightkif muri hawn taħt. Ara Flexbugs #3 għal aktar dettalji.

Allinjament vertikali

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

<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

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

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

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

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

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

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

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 fid-DOM, ma applikat l-ebda ordni

It-tieni fid-DOM, b'ordni akbar

It-tielet fid-DOM, b'ordni ta' 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>

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 fid-DOM, ordnat l-aħħar

It-tieni fid-DOM, mhux ordnat

It-tielet fid-DOM, ordnat l-ewwel

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

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

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

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

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="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 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-widthjistabbilixxi l-wisa' għ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 %).