CSS režģis

Bootstrap noklusējuma režģa sistēma ir kulminācija vairāk nekā desmit gadus ilgām CSS izkārtojuma metodēm, kuras ir izmēģinājuši un pārbaudījuši miljoniem cilvēku. Taču tas tika izveidots arī bez daudzām mūsdienu CSS funkcijām un paņēmieniem, ko mēs redzam pārlūkprogrammās, piemēram, jaunajā CSS Grid.

Kā tas strādā

Izmantojot Bootstrap 5, esam pievienojuši iespēju iespējot atsevišķu režģa sistēmu, kas ir balstīta uz CSS Grid, bet ar Bootstrap pagriezienu. Jūs joprojām saņemat nodarbības, kuras varat pieteikties, lai izveidotu adaptīvus izkārtojumus, taču ar atšķirīgu pieeju zem pārsega.

• CSS Grid ir izvēles iespēja. Atspējojiet noklusējuma režģa sistēmu, iestatot $enable-grid-classes: falseun iespējojiet CSS režģi, iestatot $enable-cssgrid: true. Pēc tam atkārtoti kompilējiet savu Sass.

• Aizstāt gadījumus .rowar .grid. Klase .gridiestata display: gridun izveido to, uz grid-templatekuru jūs balstaties, izmantojot savu HTML.

• Nomainiet .col-*nodarbības ar .g-col-*klasēm. Tas ir tāpēc, ka mūsu CSS Grid kolonnās tiek izmantots grid-columnrekvizīts, nevis width.

• Kolonnu un noteku izmēri tiek iestatīti, izmantojot CSS mainīgos. Iestatiet tos vecākprogrammā .gridun pielāgojiet, kā vien vēlaties, iekļauti vai stila lapā, izmantojot --bs-columnsun --bs-gap.

Nākotnē Bootstrap, visticamāk, pāries uz hibrīda risinājumu, jo gapīpašums ir sasniedzis gandrīz pilnu pārlūkprogrammas atbalstu flexbox.

Galvenās atšķirības

Salīdzinot ar noklusējuma režģa sistēmu:

• Flex utilītas CSS Grid kolonnas neietekmē tādā pašā veidā.

• Spraugas aizstāj notekcaurules. Īpašums gapaizstāj horizontālo paddingno mūsu noklusējuma režģa sistēmas un darbojas vairāk kā margin.

• Atšķirībā no .rows, .grids nav negatīvas piemales, un starpības utilītas nevar izmantot, lai mainītu režģa notekas. Režģa spraugas pēc noklusējuma tiek pielietotas horizontāli un vertikāli. Plašāku informāciju skatiet pielāgošanas sadaļā .

• Iekļautie un pielāgotie stili ir jāuzskata par modifikatoru klašu aizstājējiem (piemēram, style="--bs-columns: 3;"vs class="row-cols-3").

• Ligzdošana darbojas līdzīgi, taču var būt nepieciešams atiestatīt kolonnu skaitu katrā ligzdotā gadījuma gadījumā .grid. Plašāku informāciju skatiet ligzdošanas sadaļā .

Piemēri

Trīs kolonnas

.g-col-4Izmantojot klases , var izveidot trīs vienāda platuma kolonnas visos skata portos un ierīcēs . Pievienojiet adaptīvās klases , lai mainītu izkārtojumu pēc skata loga lieluma.

<div class="grid text-center">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

Atsaucīgs

Izmantojiet adaptīvās klases, lai pielāgotu izkārtojumu skatvietās. Šeit mēs sākam ar divām kolonnām šaurākajos skata portos un pēc tam izaugam līdz trim kolonnām vidējos skatu laukos un augstāk.

<div class="grid text-center">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

Salīdziniet to ar šo divu kolonnu izkārtojumu visos skata portos.

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Ietīšana

Režģa vienumi automātiski pāriet uz nākamo rindu, kad horizontāli vairs nav vietas. Ņemiet vērā, ka tas gapattiecas uz horizontālām un vertikālām atstarpēm starp režģa elementiem.

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Sākas

Sākuma klases mērķis ir aizstāt mūsu noklusējuma režģa nobīdes klases, taču tās nav pilnīgi vienādas. CSS Grid izveido režģa veidni, izmantojot stilus, kas liek pārlūkprogrammām “sākt ar šo kolonnu” un “beigt ar šo kolonnu”. Šīs īpašības ir grid-column-startun grid-column-end. Starta klases ir saīsinājums pirmajam. Savienojiet tos pārī ar kolonnu klasēm pēc izmēra un līdziniet kolonnas atbilstoši jums. Sākuma klases sākas ar 1šo 0īpašumu nederīgu vērtību.

<div class="grid text-center">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

Automātiskās kolonnas

Ja režģa elementos nav klašu (tiešie atvasinājumi .grid), katrs režģa vienums tiks automātiski izmērīts vienā kolonnā.

<div class="grid text-center">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Šo darbību var sajaukt ar režģa kolonnu klasēm.

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Ligzdošana

Līdzīgi kā mūsu noklusējuma režģa sistēma, mūsu CSS režģis ļauj viegli ievietot .grids. Tomēr atšķirībā no noklusējuma šis režģis pārmanto izmaiņas rindās, kolonnās un atstarpēs. Apsveriet tālāk sniegto piemēru:

• Mēs ignorējam noklusējuma kolonnu skaitu ar vietējo CSS mainīgo: --bs-columns: 3.
• Pirmajā automātiskajā kolonnā kolonnu skaits tiek mantots, un katra kolonna ir viena trešdaļa no pieejamā platuma.
• Otrajā automātiskajā kolonnā esam atiestatījuši ligzdoto kolonnu skaitu uz .grid12 (mūsu noklusējuma vērtība).
• Trešajā automātiskajā kolonnā nav ligzdota satura.

Praksē tas ļauj izmantot sarežģītākus un pielāgotus izkārtojumus, salīdzinot ar mūsu noklusējuma režģa sistēmu.

<div class="grid text-center" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

Pielāgošana

Pielāgojiet kolonnu skaitu, rindu skaitu un atstarpju platumu, izmantojot vietējos CSS mainīgos.

Šiem CSS mainīgajiem nav noklusējuma vērtības; tā vietā tiek lietotas atkāpšanās vērtības, kas tiek izmantotas, līdz tiek nodrošināta vietējā instance. Piemēram, mēs izmantojam var(--bs-rows, 1)CSS Grid rindas, kas tiek ignorētas, --bs-rowsjo tas vēl nav nekur iestatīts. Kad tā būs, .gridinstance izmantos šo vērtību, nevis atkāpšanās vērtību 1.

Nav režģa klašu

Tūlītējie pakārtotie elementi .gridir režģa vienumi, tāpēc to izmēri tiks noteikti, nepārprotami nepievienojot .g-colklasi.

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

Kolonnas un spraugas

Pielāgojiet kolonnu skaitu un atstarpi.

<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>

<div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

Rindu pievienošana

Vairāk rindu pievienošana un kolonnu izvietojuma maiņa:

<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

Nepilnības

Mainiet vertikālās spraugas, tikai pārveidojot row-gap. Ņemiet vērā, ka mēs izmantojam gapuz .grids, bet row-gapun column-gapto var mainīt pēc vajadzības.

<div class="grid text-center" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Tāpēc jums var būt dažādas vertikālās un horizontālās gapvērtības, kurām var būt viena vērtība (no visām pusēm) vai vērtību pāris (vertikāli un horizontāli). To var lietot ar iekļauto stilu gapvai mūsu --bs-gapCSS mainīgo.

<div class="grid text-center" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Sass

Viens no CSS režģa ierobežojumiem ir tāds, ka mūsu noklusējuma klases joprojām ģenerē divi Sass mainīgie $grid-columnsun $grid-gutter-width. Tas efektīvi nosaka mūsu apkopotajā CSS ģenerēto klašu skaitu. Šeit jums ir divas iespējas:

• Modificējiet šos noklusējuma Sass mainīgos un atkārtoti kompilējiet savu CSS.
• Izmantojiet iekļautos vai pielāgotos stilus, lai papildinātu piedāvātās nodarbības.

Piemēram, varat palielināt kolonnu skaitu un mainīt atstarpes lielumu, un pēc tam mainīt “kolonnu” izmērus, izmantojot iekļauto stilu un iepriekš definētu CSS režģa kolonnu klases (piemēram, .g-col-4).

<div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>