Rács rendszer

Használja nagy teljesítményű mobil-első flexbox rácsunkat, hogy bármilyen alakú és méretű elrendezést készítsen a tizenkét oszloprendszernek, az öt alapértelmezett reagáló rétegnek, a Sass-változóknak és mixineknek, valamint a tucatnyi előre meghatározott osztálynak köszönhetően.

Hogyan működik

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ült, és teljesen érzékeny. Az alábbiakban egy példa és egy alapos pillantás a rács összeállítására.

Új vagy még nem ismeri a flexboxot? Olvassa el ezt a CSS Tricks flexbox útmutatót a háttérrel, a terminológiával, az irányelvekkel és a kódrészletekkel kapcsolatban.

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

A fenti példa három egyenlő szélességű oszlopot hoz létre kis, közepes, nagy és extra nagy eszközökön 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.

Lebontásban a következőképpen működik:

• A tárolók lehetővé teszik a webhely tartalmának középre helyezését és vízszintes párnázottságát. Használja .containerreszponzív pixelszélességhez vagy .container-fluidminden width: 100%nézetablakhoz és eszközmérethez.
• 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ós sorokon ellensúlyozza. Így az oszlopok összes tartalma vizuálisan a bal oldalon lesz igazítva.
• Rácselrendezésben a tartalmat az oszlopokon belül kell elhelyezni, és csak az oszlopok lehetnek sorok közvetlen gyermekei.
• A flexboxnak köszönhetően a megadott nélküli rácsoszlopok widthautomatikusan egyenlő szélességű oszlopokként jelennek meg. Például négy példány .col-smautomatikusan 25%-os széles lesz a kis törésponttól kezdve. További példákért tekintse meg az automatikus elrendezés oszlopait .
• Az oszloposztályok azt jelzik, hogy a soronként lehetséges 12 oszlop közül hány oszlopot szeretne használni. Tehát, ha három egyenlő szélességű oszlopot szeretne keresztezni, használhatja a .col-4.
• Az s oszlopok widthszázalékban vannak megadva, így mindig gördülékenyek és méretezhetők a szülőelemhez képest.
• Az oszlopok vízszintesek paddingaz ereszcsatornák létrehozásához az egyes oszlopok között, azonban eltávolíthatja a marginsorokból és paddingaz oszlopokból a .no-guttersgombbal .row.
• Annak érdekében, hogy a rács érzékeny legyen, öt rács töréspontja van, mindegyik reszponzív törésponthoz egy : minden töréspont (extra kicsi), kicsi, közepes, nagy és extra nagy.
• A rács töréspontjai a minimális szélességű médialekérdezéseken alapulnak, vagyis arra az egy töréspontra és a felette lévőkre vonatkoznak (pl. .col-sm-4kicsi, közepes, nagy és extra nagy eszközökre vonatkoznak, de nem az első xstöréspontra).
• Használhat előre meghatározott rácsosztályokat (például .col-4) vagy Sass mixineket a szemantikai jelölések javításához.

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

Míg a Bootstrap ems vagy rems betűt használ a legtöbb méret meghatározásához, az pxs a rács töréspontjaihoz és a tárolószélességekhez. Ennek az az oka, hogy a nézetablak szélessége pixelben van megadva, és nem változik a betűmérettel .

Tekintse meg, hogyan működnek a Bootstrap rácsrendszer egyes elemei több eszközön egy praktikus táblázat segítségével.

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, amelyek minden eszközre és nézetablakra vonatkoznak, től xsig xl. 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>

Az egyenlő szélességű oszlopok több sorra bonthatók, de volt egy Safari flexbox hiba , amely megakadályozta, hogy ez explicit flex-basisvagy jelzés nélkül működjön border. Vannak megoldások a régebbi böngészőverziókhoz, de ezekre nincs szükség, ha Ön naprakész.

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

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>

Egyenlő szélességű többsoros

Hozzon létre egyforma szélességű oszlopokat, amelyek több sort ívelnek át úgy, hogy beszúrja azt a helyet, .w-100ahol az oszlopokat új sorra szeretné törni. Tegye érzékenyebbé a szüneteket, ha összekeveri a -t .w-100néhány reszponzív megjelenítési segédprogrammal .

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

Reszponzív osztályok

A Bootstrap rácsja öt 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="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>

Vízszintesre rakva

Egyetlen .col-sm-*osztálykészlet használatával létrehozhat egy alapvető rácsrendszert, amely halmozottan indul, mielőtt vízszintessé válik a kis törésponttal ( 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>

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.

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

Igazítás

Használja a flexbox igazító segédprogramokat az oszlopok függőleges és vízszintes igazításához.

Függőleges igazítás

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

Vízszintes igazítás

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

Nincs ereszcsatorna

Az előre definiált rácsosztályainkban az oszlopok közötti ereszcsatornák a -val eltávolíthatók .no-gutters. Ez eltávolítja a negatív margins-t az összes közvetlen alárendelt oszlopból .rowés a vízszintes elemet.padding

Itt található a stílusok létrehozásának forráskódja. Vegye figyelembe, hogy az oszlopfelülírások csak az első alárendelt oszlopokra vonatkoznak, és az attribútumválasztóval célozzák őket . Noha ez egy specifikusabb választót generál, az oszlopok kitöltése továbbra is tovább testreszabható a térköz segédprogramokkal .

Széltől szélig terjedő tervezésre van szüksége? Dobd el a szülőt .containervagy .container-fluid.

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

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

A gyakorlatban így néz ki. Vegye figyelembe, hogy ezt továbbra is használhatja az összes többi előre definiált rácsosztályhoz (beleértve az oszlopszélességeket, az adaptív rétegeket, az átrendezéseket és egyebeket).

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

Oszlop burkolása

Ha egy sorban több mint 12 oszlop van elhelyezve, a további oszlopok minden csoportja egy egységként új sorba kerül.

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

Oszloptörések

Az oszlopok új sorra töréséhez a flexboxban egy kis feltörésre van szükség: adjon hozzá egy elemet, width: 100%ahol az oszlopokat egy új sorba szeretné tördelni. Általában ez több s-vel valósul meg .row, de nem minden megvalósítási módszer képes ezt figyelembe venni.

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

Ezt a szünetet bizonyos töréspontokon is alkalmazhatja a reszponzív megjelenítési segédprogramjainkkal .

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

Újrarendelés

Rendelési osztályok

Használjon .order-osztályokat a tartalom vizuális sorrendjének szabályozására . Ezek az osztályok reszponzívak, így beállíthatja a ordertöréspontot (pl. .order-1.order-md-2). Mind az öt rácsszinten támogatja az 1áthaladást .12

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

Vannak olyan reszponzív .order-firstés .order-lastosztályok is, amelyek megváltoztatják orderegy elem értékét a order: -1és order: 13( order: $columns + 1) alkalmazásával. Ezeket az osztályokat szükség szerint össze is lehet keverni a számozott .order-*osztályokkal.

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

Oszlopok eltolása

A rácsoszlopokat kétféleképpen tolhatja el: a reszponzív .offset-rácsosztályainkkal és a margin segédprogramjainkkal . A rácsosztályok mérete az oszlopokhoz igazodik, míg a margók hasznosabbak olyan gyors elrendezéseknél, ahol az eltolás szélessége változó.

Offset osztályok

Oszlopok mozgatása jobbra .offset-md-*osztályok használatával. Ezek az osztályok oszlopokkal növelik az oszlop bal margóját *. Például négy oszlop felett .offset-md-4mozog ..col-md-4

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

A reszponzív töréspontoknál az oszloptörlés mellett előfordulhat, hogy vissza kell állítania az eltolásokat. Tekintse meg ezt működés közben a rácspéldában .

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

Margin segédprogramok

A flexboxra való átállással a 4-es verzióban margó-segédprogramokat használhat, például .mr-autoa testvéroszlopok egymástól való távolítását.

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

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

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

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();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@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 {
  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>

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-widthlehetővé teszi a töréspont-specifikus szélességet, amelyek egyenletesen vannak elosztva padding-leftaz padding-rightoszlop ereszcsatornáihoz.

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