Keriti ya CSS

Tshepedišo ya keriti ya go se fetoge ya Bootstrap e emela sehlohlolong sa mengwaga ye e fetago ye lesome ya dithekniki tša peakanyo ya CSS, tšeo di lekilwego le go lekwa ke batho ba dimilione. Eupša, e ile ya hlolwa gape ntle le bontši bja dikarolo tša sebjalebjale tša CSS le dithekniki tšeo re di bonago ka go diphensele go swana le Gridi ye mpsha ya CSS.

Kamoo e šomago ka gona

Ka Bootstrap 5, re okeditše kgetho ya go kgontšha tshepedišo ya keriti ye e arogilego yeo e agilwego go CSS Grid, eupša ka go sotha ga Bootstrap. O sa hwetša diklase tšeo o ka di dirago dikgopelo ka go rata go aga dipeakanyo tše di arabelago, eupša ka mokgwa wo o fapanego ka fase ga hood.

• CSS Grid ke go kgetha go tsena. Thibela tshepedišo ya keriti ya maitirelo ka go beakanya $enable-grid-classes: falsele go kgontšha Keriti ya CSS ka go beakanya $enable-cssgrid: true. Ke moka, kgoboketša gape Sass ya gago.

• Efa ditiragalo tša .rowka .grid. Sehlopha .gridse beakanya display: gridle go hlama a grid-templateyeo o agago go yona ka HTML ya gago.

• Efa .col-*diklase legato ka .g-col-*diklase. Se ke ka lebaka la gore dikholomo tša rena tša CSS Grid di šomiša grid-columnthepa go e na le width.

• Dikholomo le bogolo bja gutter di bewa ka diphetogo tša CSS. Beakanya tše go motswadi .gridgomme o tlwaetše go sa šetšwe seo o se nyakago, ka gare ga mothaladi goba ka gare ga letlakala la setaele, ka --bs-columnsle --bs-gap.

Nakong e tlago, Bootstrap go na le kgonagalo ya gore e tla fetogela go tharollo ya motswako ka ge gapthepa e fihleletše thekgo ye e nyakilego go ba ye e tletšego ya sephephediši sa flexbox.

Diphapano tše bohlokwa

Ge go bapetšwa le tshepedišo ya keriti ya go se fetoge:

• Didirišwa tša Flex ga di ame dikholomo tša CSS Grid ka tsela ye e swanago.

• Dikgoba di tšeela diphaephe sebaka. Thepa gape tšea sebaka sa go rapalala paddinggo tšwa go tshepedišo ya rena ya keriti ya go se fetoge gomme e šoma go swana kudu le margin.

• Ka ge go le bjalo, go fapana le .rows, .grids ga e na mapheko a mabe gomme didirišwa tša ka thoko di ka se šomišwe go fetoša diphaephe tša keriti. Dikgoba tša keriti di dirišwa ka go rapalala le ka go otlologa ka go ikemela. Bona karolo ya go tlwaetša bakeng sa dintlha tše dingwe.

• Ditaele tša ka gare le tša tlwaelo di swanetše go lebelelwa bjalo ka dilo tšeo di tšeago legato la diklase tša sefetoši (mohlala, style="--bs-columns: 3;"vs class="row-cols-3").

• Go tsenya dihlaga go šoma ka mo go swanago, eupša go ka nyaka gore o seta gape dipalo tša gago tša dikholomo go mohlala o mongwe le o mongwe wa go tsenya sehlaga .grid. Bona karolo ya go bea dihlaga bakeng sa dintlha.

Mehlala

Dikholomo tše tharo

Dikholomo tše tharo tša bophara bjo bo lekanago go ralala le mafelo ka moka a go lebelela le didirišwa di ka hlolwa ka go šomiša .g-col-4diklase. Oketša diklase tše di arabelago go fetoša peakanyo ka bogolo bja lefelo la go lebelela.

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

Go arabela

Šomiša diklase tše di arabelago go beakanya peakanyo ya gago go ralala le dipono tša go lebelela. Mo re thoma ka dikholomo te pedi godimo ga dipono te di sesane kudu, gomme ka morago re gole go fihla go dikholomo te tharo go dipono ta magareng le godimo.

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

Bapetša seo le peakanyo ye ya dikholomo tše pedi go dipono ka moka.

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

Go phuthela

Diaetheme tša keriti di phuthela ka go iketla go ya mothalong wo o latelago ge go se na sebaka se sengwe ka go rapalala. Hlokomela gore e gapšoma go dikgoba tše di rapaletšego le tše di emego magareng ga dilo tša keriti.

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

E thoma

Diklase tša go thoma di ikemišeditše go tšea legato la diklase tša offset tša keriti ya rena ya go se fetoge, eupša ga di swane ka botlalo. CSS Grid e hlama thempleite ya keriti ka mekgwa yeo e botšago diphensele go “thoma kholomong ye” le “go felela kholomong ye.” Dithoto tšeo ke grid-column-startle grid-column-end. Diklase tša go thoma ke shorthand bakeng sa ya pele. Di kopanye le diklase ta dikholomo go ya ka bogolo le go logaganya dikholomo ta gago le ge go le bjalo o di hloka. Diklase tša go thoma di thoma ka 1bjalo ka ge 0e le boleng bjo bo sa šomego bja dithoto tše.

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

Dikholomo tša go itiriša

Ge go se na diklase go diaetheme ta keriti (bana ba kgauswi ba a .grid), aetheme ye nngwe le ye nngwe ya keriti e tla bewa bogolo ka go iketla go kholomo e tee.

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

Boitshwaro bjo bo ka hlakantšhwa le diklase tša kholomo ya keriti.

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

Go dira dihlaga

Go swana le tshepedišo ya rena ya keriti ya go se fetoge, Gridi ya rena ya CSS e dumelela go bea dihlaga gabonolo tša .grids. Le ge go le bjalo, go fapana le ya go se fetoge, keriti ye e tšea bohwa bja diphetogo ka go methalo, dikholomo, le diphapano. Ela hloko mohlala wo o lego ka mo tlase:

• Re tloša palo ya go se fetoge ya dikholomo ka phetogo ya CSS ya selegae: --bs-columns: 3.
• Ka go kholomo ya mathomo ya go itiriša, palo ya dikholomo e a abelwa gomme kholomo ye nngwe le ye nngwe ke tee-tharong ya bophara bjo bo lego gona.
• Ka go kholomo ya bobedi ya go itiriša, re beakantše gape palo ya kholomo go yeo e tsentšwego .gridgo 12 (ya rena ya go se fetoge).
• Kholomo ya boraro ya go itiriša ga e na diteng tše di tsentšwego ka gare ga sehlaga.

Ka go diragatša se se dumelela dipeakanyo tše di raraganego kudu le tša tlwaelo ge di bapetšwa le tshepedišo ya rena ya keriti ya go se fetoge.

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

Go dira gore e be ya gago

Tlwaetša palo ya dikholomo, palo ya methaladi, le bophara bja diphapano ka diphetogo tša CSS tša selegae.

Diphetogo tše tša CSS ga di na boleng bja go se fetoge; go e ​​na le moo, ba diriša dikelo tša go boela morago tšeo di šomišwago go fihlela go fiwa mohlala wa selegae. Go fa mohlala, re šomiša var(--bs-rows, 1)go mela ya rena ya CSS Grid, yeo e hlokomologago --bs-rowska gobane seo ga se sa bewa felo go fihla ga bjale. Ge e šetše e le bjalo, .gridmohlala o tla šomiša boleng bjoo go e na le boleng bja go wa morago bja 1.

Ga go na diklase tša keriti

Hang-hang bana elements ya .gridke keriti dintho, kahoo ba tla ba sized ntle le ka ho toba eketsa .g-colsehlopha.

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

Dikholomo le diphapano

Beakanya palo ya dikholomo le sekgoba.

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

Go oketša methaladi

Go oketša methaladi ye mengwe le go fetoša go bewa ga dikholomo:

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

Diphapano

Fetoša diphapano tše di emego thwii fela ka go fetoša row-gap. Hlokomela gore re šomiša gapgo .grids, eupša row-gapgomme column-gape ka fetošwa ge go nyakega.

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

Ka lebaka la seo, o ka ba le s e fapaneng paatsepama le rapameng gap, e leng ka nka boleng bo le 'ngoe (mahlakoreng tsohle) kapa para ya boleng (e emeng le e rapameng). Se se ka dirišwa ka setaele sa ka gare ga mothaladi sa gap, goba ka --bs-gapphetogo ya rena ya CSS.

<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

Moedi o tee wa Gridi ya CSS ke gore diklase tša rena tša go se fetoge di sa tšweletšwa ke diphetogo tše pedi tša Sass, $grid-columnsle $grid-gutter-width. Se se laola e sa le pele ka mo go atlegilego palo ya diklase tšeo di tšweleditšwego ka go CSS ya rena yeo e kgobokeditšwego. O na le dikgetho tše pedi mo:

• Fetoša diphetogo tšeo tša Sass tša go se fetoge gomme o kgoboketše gape CSS ya gago.
• Šomiša ditaele tša ka gare ga mothaladi goba tša tlwaelo go oketša diklase tše di filwego.

Go fa mohlala, o ka oketša palo ya dikholomo gomme wa fetoša bogolo bja sekgoba, gomme wa lekanyetša “dikholomo” tša gago ka motswako wa mekgwa ya ka gare ga mothaladi le diklase tša dikholomo tša CSS Grid tše di hlalošitšwego e sa le pele (mohlala, .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>