Անցեք հիմնական բովանդակությանը Բաց թողնել փաստաթղթերի նավարկություն
Check
in English

CSS ցանց

Իմացեք, թե ինչպես միացնել, օգտագործել և հարմարեցնել CSS Grid-ի վրա կառուցված մեր այլընտրանքային դասավորության համակարգը՝ օրինակներով և կոդի հատվածներով:

Bootstrap-ի լռելյայն ցանցային համակարգը ներկայացնում է CSS դասավորության ավելի քան մեկ տասնամյակի տեխնիկայի գագաթնակետը, որը փորձարկվել և փորձարկվել է միլիոնավոր մարդկանց կողմից: Այնուամենայնիվ, այն ստեղծվել է նաև առանց CSS-ի ժամանակակից բազմաթիվ առանձնահատկությունների և տեխնիկայի, որոնք մենք տեսնում ենք նոր CSS Grid-ի նման բրաուզերներում:

Ուշադրություն. մեր CSS Grid համակարգը փորձնական է և միանում է v5.1.0-ից: Մենք այն ներառել ենք մեր փաստաթղթերի CSS-ում՝ այն ձեզ ցուցադրելու համար, սակայն այն անջատված է լռելյայնորեն: Շարունակեք կարդալ՝ իմանալու համար, թե ինչպես դա միացնել ձեր նախագծերում:

Ինչպես է դա աշխատում

Bootstrap 5-ի միջոցով մենք ավելացրել ենք տարբերակ՝ միացնելու առանձին ցանցային համակարգը, որը կառուցված է CSS Grid-ի վրա, բայց Bootstrap շրջադարձով: Դուք դեռ ստանում եք դասեր, որոնց կարող եք դիմել քմահաճույքով՝ արձագանքող դասավորություններ ստեղծելու համար, բայց գլխարկի տակ այլ մոտեցմամբ:

  • CSS Grid-ը միացված է: Անջատեք լռելյայն ցանցային համակարգը՝ կարգավորելով $enable-grid-classes: falseև միացրեք CSS Ցանցը՝ կարգավորելով $enable-cssgrid: true: Այնուհետև նորից կազմեք ձեր Sass-ը:

  • .rowՓոխարինեք օրինակները .grid. .gridԴասարանը սահմանում display: gridև ստեղծում է այնպիսի դաս , grid-templateորը դուք կառուցում եք ձեր HTML-ով:

  • .col-*Դասերը փոխարինեք .g-col-*դասերով։ Դա պայմանավորված է նրանով, որ մեր CSS Grid սյունակներն օգտագործում են grid-columnհատկությունը width.

  • Սյունակները և ջրհորների չափերը սահմանվում են CSS փոփոխականների միջոցով: Սահմանեք դրանք ծնողի վրա .gridև հարմարեցրեք այնպես, ինչպես ցանկանում եք, ներդիրում կամ ոճաթերթում, --bs-columnsև --bs-gap.

Ապագայում Bootstrap-ը, ամենայն հավանականությամբ, կանցնի հիբրիդային լուծման, քանի որ gapգույքը ձեռք է բերել բրաուզերի գրեթե ամբողջական աջակցություն flexbox-ի համար:

Հիմնական տարբերություններ

Լռելյայն ցանցային համակարգի համեմատ.

  • Flex կոմունալ ծառայությունները նույն կերպ չեն ազդում CSS Grid սյունակների վրա:

  • Բացերը փոխարինում են ջրհեղեղները: Գույքը փոխարինում է մեր լռելյայն ցանցային համակարգի gapհորիզոնականը և գործում է ավելի նման :paddingmargin

  • Որպես այդպիսին, ի տարբերություն .rows-ի, .grids-ն չունեն բացասական լուսանցքներ, և մարժային կոմունալ ծառայությունները չեն կարող օգտագործվել ցանցի ջրհեղեղները փոխելու համար: Ցանցային բացերը լռելյայն կիրառվում են հորիզոնական և ուղղահայաց: Լրացուցիչ մանրամասների համար տե՛ս հարմարեցման բաժինը :

  • Ներքին և հատուկ ոճերը պետք է դիտարկվեն որպես փոփոխող դասերի փոխարինում (օրինակ՝ style="--bs-columns: 3;"ընդդեմ class="row-cols-3"):

  • Nesting-ն աշխատում է նույն կերպ, բայց կարող է պահանջել, որ դուք վերականգնեք ձեր սյունակների քանակը ներդիրի յուրաքանչյուր օրինակի վրա .grid: Մանրամասների համար տե՛ս բնադրման բաժինը :

Օրինակներ

Երեք սյունակ

Բոլոր տեսադաշտերում և սարքերում կարող են ստեղծվել երեք հավասար լայնությամբ սյունակներ՝ օգտագործելով .g-col-4դասերը: Ավելացրեք արձագանքող դասեր ՝ դասավորությունը ըստ տեսադաշտի չափի փոխելու համար:

.g-col-4
.g-col-4
.g-col-4
html
<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>

Պատասխանատու

Օգտագործեք արձագանքող դասեր՝ ձեր դասավորությունը կարգավորելու տեսադաշտերում: Այստեղ մենք սկսում ենք երկու սյունակով ամենանեղ տեսադաշտերի վրա, այնուհետև աճում ենք մինչև երեք սյունակ միջին տեսադաշտերում և ավելի բարձր:

.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
html
<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>

Համեմատեք դա այս երկու սյունակների դասավորության հետ բոլոր դիտակետերում:

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

Փաթաթում

Ցանցային տարրերն ավտոմատ կերպով անցնում են հաջորդ տողին, երբ հորիզոնական տեղ չկա: Նկատի ունեցեք, որ դա gapվերաբերում է ցանցի տարրերի միջև հորիզոնական և ուղղահայաց բացերին:

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html
<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>

Սկսվում է

Սկսնակ դասերը նպատակ ունեն փոխարինել մեր լռելյայն ցանցի օֆսեթ դասերը, բայց դրանք ամբողջովին նույնը չեն: CSS Grid-ը ստեղծում է ցանցի ձևանմուշ ոճերի միջոցով, որոնք բրաուզերներին ասում են «սկսել այս սյունակից» և «ավարտել այս սյունակում»: Այդ հատկություններն են grid-column-startև grid-column-end. Մեկնարկային դասերը առաջինի համար սղագրություն են: Զույգացրեք դրանք սյունակների դասերի հետ՝ չափելու համար և հավասարեցրեք ձեր սյունակները, ինչպես որ ձեզ անհրաժեշտ է: Սկսելու դասերը սկսվում են 1այս 0հատկությունների համար անվավեր արժեքից:

.g-col-3 .g-start-2
.g-col-4 .g-start-6
html
<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>

Ավտոմատ սյունակներ

Երբ ցանցի տարրերի վրա դասեր չկան (a-ի անմիջական զավակները .grid), ցանցի յուրաքանչյուր տարր ավտոմատ կերպով չափվելու է մեկ սյունակի:

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

Այս վարքագիծը կարող է խառնվել ցանցի սյունակների դասերի հետ:

.g-col-6
1
1
1
1
1
1
html
<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>

Բնադրում

Մեր լռելյայն ցանցային համակարգի նման, մեր CSS Grid-ը թույլ է տալիս հեշտ տեղավորել .grids-երը: Այնուամենայնիվ, ի տարբերություն լռելյայնի, այս ցանցը ժառանգում է տողերի, սյունակների և բացերի փոփոխությունները: Դիտարկենք ստորև բերված օրինակը.

  • Մենք շրջում ենք սյունակների լռելյայն թիվը՝ տեղական CSS փոփոխականով --bs-columns: 3.
  • Առաջին ավտոմատ սյունակում սյունակների քանակը ժառանգվում է, և յուրաքանչյուր սյունակ կազմում է հասանելի լայնության մեկ երրորդը:
  • Երկրորդ ավտոմատ սյունակում մենք վերակայել ենք սյունակների քանակը .grid12-ի (մեր լռելյայն):
  • Երրորդ ավտոմատ սյունակը զուրկ բովանդակություն չունի:

Գործնականում սա թույլ է տալիս ավելի բարդ և հարմարեցված դասավորություններ՝ համեմատած մեր լռելյայն ցանցային համակարգի հետ:

Առաջին ավտոմատ սյունակ
Ավտո-սյունակ
Ավտո-սյունակ
Երկրորդ ավտոմատ սյունակ
6-ը 12-ից
4-ը 12-ից
2-ը 12-ից
Երրորդ ավտոմատ սյունակ
html
<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>

Անհատականացում

Անհատականացրեք սյունակների քանակը, տողերի քանակը և բացերի լայնությունը տեղական CSS փոփոխականներով:

Փոփոխական Հետադարձ արժեք Նկարագրություն
--bs-rows 1 Ձեր ցանցի ձևանմուշի տողերի քանակը
--bs-columns 12 Ձեր ցանցի ձևանմուշի սյունակների քանակը
--bs-gap 1.5rem Սյունակների միջև բացվածքի չափը (ուղղահայաց և հորիզոնական)

Այս CSS փոփոխականները չունեն լռելյայն արժեք. փոխարենը, նրանք կիրառում են հետադարձ արժեքներ, որոնք օգտագործվում են մինչև տեղական օրինակի տրամադրումը: Օրինակ, մենք օգտագործում var(--bs-rows, 1)ենք մ��ր CSS Grid տողերը, որոնք անտեսում --bs-rowsեն, քանի որ դա դեռ ոչ մի տեղ չի դրվել: Երբ այն լինի, .gridօրինակը կօգտագործի այդ արժեքը՝ ի հետադարձ արժեքի փոխարեն 1:

Ցանցային դասեր չկան

Անմիջական երեխաների տարրերը .gridցանցային տարրեր են, ուստի դրանք չափագրվելու են՝ առանց հստակ .g-colդաս ավելացնելու:

Ավտո-սյունակ
Ավտո-սյունակ
Ավտո-սյունակ
html
<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

Սյունակներ և բացեր

Կարգավորեք սյունակների քանակը և բացը:

.g-col-2
.g-col-2
html
<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>
.g-col-6
.g-col-4
html
<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>

Տողերի ավելացում

Ավելի շատ տողերի ավելացում և սյունակների տեղադրության փոփոխություն.

Ավտո-սյունակ
Ավտո-սյունակ
Ավտո-սյունակ
html
<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>

Բացեր

Փոխեք ուղղահայաց բացերը միայն փոփոխելով row-gap. Նկատի ունեցեք, որ մենք օգտագործում gapենք .grids-ի վրա, բայց row-gapև column-gapկարող ենք փոփոխվել ըստ անհրաժեշտության:

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html
<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>

Դրա պատճառով դուք կարող եք ունենալ տարբեր ուղղահայաց և հորիզոնական gaps, որոնք կարող են վերցնել մեկ արժեք (բոլոր կողմերը) կամ զույգ արժեքներ (ուղղահայաց և հորիզոնական): Սա կարող է կիրառվել ներկառուցված ոճով gapկամ մեր --bs-gapCSS փոփոխականով:

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html
<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>

Սաս

CSS Grid-ի սահմանափակումներից մեկն այն է, որ մեր լռելյայն դասերը դեռ ստեղծվում են երկու Sass փոփոխականներով, $grid-columnsև $grid-gutter-width. Սա արդյունավետորեն կանխորոշում է մեր կազմված CSS-ում ստեղծված դասերի քանակը: Այստեղ դուք ունեք երկու տարբերակ.

  • Փոփոխեք այդ լռելյայն Sass փոփոխականները և նորից կազմեք ձեր CSS-ը:
  • Օգտագործեք ներկառուցված կամ հատուկ ոճեր՝ տրամադրված դասերը մեծացնելու համար:

Օրինակ, դուք կարող եք մեծացնել սյունակների քանակը և փոխել բացերի չափը, այնուհետև չափել ձեր «սյունակները» ներկառուցված ոճերի և նախապես սահմանված CSS Grid սյունակների դասերի խառնուրդով (օրինակ՝ .g-col-4):

14 սյունակ
.g-col-4
html
<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>