Rács rendszer

Példa

A Bootstrap rácsrendszere tárolók, sorok és oszlopok sorozatát használja a tartalom elrendezéséhez és igazításához. Flexbox -szal épül fel, és teljesen érzékeny. Az alábbiakban egy példa és egy mélyreható magyarázat látható a rácsrendszer összeállítására.

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

A fenti példa három egyenlő szélességű oszlopot hoz létre az összes eszközön és nézetablakban az előre meghatározott rácsosztályaink segítségével. Ezek az oszlopok az oldal közepén vannak a szülővel .container.

Hogyan működik

Lebontva a következőképpen áll össze a rácsrendszer:

• Rácsunk hat érzékeny töréspontot támogat . min-widthA töréspontok médialekérdezéseken alapulnak , ami azt jelenti, hogy hatással vannak erre a töréspontra és a felette lévőkre (pl. .col-sm-4vonatkozik a sm, md, lg, xlés xxl). Ez azt jelenti, hogy az egyes töréspontok szerint szabályozhatja a tárolók és oszlopok méretét és viselkedését.

• A tárolók középre helyezik és vízszintesen párnázzák a tartalmat. Használja .containerreszponzív pixelszélességhez , .container-fluidminden width: 100%nézetablakhoz és eszközhöz, vagy érzékeny tárolóhoz (pl. .container-md) a folyékony és pixelszélességek kombinációjához.

• A sorok az oszlopok burkolói. Minden oszlopnak van vízszintes padding(ún. ereszcsatorna) a köztük lévő tér szabályozására. Ezt paddingazután a negatív margókkal rendelkező sorokon ellensúlyozza, hogy biztosítsa, hogy az oszlopok tartalma vizuálisan igazodjon a bal oldalon. A sorok támogatják a módosító osztályokat is, amelyek egységesen alkalmazzák az oszlopméretezést , és az ereszcsatorna osztályokat a tartalom térközének módosításához.

• Az oszlopok hihetetlenül rugalmasak. Soronként 12 sablonoszlop áll rendelkezésre, amelyek lehetővé teszik az elemek különböző kombinációinak létrehozását, amelyek tetszőleges számú oszlopot átívelnek. Az oszloposztályok a sablonoszlopok számát jelzik (pl col-4. négyre terjed ki). widths százalékban vannak megadva, így mindig ugyanaz a relatív méretezés.

• Az ereszcsatornák is érzékenyek és testreszabhatók. Az ereszcsatorna-osztályok minden törésponton elérhetők, ugyanolyan méretekkel, mint a margó- és párnázási távolságunk . Változtassa meg a vízszintes ereszcsatornákat .gx-*osztályokkal, a függőleges ereszcsatornákat a -val .gy-*, vagy az összes ereszcsatornát .g-*osztályokkal. .g-0ereszcsatornák eltávolítására is rendelkezésre áll.

• Sass változók, térképek és mixek táplálják a hálózatot. Ha nem szeretné használni az előre definiált rácsosztályokat a Bootstrapben, használhatja rácsunk Sass forrását , hogy létrehozza sajátját szemantikai jelöléssel. Néhány egyéni CSS-tulajdonságot is tartalmazunk ezeknek a Sass-változóknak a felhasználásához, így még nagyobb rugalmasságot biztosítunk Önnek.

Legyen tisztában a flexbox korlátaival és hibáival , például azzal, hogy bizonyos HTML-elemeket nem lehet rugalmas tárolóként használni .

Rács opciók

A Bootstrap rácsrendszere alkalmazkodni tud mind a hat alapértelmezett törésponthoz, és az összes testreszabott törésponthoz. A hat alapértelmezett rácsszint a következő:

• Extra kicsi (xs)
• Kicsi (sm)
• Közepes (md)
• nagy (lg)
• Extra nagy (xl)
• Extra extra nagy (xxl)

Ahogy fentebb megjegyeztük, ezeknek a töréspontoknak mindegyike saját tárolóval, egyedi osztályelőtaggal és módosítókkal rendelkezik. Íme, hogyan változik a rács ezeken a töréspontokon:

Oszlopok automatikus elrendezése

Használjon töréspont-specifikus oszloposztályokat az egyszerű oszlopméretezéshez explicit számozott osztályok, például .col-sm-6.

Egyenlő szélességű

Például itt van két rácselrendezés, amely minden eszközre és nézetablakra vonatkozik, től xsig xxl. Adjon hozzá tetszőleges számú egység nélküli osztályt minden szükséges törésponthoz, és minden oszlop azonos szélességű lesz.

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

Egy oszlopszélesség beállítása

A flexbox rácsoszlopok automatikus elrendezése azt is jelenti, hogy beállíthatja egy oszlop szélességét, és a testvéroszlopokat automatikusan átméretezheti körülötte. Használhat előre definiált rácsosztályokat (lásd lent), grid mixineket vagy inline szélességet. Vegye figyelembe, hogy a többi oszlop átméreteződik a középső oszlop szélességétől függetlenül.

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

Változó szélességű tartalom

Használjon col-{breakpoint}-autoosztályokat az oszlopok méretére a tartalmuk természetes szélessége alapján.

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

Reszponzív osztályok

A Bootstrap rácsja hat előre definiált osztályt tartalmaz az összetett reszponzív elrendezések létrehozásához. Testreszabhatja az oszlopok méretét az extra kicsi, kicsi, közepes, nagy vagy extra nagy eszközökön, ahogy jónak látja.

Minden töréspont

A legkisebbtől a legnagyobbig azonos rácsokhoz használja a .colés .col-*osztályokat. Adjon meg egy számozott osztályt, ha különösen méretű oszlopra van szüksége; ellenkező esetben nyugodtan ragaszkodjon a -hoz .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>

Vízszintesre rakva

Egyetlen .col-sm-*osztálykészlet használatával létrehozhat egy alapvető rácsrendszert, amely halmozottan indul, és vízszintessé válik a kis töréspontnál ( sm).

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

Keverd össze és párosítsd

Nem szeretné, hogy az oszlopok egyszerűen egymásra halmozódjanak néhány rácsszinten? Szükség szerint használjon különböző osztályok kombinációját minden réteghez. Tekintse meg az alábbi példát, hogy jobban megértse, hogyan működik mindez.

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

Soroszlopok

A reszponzív .row-cols-*osztályok segítségével gyorsan beállíthatja a tartalmat és elrendezést legjobban megjelenítő oszlopok számát. Míg a normál .col-*osztályok az egyes oszlopokra vonatkoznak (pl. .col-md-4), addig a soroszlopok osztályai a szülőn vannak beállítva .rowparancsikonként. Ezzel .row-cols-automegadhatja az oszlopok természetes szélességét.

Ezekkel a soroszlop-osztályokkal gyorsan létrehozhat alapvető rácselrendezéseket vagy vezérelheti a kártyaelrendezéseket.

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

Használhatja a mellékelt Sass mixint is 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);
  }
}

Fészekrakás

Ha be szeretné ágyazni a tartalmat az alapértelmezett rácsba, adjon hozzá egy új .rowoszlopkészletet .col-sm-*egy meglévő .col-sm-*oszlophoz. A beágyazott soroknak olyan oszlopokat kell tartalmazniuk, amelyek összesen legfeljebb 12 oszlopot tartalmazhatnak (nem kötelező mind a 12 elérhető oszlopot használni).

<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

A Bootstrap Sass-forrásfájljainak használatakor lehetősége van Sass-változók és mixinek használatával egyéni, szemantikai és reszponzív oldalelrendezések létrehozására. Előre definiált rácsosztályaink ugyanezeket a változókat és mixineket használják, hogy a használatra kész osztályok teljes készletét biztosítsák a gyorsan reagáló elrendezésekhez.

Változók

A változók és a térképek határozzák meg az oszlopok számát, az ereszcsatorna szélességét és azt a médialekérdezési pontot, amelynél az oszlopok lebegése kezdődik. Ezeket használjuk a fent dokumentált előre definiált grid osztályok létrehozásához, valamint az alább felsorolt ​​egyéni mixinekhez.

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

Mixins

A mixineket a rácsváltozókkal együtt használják szemantikus CSS létrehozására az egyes rácsoszlopokhoz.

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

Használati példa

Módosíthatja a változókat saját egyéni értékekre, vagy egyszerűen használhatja a mixineket az alapértelmezett értékekkel. Íme egy példa arra, hogyan használhatja az alapértelmezett beállításokat egy kétoszlopos elrendezés létrehozásához, amelyek között rés van.

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

A rács testreszabása

A beépített grid Sass változóink és térképeink segítségével lehetőség van az előre meghatározott grid osztályok teljes testreszabására. Módosítsa a szintek számát, a médialekérdezés méreteit és a tároló szélességét, majd fordítsa újra.

Oszlopok és ereszcsatornák

A rácsoszlopok száma Sass változókkal módosítható. $grid-columnsaz egyes oszlopok szélességének (százalékban) generálására szolgál, miközben $grid-gutter-widthbeállítja az oszlop ereszcsatornáinak szélességét.

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

Rács szintek

Magukon az oszlopokon túl testreszabhatja a rácsszintek számát is. Ha csak négy rácsszintet szeretne, frissítse a $grid-breakpointsés $container-max-widthsa következőre:

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

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

Ha bármilyen módosítást végez a Sass-változókon vagy leképezéseken, mentenie kell a változtatásokat, és újra kell fordítania. Ezzel egy vadonatúj előre definiált rácsosztály-készletet fog kiadni az oszlopszélességekhez, az eltolásokhoz és a sorrendhez. A reszponzív láthatósági segédprogramok is frissülnek az egyéni töréspontok használatához. Ügyeljen arra, hogy a rácsértékeket beállítsa px(ne rem, em, vagy %).