Verkkojärjestelmä

Käytä tehokasta mobiili-first flexbox -ruudukkoamme rakentaaksesi kaikenmuotoisia ja -kokoisia asetteluja kahdentoista sarakejärjestelmän, viiden oletusarvoisen reagoivan tason, Sass-muuttujien ja -sekoitusten sekä kymmenien ennalta määritettyjen luokkien ansiosta.

Kuinka se toimii

Bootstrapin ruudukkojärjestelmä käyttää useita säiliöitä, rivejä ja sarakkeita sisällön asettelemiseen ja tasaamiseen. Se on rakennettu flexboxilla ja on täysin reagoiva. Alla on esimerkki ja syvällinen katsaus ruudukon muodostamiseen.

Oletko uusi tai tuntematon flexbox? Lue tästä CSS Tricks flexbox -oppaasta tausta, terminologia, ohjeet ja koodinpätkät.

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

Yllä oleva esimerkki luo kolme yhtä leveää saraketta pienille, keskisuurille, suurille ja erittäin suurille laitteille käyttämällä ennalta määritettyjä ruudukkoluokkia. Nämä sarakkeet on keskitetty sivulle ylätason kanssa .container.

Jaoteltuna se toimii seuraavasti:

• Säilöillä voit keskittää ja pehmustaa sivustosi sisältöä vaakasuunnassa. Käytä .containerresponsiiviseen pikselin leveyteen tai .container-fluidkaikkiin width: 100%näkymä- ja laitekokoihin.
• Rivit ovat sarakkeiden kääreitä. Jokaisessa sarakkeessa on vaakasuora padding(kutsutaan kouruksi) niiden välisen tilan ohjaamiseksi. Tämän paddingjälkeen riveillä on negatiivinen marginaali. Tällä tavalla kaikki sarakkeiden sisältö tasataan visuaalisesti vasemmalla puolella.
• Ruudukkoasettelussa sisältö on sijoitettava sarakkeiden sisään, ja vain sarakkeet voivat olla rivien välittömiä jälkeläisiä.
• Flexboxin ansiosta ruudukon sarakkeet, joissa ei ole määritettyä, asettuvat widthautomaattisesti saman levyisiksi sarakkeiksi. Esimerkiksi neljä kappaletta .col-smon automaattisesti 25 % leveä pienestä keskeytyskohdasta ylöspäin. Katso lisää esimerkkejä automaattisen asettelun sarakkeiden osiosta.
• Sarakeluokat osoittavat, kuinka monta saraketta haluat käyttää riviä kohden olevista 12 sarakkeesta. Joten jos haluat poikki kolme yhtä leveää saraketta, voit käyttää .col-4.
• Sarakkeet widths on asetettu prosentteina, joten ne ovat aina juoksevia ja mitoitettuja suhteessa yläelementtiin.
• Sarakkeissa on vaakasuuntainen paddingkourujen luominen yksittäisten sarakkeiden väliin, mutta voit poistaa marginrivit ja paddingsarakkeet .no-gutters-painikkeella .row.
• Jotta ruudukko saadaan reagoimaan, siinä on viisi ruudukon keskeytyspistettä, yksi kullekin reagoivalle keskeytyspisteelle : kaikki keskeytyskohdat (erittäin pieni), pieni, keskikokoinen, suuri ja erittäin suuri.
• Ruudukon keskeytyspisteet perustuvat vähimmäisleveyteen mediakyselyihin, mikä tarkoittaa, että ne koskevat tätä yhtä keskeytyspistettä ja kaikkia sen yläpuolella olevia (esim. .col-sm-4koskee pieniä, keskisuuria, suuria ja erittäin suuria laitteita, mutta ei ensimmäistä xskeskeytyspistettä).
• Voit käyttää ennalta määritettyjä ruudukkoluokkia (kuten .col-4) tai Sass-sekoituksia semanttisempaa merkintää varten.

Ole tietoinen flexboxin rajoituksista ja virheistä , kuten kyvyttömyydestä käyttää joitain HTML-elementtejä flex-säiliöinä .

Ruudukkovaihtoehdot

Vaikka Bootstrap käyttää kirjaimia ems tai rems useimpien koon määrittämiseen, pxs-kirjainta käytetään ruudukon keskeytyspisteisiin ja säilön leveyksiin. Tämä johtuu siitä, että näkymän leveys on pikseleinä, eikä se muutu fontin koon mukaan .

Katso kätevästä taulukosta, miten Bootstrap-grid-järjestelmän osat toimivat useissa laitteissa.

Automaattinen asettelu sarakkeet

Hyödynnä keskeytyskohtakohtaisia ​​sarakeluokkia sarakkeiden koon helpottamiseen ilman eksplisiittistä numeroitua luokkaa, kuten .col-sm-6.

Sama leveys

Tässä on esimerkiksi kaksi ruudukkoasettelua, jotka koskevat jokaista laitetta ja näkymää, alkaen xs- xl. Lisää mikä tahansa määrä yksikköä sisältämättömiä luokkia jokaiselle tarvitsemasi keskeytyspisteelle, ja jokainen sarake on samanleveinen.

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

Samanleveät sarakkeet voidaan jakaa useiksi riveiksi, mutta Safari flexbox -virhe esti tätä toimimasta ilman nimenomaista flex-basistai border. Vanhemmille selainversioille on olemassa kiertotapoja, mutta niiden ei pitäisi olla tarpeellisia, jos olet ajan tasalla.

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

Yhden sarakkeen leveyden asettaminen

Flexbox-ruudukon sarakkeiden automaattinen asettelu tarkoittaa myös sitä, että voit määrittää yhden sarakkeen leveyden ja saada sisarussarakkeiden kokoa automaattisesti muuttamaan sen ympärillä. Voit käyttää ennalta määritettyjä ruudukkoluokkia (kuten alla näkyy), ruudukkosekoituksia tai rivin leveyksiä. Huomaa, että muiden sarakkeiden koko muuttuu keskisarakkeen leveydestä riippumatta.

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

Muuttuvan leveyden sisältö

Käytä col-{breakpoint}-autoluokkia sarakkeiden kokoamiseen niiden sisällön luonnollisen leveyden perusteella.

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

Samanleveä monirivinen

Luo yhtä leveitä sarakkeita, jotka kattavat useita rivejä lisäämällä kohtaan, .w-100jossa haluat sarakkeiden katkeavan uudelle riville. Tee tauoista reagoivia .w-100yhdistämällä joihinkin reagoiviin näyttöapuohjelmiin .

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

Responsiiviset luokat

Bootstrapin ruudukko sisältää viisi tasoa ennalta määritettyjä luokkia monimutkaisten reagoivien asettelujen rakentamiseen. Mukauta sarakkeiden kokoa erittäin pienissä, pienissä, keskikokoisissa, suurissa tai erittäin suurissa laitteissa haluamallasi tavalla.

Kaikki keskeytyskohdat

Käytä luokkia .colja ruudukoille, jotka ovat samoja pienimmistä laitteista suurimpaan. .col-*Määritä numeroitu luokka, kun tarvitset erityisen kokoisen sarakkeen; muuten pysy vapaasti .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>

Pinottu vaakasuoraan

Käyttämällä yhtä .col-sm-*luokkien sarjaa voit luoda perusruudukkojärjestelmän, joka alkaa pinottuna ja muuttuu vaakasuoraksi pienestä keskeytyskohdasta ( 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>

Sekoita ja sovita

Etkö halua, että sarakkeet vain pinoutuvat joihinkin ruudukkotasoihin? Käytä eri luokkien yhdistelmää kullekin tasolle tarpeen mukaan. Katso alla oleva esimerkki saadaksesi paremman käsityksen siitä, miten se kaikki toimii.

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

Tasaus

Käytä flexbox-kohdistusapuohjelmia sarakkeiden kohdistamiseen pysty- ja vaakasuunnassa.

Pystysuuntainen kohdistus

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

Vaakasuora kohdistaminen

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

Ei vesikouruja

Ennalta määritettyjen ruudukkoluokkien sarakkeiden väliset kourut voidaan poistaa .no-gutters. Tämä poistaa negatiiviset margins:t kaikista välittömistä alatason sarakkeista .rowja vaakasuuntaiset .padding

Tässä on lähdekoodi näiden tyylien luomiseen. Huomaa, että sarakkeiden ohitukset koskevat vain ensimmäisiä alatason sarakkeita ja ne kohdistetaan määritteen valitsimen kautta . Vaikka tämä luo tarkemman valitsimen, sarakkeiden täyttöä voidaan silti muokata edelleen välitysapuohjelmilla .

Tarvitsetko reunasta reunaan -suunnittelua? Pudota vanhempi .containertai .container-fluid.

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

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

Käytännössä se näyttää tältä. Huomaa, että voit jatkaa tämän käyttöä kaikkien muiden ennalta määritettyjen ruudukkoluokkien kanssa (mukaan lukien sarakkeiden leveydet, reagoivat tasot, uudelleenjärjestelyt ja muut).

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

Sarakkeen kääre

Jos yhdelle riville sijoitetaan enemmän kuin 12 saraketta, jokainen ylimääräisten sarakkeiden ryhmä rivittyy yhtenä yksikkönä uudelle riville.

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

Sarake katkeaa

Sarakkeiden katkaiseminen uudelle riville flexboxissa vaatii pienen hakkeroinnin: lisää elementti uudelle riville, width: 100%missä haluat rivittää sarakkeet. Normaalisti tämä suoritetaan useilla .rows:illä, mutta kaikki toteutustavat eivät voi ottaa huomioon tätä.

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

Voit myös käyttää tätä taukoa tietyissä keskeytyspisteissä responsiivisten näyttöapuohjelmiemme avulla .

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

Järjestetään uudelleen

Tilaa luokat

Käytä .order-luokkia hallitaksesi sisältösi visuaalista järjestystä . Nämä luokat ovat responsiivisia, joten voit asettaa orderkeskeytyskohdan (esim. .order-1.order-md-2). Sisältää tuen 1läpikäymiselle 12kaikilla viidellä ruudukkotasolla.

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

On myös responsiivisia .order-firstja .order-lastluokkia, jotka muuttavat orderelementin soveltamista order: -1ja order: 13( order: $columns + 1), vastaavasti. Nämä luokat voidaan myös tarvittaessa sekoittaa numeroituihin .order-*luokkiin.

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

Sarakkeiden offsetointi

Voit siirtää ruudukon sarakkeita kahdella tavalla: responsiiviset .offset-ruudukkoluokat ja marginaaliapuohjelmamme . Ruudukkoluokat on mitoitettu vastaamaan sarakkeita, kun taas marginaalit ovat hyödyllisempiä nopeissa asetteluissa, joissa siirtymän leveys vaihtelee.

Offset-luokat

Siirrä sarakkeita oikealle .offset-md-*luokkien avulla. Nämä luokat lisäävät sarakkeen vasenta marginaalia *sarakkeilla. Esimerkiksi .offset-md-4siirtyy .col-md-4neljän sarakkeen yli.

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

Responsiivisten keskeytyspisteiden sarakkeen tyhjentämisen lisäksi saatat joutua nollaamaan siirtymät. Katso tämä toiminnassa ruudukkoesimerkissä .

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

Marginaaliset apuohjelmat

Kun olet siirtynyt flexboxiin v4:ssä, voit käyttää marginaaliapuohjelmia, kuten .mr-autopakottaa sisarussarakkeet poispäin toisistaan.

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

Pesivä

Jos haluat upottaa sisältösi oletusruudukkoon, lisää uusi .rowja joukko .col-sm-*sarakkeita olemassa olevaan .col-sm-*sarakkeeseen. Sisäkkäisten rivien tulee sisältää sarja sarakkeita, joiden yhteenlaskettu summa on enintään 12 (kaikkia 12 käytettävissä olevaa saraketta ei vaadita).

<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

Kun käytät Bootstrapin Sass-lähdetiedostoja, voit luoda mukautettuja, semanttisia ja reagoivia sivuasetteluja käyttämällä Sass-muuttujia ja mixinejä. Ennalta määritetyt ruudukkoluokat käyttävät näitä samoja muuttujia ja sekoituksia tarjotakseen koko sarjan käyttövalmiita luokkia nopeita reagoivia asetteluja varten.

Muuttujat

Muuttujat ja kartat määrittävät sarakkeiden lukumäärän, kourujen leveyden ja mediakyselypisteen, josta kelluvat sarakkeet aloitetaan. Käytämme näitä edellä dokumentoitujen ennalta määritettyjen ruudukkoluokkien luomiseen sekä alla lueteltuihin mukautettuihin mixineihin.

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

Seokset

Mixiinejä käytetään yhdessä ruudukkomuuttujien kanssa semanttisen CSS:n luomiseen yksittäisille ruudukon sarakkeille.

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

Käyttöesimerkki

Voit muokata muuttujia omiksi mukautetuiksi arvoihisi tai vain käyttää mixinejä niiden oletusarvojen kanssa. Tässä on esimerkki oletusasetusten käyttämisestä kahden sarakkeen asettelun luomiseen, jossa on väli.

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

Ruudukon mukauttaminen

Sisäänrakennettujen Sass-ruudukkomuuttujiemme ja -karttojen avulla on mahdollista mukauttaa ennalta määritettyjä ruudukkoluokkia täysin. Muuta tasojen määrää, mediakyselyn mittoja ja säilön leveyksiä – käännä sitten uudelleen.

Pylväät ja vesikourut

Ruudukon sarakkeiden määrää voidaan muuttaa Sass-muuttujien avulla. $grid-columnskäytetään luomaan kunkin yksittäisen sarakkeen leveydet (prosentteina) samalla kun $grid-gutter-widthse määrittää sarakkeen kourujen leveyden.

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

Ruudukkotasot

Itse sarakkeiden lisäksi voit myös muokata ruudukkotasojen määrää. Jos halusit vain neljä ruudukkotasoa, päivität $grid-breakpointsja $container-max-widthsjohonkin tämän kaltaiseen:

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

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

Kun teet muutoksia Sass-muuttujiin tai -karttoihin, sinun on tallennettava muutokset ja käännettävä uudelleen. Tämä tulostaa aivan uuden joukon ennalta määritettyjä ruudukkoluokkia sarakkeiden leveyksille, siirtymille ja järjestykselle. Myös reagoivat näkyvyysapuohjelmat päivitetään käyttämään mukautettuja keskeytyskohtia. Varmista, että asetat ruudukon arvot px(ei rem, em, tai %).