Sisitemu ya sisitemu

Urugero

Sisitemu ya Bootstrap ikoresha urukurikirane rwibikoresho, umurongo, hamwe ninkingi kugirango uhuze kandi uhuze ibirimo. Yubatswe na flexbox kandi irasubiza rwose. Hasi nurugero nibisobanuro byimbitse byukuntu sisitemu ya gride ihurira hamwe.

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Urugero ruvuzwe haruguru rurema ubugari butatu buringaniye mubikoresho byose hamwe no kureba ukoresheje ibyiciro byateganijwe mbere ya gride. Izo nkingi zegeranye kurupapuro hamwe nababyeyi .container.

Uburyo ikora

Kumena, dore uko sisitemu ya gride ihurira hamwe:

• Urusobe rwacu rushyigikira ibice bitandatu byitabira . Ibice bitandukanijwe bishingiye min-widthkubibazo byitangazamakuru, bivuze ko bigira ingaruka kuri ibyo bice ndetse no hejuru yabyo byose (urugero, bireba .col-sm-4,,, smna , md) . Ibi bivuze ko ushobora kugenzura kontineri hamwe nubunini bwinkingi hamwe nimyitwarire kuri buri gice.lgxlxxl

• Ibikoresho birimo hagati na horizontalale ibirimo. Koresha .containerubugari bwa pigiseli isubiza, .container-fluidkubireba width: 100%byose bireba nibikoresho, cyangwa ikintu gisubiza (urugero, .container-md) kugirango uhuze amazi na pigiseli y'ubugari.

• Imirongo ni ibipfunyika byinkingi. Buri nkingi ifite horizontal padding(bita gutter) yo kugenzura umwanya hagati yabo. Ibi paddingnoneho birwanya umurongo hamwe numurongo utari mwiza kugirango umenye neza ibiri mu nkingi zawe bihujwe neza kuruhande rwibumoso. Imirongo nayo ishyigikira ibyiciro byo guhindura kugirango ushyire hamwe inkingi ingana na gutter ibyiciro kugirango uhindure umwanya wibirimo.

• Inkingi ziroroshye guhinduka. Hano hari inyandikorugero 12 ziboneka kumurongo, zikwemerera gukora ibice bitandukanye byibintu bikurikirana umubare winkingi. Ibyiciro byinkingi byerekana umubare wicyitegererezo cyinkingi kugirango uzenguruke (urugero, col-4ine). widths zashyizwe ku ijanisha kuburyo burigihe ufite ubunini bungana.

• Imyanda nayo irasubizwa kandi irashobora guhindurwa. Amasomo ya Gutter arahari murwego rwose, hamwe nubunini bungana na margin hamwe na padi intera . Hindura imyanda itambitse hamwe .gx-*namasomo, umuyoboro uhagaze hamwe .gy-*, cyangwa imyanda yose hamwe .g-*namasomo. .g-0irahari kandi kugirango ikureho imyanda.

• Impinduka za Sass, amakarita, hamwe no kuvanga imbaraga za gride. Niba udashaka gukoresha ibyiciro byateganijwe mbere ya Bootstrap, urashobora gukoresha isoko ya gride ya Sass kugirango ukore ibyawe hamwe nibisobanuro byinshi. Dushyiramo kandi ibintu bimwe na bimwe bya CSS kugirango dukoreshe ibihinduka bya Sass kugirango birusheho guhinduka kuri wewe.

Menya aho ugarukira hamwe nudukosa dukikije flexbox , nkudashobora gukoresha ibintu bimwe na bimwe bya HTML nkibikoresho bya flex .

Amahitamo ya gride

Sisitemu ya gride ya Bootstrap irashobora guhuza ibice bitandatu byose byacitse, hamwe nibice byose uhitamo. Imirongo itandatu isanzwe ya grid urwego niyi ikurikira:

• Ntoya (xs)
• Ntoya (sm)
• Hagati (md)
• Kinini (lg)
• Kinini cyane (xl)
• Ibinini byiyongereye (xxl)

Nkuko byavuzwe haruguru, buri kimwe muri ibyo bice gifite kontineri yacyo, icyiciro cyihariye kidasanzwe, hamwe nabahindura. Dore uko gride ihinduka muribi bice:

Imashini-yimiterere

Koresha ibice-byihariye byinkingi ibyiciro kugirango byoroshye inkingi zingana nta numero igaragara ifite nka .col-sm-6.

Ubugari bungana

Kurugero, hano hari grid grid ebyiri zikoreshwa kuri buri gikoresho no kureba, kuva xskuri xxl. Ongeraho umubare uwo ariwo wose wibice-bitari bike kuri buri cyiciro ukeneye kandi buri nkingi izaba ubugari bumwe.

<div class="container text-center">
  <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>

Gushiraho ubugari bumwe

Auto-layout ya flexbox grid inkingi nayo isobanura ko ushobora gushiraho ubugari bwinkingi imwe hanyuma ukagira inkingi ya barumuna ihita ihinduka hafi yayo. Urashobora gukoresha ibyiciro bya grid byateganijwe mbere (nkuko bigaragara hano), imiyoboro ya gride, cyangwa ubugari bwumurongo. Menya ko izindi nkingi zizahinduka ntakibazo ubugari bwikigo hagati.

<div class="container text-center">
  <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>

Ibirimo ubugari butandukanye

Koresha col-{breakpoint}-autoamasomo kugirango ubunini bw'inkingi ukurikije ubugari busanzwe bwibirimo.

<div class="container text-center">
  <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>

Amasomo ashubije

Urusobe rwa Bootstrap rurimo ibyiciro bitandatu byibyiciro byateganijwe mbere yo kubaka imiterere igoye. Hindura ingano yinkingi zawe hejuru yinyongera ntoya, ntoya, iringaniye, nini, cyangwa ibikoresho binini cyane ariko ubona bikwiye.

Ibice byose

Kuri gride imwe nimwe kuva mubikoresho bito kugeza binini, koresha i .colhamwe .col-*namasomo. Kugaragaza icyiciro cyumubare mugihe ukeneye inkingi nini cyane; bitabaye ibyo, umva neza .col.

<div class="container text-center">
  <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>

Bishyizwe kuri horizontal

Ukoresheje icyiciro kimwe .col-sm-*cyamasomo, urashobora gukora sisitemu shingiro ya gride itangira gutondekanya hanyuma igahinduka horizontal kumurongo muto ( sm).

<div class="container text-center">
  <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>

Kuvanga no guhuza

Ntushaka ko inkingi zawe zishira gusa murwego runaka? Koresha guhuza ibyiciro bitandukanye kuri buri cyiciro nkuko bikenewe. Reba urugero rukurikira kugirango ubone igitekerezo cyiza cyukuntu byose bikora.

<div class="container text-center">
  <!-- 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>

Inkingi

Koresha .row-cols-*ibyiciro byitabira kugirango ushireho vuba umubare winkingi zitanga neza ibikubiyemo hamwe nimiterere. Mugihe .col-*ibyiciro bisanzwe bikurikizwa kumurongo wihariye (urugero, .col-md-4), umurongo winkingi ibyiciro byashyizwe kubabyeyi .rownkumuhigo. Hamwe .row-cols-autonawe ushobora gutanga inkingi ubugari bwazo.

Koresha iyi mirongo yinkingi ibyiciro kugirango wihute gukora imiterere shingiro ya gride cyangwa kugenzura ikarita yawe.

<div class="container text-center">
  <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>

<div class="container text-center">
  <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>

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container text-center">
  <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>

<div class="container text-center">
  <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>

<div class="container text-center">
  <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>

Urashobora kandi gukoresha Sass ivanze iherekejwe , 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);
  }
}

Icyari

Kugirango ushire ibikubiyemo hamwe na gride isanzwe, ongeramo ibishya .rowkandi ushireho .col-sm-*inkingi muburyo buriho .col-sm-*. Imirongo yashizwemo igomba gushiramo urutonde rwinkingi ziyongera kuri 12 cyangwa nkeya (ntibisabwa ko ukoresha inkingi 12 zose ziboneka).

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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

Iyo ukoresheje inkomoko ya Bootstrap ya Sass dosiye, ufite amahitamo yo gukoresha Sass variable hamwe na mixin kugirango ukore imiterere, ibisobanuro, nibisubizo byurupapuro. Ibyiciro byateganijwe mbere ya gride ikoresha ibyo bihinduka hamwe na mixin kugirango itange suite yose yiteguye-gukoresha-amasomo yihuse.

Ibihinduka

Ibihinduka n'amakarita bigena umubare winkingi, ubugari bwamazi, hamwe nibibazo byitangazamakuru aho byatangirira kureremba inkingi. Dukoresha ibi kugirango tubyare ibyiciro byateganijwe byateganijwe hejuru, kimwe no kuvanga ibicuruzwa byavuzwe haruguru.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

Imvange

Imvange zikoreshwa zifatanije na gride ihindagurika kugirango itange ibisobanuro bya CSS kubisobanuro bya grid inkingi.

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

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

Urugero

Urashobora guhindura ibihinduka kubiciro byawe bwite, cyangwa ugakoresha gusa ivanga nagaciro kabo gasanzwe. Dore urugero rwo gukoresha igenamiterere risanzwe kugirango ukore imiterere-inkingi ebyiri hamwe nu cyuho hagati.

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

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

Guhindura gride

Ukoresheje ibyubatswe muri gride Sass ihinduka namakarita, birashoboka guhitamo byimazeyo ibyiciro byateganijwe mbere. Hindura umubare w'ibyiciro, ibipimo by'ibibazo by'itangazamakuru, n'ubugari bwa kontineri - hanyuma usubiremo.

Inkingi

Umubare wa grid inkingi urashobora guhindurwa ukoresheje Sass variable. $grid-columnsni Byakoreshejwe Kuri Kubyara Ubugari (ku ijana) ya buri nkingi ku giti cye mugihe $grid-gutter-widthishyiraho ubugari bwinkingi. $grid-row-columnsni Byakoreshejwe Kuri: Umubare Umubare W’Inkingi ya .row-cols-*, Umubare uwo ari wo wose urenga iyi mipaka birengagijwe.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

Urwego

Kwimuka kurenga inkingi ubwazo, urashobora kandi guhitamo umubare wa grid tiers. Niba ushaka ibice bine bya gride gusa, wavugurura i $grid-breakpointsno $container-max-widthskubintu nkibi:

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

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

Mugihe uhinduye ibintu byose byahinduwe na Sass, uzakenera kubika impinduka zawe no kwisubiraho. Kubikora bizasohoka-shyashya-shyashya rya gride ibyiciro byateganijwe mbere yubugari bwinkingi, offsets, no gutumiza. Ibisubizo byingirakamaro byingirakamaro nabyo bizavugururwa kugirango ukoreshe ibicuruzwa byacitse. Witondere gushiraho indangagaciro muri px(ntabwo rem, emcyangwa, %).