Verkkojärjestelmä

Esimerkki

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 selitys siitä, kuinka verkkojärjestelmä muodostuu.

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

Yllä oleva esimerkki luo kolme yhtä leveää saraketta kaikille laitteille ja näkymäporteille käyttämällä ennalta määritettyjä ruudukkoluokkia. Nämä sarakkeet on keskitetty sivulle ylätason kanssa .container.

Kuinka se toimii

Jaoteltuna ruudukkojärjestelmä muodostuu seuraavasti:

• Ruudukkomme tukee kuutta reagoivaa keskeytyspistettä . Katkaisupisteet perustuvat min-widthmediakyselyihin, mikä tarkoittaa, että ne vaikuttavat siihen ja kaikkiin sen yläpuolella oleviin (esim. .col-sm-4koskee sm, md, lg, xl, ja xxl). Tämä tarkoittaa, että voit hallita säilön ja sarakkeen kokoa ja toimintaa kunkin keskeytyskohdan mukaan.

• Säiliöt keskittävät ja pehmustavat sisältösi vaakasuunnassa. Käytä .containerresponsiivista pikselin leveyttä, .container-fluidkaikissa width: 100%näkymäporteissa ja laitteissa tai reagoivaa säiliötä (esim. .container-md) nestemäisen ja pikselinleveyden yhdistelmälle.

• Rivit ovat sarakkeiden kääreitä. Jokaisessa sarakkeessa on vaakasuora padding(kutsutaan kouruksi) niiden välisen tilan ohjaamiseksi. Tämä paddingtorjutaan riveillä negatiivisilla marginaaleilla varmistaakseen, että sarakkeiden sisältö on visuaalisesti kohdistettu vasemmalle puolelle. Rivit tukevat myös muokkausluokkia, joilla voidaan soveltaa yhtenäisesti sarakkeiden kokoa , ja kouruluokkia sisältösi välien muuttamiseen.

• Sarakkeet ovat uskomattoman joustavia. Yhdellä rivillä on 12 mallisaraketta, joten voit luoda erilaisia ​​elementtien yhdistelmiä, jotka kattavat minkä tahansa määrän sarakkeita. Sarakeluokat osoittavat span mallisarakkeiden lukumäärän (esim. col-4ulottuu neljä). widths on asetettu prosentteina, joten sinulla on aina sama suhteellinen koko.

• Vesikourut ovat myös herkkiä ja muokattavissa. Kouruluokat ovat saatavilla kaikissa keskeytyspisteissä, kaikki samat koot kuin marginaalimme ja pehmustevälimme . Vaihda vaakakourut .gx-*luokilla, pystykourut -painikkeella .gy-*tai kaikki kourut .g-*luokilla. .g-0on saatavilla myös vesikourujen poistamiseen.

• Sass-muuttujat, kartat ja sekoitukset syöttävät verkkoa. Jos et halua käyttää ennalta määritettyjä ruudukkoluokkia Bootstrapissa, voit käyttää grid-lähdettä Sass luodaksesi omasi semanttisemmalla merkinnällä. Sisällytämme myös joitain mukautettuja CSS-ominaisuuksia näiden Sass-muuttujien käyttämiseen, mikä lisää joustavuutta sinulle.

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

Ruudukkovaihtoehdot

Bootstrapin ruudukkojärjestelmä voi mukautua kaikkien kuuden oletusarvoisen keskeytyskohdan ja kaikkien mukautettavien keskeytyspisteiden kesken. Kuusi oletusarvoista ruudukkotasoa ovat seuraavat:

• Erittäin pieni (xs)
• Pieni (sm)
• Keskikokoinen (md)
• Suuri (lg)
• Erittäin suuri (xl)
• Erittäin erittäin suuri (xxl)

Kuten edellä todettiin, jokaisella näistä keskeytyspisteistä on oma säilönsä, yksilöllinen luokkaetuliite ja muuttajat. Näin ruudukko muuttuu näiden keskeytyspisteiden välillä:

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- xxl. Lisää mikä tahansa määrä yksikköä sisältämättömiä luokkia jokaiselle tarvitsemasi keskeytyspisteelle, ja jokainen sarake on samanleveinen.

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

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

Muuttuvan leveyden sisältö

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

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

Responsiiviset luokat

Bootstrapin ruudukko sisältää kuusi 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="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>

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

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.

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

Rivi sarakkeet

Käytä responsiivisia .row-cols-*luokkia määrittääksesi nopeasti sarakkeiden lukumäärän, jotka näyttävät parhaiten sisällön ja asettelun. Normaalit .col-*luokat koskevat yksittäisiä sarakkeita (esim. .col-md-4), kun taas rivisarakkeiden luokat asetetaan ylätason .rowpikakuvakkeeksi. .row-cols-autoVoit antaa sarakkeille niiden luonnollisen leveyden .

Näiden rivisarakkeiden luokkien avulla voit nopeasti luoda perusruudukon asetteluja tai hallita korttiasetteluja.

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

Voit myös käyttää mukana tulevaa Sass-mixiiniä 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);
  }
}

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

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

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

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

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

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-row-columnskäytetään määrittämään sarakkeiden enimmäismäärä .row-cols-*, kaikki tämän rajan ylittävät määrät ohitetaan.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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ällöin tulostetaan täysin uusi sarja ennalta määritettyjä ruudukkoluokkia sarakkeiden leveydelle, 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 %).