Võrgusüsteem

Näide

Bootstrapi ruudustikusüsteem kasutab sisu paigutuseks ja joondamiseks mitmeid konteinereid, ridu ja veerge. See on ehitatud flexboxiga ja on täielikult reageeriv. Allpool on näide ja põhjalik selgitus selle kohta, kuidas võrgusüsteem kokku saab.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Ülaltoodud näide loob meie eelmääratletud ruudustikuklasside abil kõigis seadmetes ja vaateportides kolm võrdse laiusega veergu. Need veerud on lehe keskel vanemaga .container.

Kuidas see töötab

Võrgustiku süsteem kokku tuleb järgmiselt.

• Meie ruudustik toetab kuut reageerivat katkestuspunkti . Katkestuspunktid põhinevad min-widthmeediumipäringutel, mis tähendab, et need mõjutavad seda murdepunkti ja kõiki sellest kõrgemaid (nt .col-sm-4kehtib sm, md, lg, xlja xxl). See tähendab, et saate iga katkestuspunkti järgi juhtida konteineri ja veeru suurust ja käitumist.

• Konteinerid keskele ja horisontaalselt polsterdage sisu. Kasutage .containertundliku pikslilaiuse .container-fluidjaoks , width: 100%kõigi vaateavade ja seadmete jaoks või reageerivat konteinerit (nt .container-md) vedela ja pikslilaiuse kombinatsiooni jaoks.

• Read on veergude ümbrised. Igal veerul on horisontaalne padding(nn vihmaveerenn) nendevahelise ruumi reguleerimiseks. Seejärel paddingneutraliseeritakse seda negatiivsete veeristega ridadel, et veergude sisu oleks visuaalselt vasakpoolses servas joondatud. Ridad toetavad ka muutmisklasse veergude suuruse ühtseks rakendamiseks ja renni klasse , et muuta sisu vahekaugust.

• Veerud on uskumatult paindlikud. Ühe rea kohta on saadaval 12 malliveergu, mis võimaldab teil luua erinevaid elementide kombinatsioone, mis hõlmavad mis tahes arvu veerge. Veeruklassid näitavad malli veergude arvu, mida katta (nt col-4hõlmab nelja). widths on määratud protsentides, nii et teil on alati sama suhteline suurus.

• Vihmaveerennid on ka tundlikud ja kohandatavad. Vihmaveerennide klassid on saadaval kõigis murdepunktides, sama suurusega kui meie veerise ja polsterduse vahe . Muutke horisontaalseid vihmaveerennid .gx-*klassidega, vertikaalseid vihmaveerennid funktsiooniga .gy-*või kõiki rennisid .g-*klassidega. .g-0on saadaval ka vihmaveerennide eemaldamiseks.

• Sassi muutujad, kaardid ja segud toidavad võrku. Kui te ei soovi Bootstrapis eelmääratletud ruudustikuklasse kasutada, saate kasutada meie ruudustiku allikat Sass , et luua oma, millel on rohkem semantiline märgistus. Lisame ka mõned CSS-i kohandatud atribuudid nende Sassi muutujate tarbimiseks, et pakkuda teile veelgi suuremat paindlikkust.

Olge teadlik flexboxi piirangutest ja vigadest , nagu võimetus kasutada mõnda HTML-i elementi paindlike konteineritena .

Võrgu valikud

Bootstrapi ruudustikusüsteem saab kohaneda kõigi kuue vaikemurdepunktiga ja kõigi teie kohandatavate katkestuspunktidega. Kuus vaikeruudustiku taset on järgmised:

• Eriti väike (xs)
• Väike (sm)
• Keskmine (md)
• Suur (lg)
• Eriti suur (xl)
• Eriti suur (xxl)

Nagu eespool märgitud, on kõigil neil katkestuspunktidel oma konteiner, kordumatu klassi eesliide ja modifikaatorid. Siin on, kuidas ruudustik nende murdepunktide vahel muutub.

Automaatse paigutusega veerud

Kasutage murdepunktispetsiifilisi veeruklasse veeru suuruse hõlpsaks muutmiseks ilma selgesõnalise nummerdatud klassita, nagu .col-sm-6.

Võrdse laiusega

Näiteks siin on kaks ruudustiku paigutust, mis kehtivad igale seadmele ja vaateavale vahemikus xskuni xxl. Lisage iga vajaliku murdepunkti jaoks suvaline arv ühikuteta klasse ja iga veerg on sama lai.

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

Ühe veeru laiuse määramine

Flexboxi ruudustiku veergude automaatne paigutus tähendab ka seda, et saate määrata ühe veeru laiuse ja lasta vendade veergude suurust selle ümber automaatselt muuta. Võite kasutada eelmääratletud ruudustiku klasse (nagu allpool näidatud), ruudustiku segusid või reasiseseid laiusi. Pange tähele, et teiste veergude suurust muudetakse olenemata keskmise veeru laiusest.

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

Muutuva laiusega sisu

Kasutage col-{breakpoint}-autoklasse veergude suuruse määramiseks nende sisu loomuliku laiuse alusel.

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

Vastuvõtlikud klassid

Bootstrapi ruudustik sisaldab kuut eelmääratletud klassi taset keerukate reageerivate paigutuste loomiseks. Kohandage oma veergude suurust eriti väikestes, väikestes, keskmistes, suurtes või eriti suurtes seadmetes vastavalt oma äranägemisele.

Kõik murdepunktid

Võrkude puhul, mis on väikseimast seadmest suurimani ühesugused, kasutage klasse .colja . .col-*Määrake nummerdatud klass, kui vajate eriti suurt veergu; muul juhul pidage julgelt kinni .col.

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

Horisontaalselt virnastatud

Kasutades ühte .col-sm-*klasside komplekti, saate luua põhivõrgusüsteemi, mis algab virnastatuna ja muutub väikese murdepunkti ( sm) juures horisontaalseks.

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

Sega ja sobita

Kas te ei soovi, et teie veerud lihtsalt virnastuksid mõnel ruudustikutasandil? Vajadusel kasutage iga astme jaoks erinevate klasside kombinatsiooni. Vaadake allolevat näidet, et paremini mõista, kuidas see kõik toimib.

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

Rea veerud

Kasutage kohanemisvõimelisi .row-cols-*klasse, et määrata kiiresti veergude arv, mis teie sisu ja paigutuse kõige paremini renderdavad. Kui .col-*tavaklassid kehtivad üksikute veergude puhul (nt .col-md-4), siis reaveerude klassid on .rowvaikeväärtusena seatud sisalduvate veergude jaoks vanemale. .row-cols-autoSaate anda veergudele nende loomuliku laiuse .

Kasutage neid ridade veergude klasse, et kiiresti luua põhilisi ruudustikupaigutusi või juhtida kaardipaigutusi ja veeru tasemel vajadusel alistada.

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

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

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

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
  </div>
</div>

Võite kasutada ka kaasasolevat Sassi segu 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);
  }
}

Pesitsemine

Sisu pesastamiseks vaikeruudustikuga lisage olemasolevasse veergu uus veergude .rowkomplekt . Pesastatud read peaksid sisaldama veergude komplekti, mille kogum on kuni 12 (ei ole nõutav, et kasutaksite kõiki 12 saadaolevat veergu)..col-sm-*.col-sm-*

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

Kui kasutate Bootstrapi Sassi lähtefaile, saate kohandatud, semantiliste ja reageerivate lehepaigutuste loomiseks kasutada Sassi muutujaid ja segusid. Meie eelmääratletud ruudustikuklassid kasutavad samu muutujaid ja segusid, et pakkuda kiirelt reageerivate paigutuste jaoks tervet komplekti kasutusvalmis klasse.

Muutujad

Muutujad ja kaardid määravad veergude arvu, renni laiuse ja meediumipäringu punkti, millest alustada veergude ujumist. Kasutame neid ülalkirjeldatud eelmääratletud ruudustikuklasside loomiseks, samuti allpool loetletud kohandatud segude jaoks.

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

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

Segud

Miksiine kasutatakse koos ruudustiku muutujatega üksikute ruudustiku veergude jaoks semantilise CSS-i genereerimiseks.

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

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Kasutamise näide

Saate muuta muutujaid oma kohandatud väärtusteks või kasutada lihtsalt segusid nende vaikeväärtustega. Siin on näide vaikesätete kasutamisest kahe veeru paigutuse loomiseks, mille vahel on vahe.

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

Ruudustiku kohandamine

Kasutades meie sisseehitatud ruudustiku Sassi muutujaid ja kaarte, on võimalik eelmääratletud ruudustiku klasse täielikult kohandada. Muutke tasandite arvu, meediumipäringu mõõtmeid ja konteineri laiusi – seejärel kompileerige uuesti.

Sambad ja vihmaveerennid

Ruudustiku veergude arvu saab muuta Sassi muutujate kaudu. $grid-columnskasutatakse iga üksiku veeru laiuste (protsentides) genereerimiseks, määrates samal ajal $grid-gutter-widthveeru rennide laiuse.

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

Võrgutasandid

Veergudest väljapoole liikudes saate kohandada ka ruudustiku tasandite arvu. Kui soovite ainult nelja ruudustiku taset, värskendaksite $grid-breakpointsja $container-max-widthsmillekski selliseks:

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

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

Sassi muutujates või kaartides muudatuste tegemisel peate muudatused salvestama ja uuesti kompileerima. Seda tehes väljastatakse täiesti uus eelmääratletud ruudustiku klasside komplekt veergude laiuste, nihkete ja järjestuse jaoks. Kohandatud katkestuspunktide kasutamiseks värskendatakse ka reageerivaid nähtavuse utiliite. Veenduge, et määraksite ruudustiku väärtused px(mitte rem, em, või %).