Võrgusüsteem

Tänu kaheteistkümnele veerusüsteemile, viiele vaikimisi reageerivale astmele, Sassi muutujatele ja segudele ning kümnetele eelmääratletud klassidele kasutage meie võimsat mobiili-first flexbox-võrku, et luua igasuguse kuju ja suurusega paigutusi.

Kuidas see töötab

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 ülevaade ruudustiku koosnemisest.

Kas olete flexboxi uus kasutaja või pole sellega tuttav? Lugege seda CSS Tricks flexboxi juhendit tausta, terminoloogia, juhiste ja koodilõikude kohta.

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

Ülaltoodud näide loob kolm võrdse laiusega veergu väikestes, keskmistes, suurtes ja eriti suurtes seadmetes, kasutades meie eelmääratletud ruudustiku klasse. Need veerud on lehe keskel vanemaga .container.

Jagades selle lahti, toimib see järgmiselt.

• Konteinerid võimaldavad saidi sisu tsentreerimiseks ja horisontaalseks polsterdamiseks. Kasutage .containertundliku pikslilaiuse või .container-fluidkõigi width: 100%vaateava ja seadme suuruste jaoks.
• Read on veergude ümbrised. Igal veerul on horisontaalne padding(nn vihmaveerenn) nendevahelise ruumi reguleerimiseks. Seejärel paddingneutraliseeritakse seda negatiivsete veeristega ridadel. Nii joondatakse kogu veergude sisu visuaalselt vasakule küljele.
• Ruudustiku paigutuses tuleb sisu paigutada veergudesse ja ainult veerud võivad olla ridade vahetud alamjärgud.
• Tänu flexboxile paigutatakse määramata ruudustiku veerud widthautomaatselt võrdse laiusega veergudena. Näiteks neli eksemplari .col-smon automaatselt 25% laiused väikesest katkestuspunktist ja ülespoole. Rohkem näiteid leiate automaatse paigutuse veergude jaotisest.
• Veeruklassid näitavad veergude arvu, mida soovite kasutada võimalikust 12-st rea kohta. Seega, kui soovite kolme võrdse laiusega veergu, võite kasutada .col-4.
• Veerud widths on määratud protsentides, nii et need on alati sujuvad ja nende suurus on põhielemendi suhtes erinev.
• Veerud on horisontaalsed padding, et luua vihmaveerennid üksikute veergude vahele, kuid saate eemaldada marginridadest ja veergudest paddingnupuga .no-gutters..row
• Ruudustiku tundlikuks muutmiseks on viis ruudustiku katkestuspunkti, üks iga reageeriva katkestuspunkti jaoks : kõik murdepunktid (eriti väikesed), väikesed, keskmised, suured ja eriti suured.
• Ruudustiku katkestuspunktid põhinevad minimaalse laiusega meediumipäringutel, mis tähendab, et need kehtivad sellele ühele katkestuspunktile ja kõigile sellest kõrgemale (nt .col-sm-4kehtib väikeste, keskmiste, suurte ja eriti suurte seadmete puhul, kuid mitte esimese xskatkestuspunkti kohta).
• Semantilisema märgistuse jaoks saate kasutada eelmääratletud ruudustiku klasse (nt .col-4) või Sassi segusid .

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

Võrgu valikud

Kui Bootstrap kasutab enamiku suuruste määratlemiseks tähti ems või s, siis s-i kasutatakse ruudustiku katkestuspunktide ja konteineri laiuste jaoks. Selle põhjuseks on asjaolu, et vaateava laius on pikslites ja see ei muutu koos fondi suurusega .rempx

Vaadake käepärase tabeli abil, kuidas Bootstrapi ruudustikusüsteemi aspektid mitmes seadmes töötavad.

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

Võrdse laiusega veerud saab jagada mitmeks reaks, kuid Safari flexboxi viga ei võimaldanud sellel töötada ilma selgesõnalise flex-basisvõi border. Vanemate brauseriversioonide jaoks on lahendusi, kuid need ei tohiks olla vajalikud, kui olete ajakohased.

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

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

Võrdse laiusega mitmerealine

Looge võrdse laiusega veerud, mis hõlmavad mitut rida, sisestades .w-100koha, kuhu soovite veerud uuele reale murda. Muutke pausid tundlikuks, segades .w-100mõne tundliku kuvari utiliidiga .

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

Vastuvõtlikud klassid

Bootstrapi ruudustik sisaldab viit eelmääratletud klassi taset keerukate tundlike 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="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>

Horisontaalselt virnastatud

Kasutades ühte .col-sm-*klasside komplekti, saate luua põhivõrgusüsteemi, mis algab virnastatuna enne horisontaalseks muutumist väikese murdepunktiga ( 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>

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.

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

Joondamine

Kasutage veergude vertikaalseks ja horisontaalseks joondamiseks flexboxi joondusutiliite.

Vertikaalne joondus

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

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

Horisontaalne joondamine

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

Pole vihmaveetorusid

Meie eelmääratletud ruudustikuklasside veergude vahel olevad vihmaveerennid saab eemaldada nupuga .no-gutters. See eemaldab negatiivsed margins-d kõigist otsestest alamveergudest .rowja horisontaalsed .padding

Siin on nende stiilide loomise lähtekood. Pange tähele, et veergude alistamise ulatus hõlmab ainult esimesi alamveerge ja neid sihitakse atribuudivalija kaudu . Kuigi see loob spetsiifilisema valija, saab veergude polsterdust siiski veelgi kohandada vahekaugusutiliitidega .

Kas vajate servast servani disaini? Loobuge vanem .containervõi .container-fluid.

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

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

Praktikas näeb see välja nii. Pange tähele, et saate jätkata selle kasutamist kõigi teiste eelmääratletud ruudustikuklassidega (sh veergude laiused, reageerivad tasemed, ümberkorraldused ja palju muud).

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

Veeru mähkimine

Kui ühte ritta paigutatakse rohkem kui 12 veergu, murrab iga lisaveergude rühm ühe üksusena uuele reale.

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

Veergude katkestused

Veergude purustamine uuele reale flexboxis nõuab väikest häkkimist: lisage uuele reale element, width: 100%kuhu soovite oma veerud mähkida. Tavaliselt saavutatakse see mitme .rows-ga, kuid mitte iga rakendusmeetod ei saa seda arvesse võtta.

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

Saate seda pausi rakendada ka teatud katkestuspunktides meie tundlike kuvautiliitidega .

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

Ümberjärjestamine

Telli klassid

Kasutage .order-klasse oma sisu visuaalse järjekorra kontrollimiseks. Need klassid on tundlikud, nii et saate määrata orderkatkestuspunkti (nt .order-1.order-md-2). Sisaldab läbipääsu tuge 1kõigil 12viiel ruudustikutasandil.

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

Samuti on olemas reageerivad .order-firstja .order-lastklassid, mis muudavad orderelemendi vastavalt rakendades order: -1ja order: 13( order: $columns + 1). Neid klasse saab vastavalt vajadusele ka nummerdatud .order-*klassidega segada.

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

Veergude tasaarvestamine

Saate ruudustiku veerge nihutada kahel viisil: meie reageerivad .offset-ruudustikuklassid ja meie marginaaliutiliidid . Ruudustiku klasside suurus on kohandatud veergudele, samas kui veerised on kasulikumad kiirete paigutuste jaoks, kus nihke laius on muutuv.

Offset klassid

.offset-md-*Liigutage veerge klasside abil paremale . Need klassid suurendavad veeru vasakut veerist *veergude kaupa. Näiteks .offset-md-4liigub .col-md-4üle nelja veeru.

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

Lisaks reageerivate katkestuspunktide veergude tühjendamisele peate võib-olla lähtestama nihkeid. Vaadake seda tegevuses ruudustiku näites .

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

Marginaali kommunaalteenused

Üleminekul flexboxile versioonis 4 saate kasutada veerisutiliite, näiteks .mr-autovendade veergude üksteisest eemale sundimiseks.

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

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

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, aga ka allpool loetletud kohandatud segude jaoks.

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

Segud

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

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

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 veeruga paigutuse loomiseks, mille vahel on vahe.

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

<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 eelnevalt mää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, $grid-gutter-widthlubades samal ajal katkestuspunktipõhiseid laiusi, mis on jagatud ühtlaselt veeru rennide vahel padding-leftja nende jaoks.padding-right

$grid-columns: 12 !default;
$grid-gutter-width: 30px !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 %).