CSS торы

Мысалдар мен код үзінділері арқылы CSS торында құрылған балама орналасу жүйесін қосу, пайдалану және теңшеу жолын үйреніңіз.

Бұл бетте

Bootstrap әдепкі тор жүйесі миллиондаған адамдар сынаған және сынаған онжылдық CSS орналасу әдістерінің шарықтау шегін білдіреді. Бірақ ол сонымен қатар жаңа CSS Grid сияқты браузерлерде көретін көптеген заманауи CSS мүмкіндіктері мен әдістерінсіз жасалған.

Назар аударыңыз, біздің CSS Grid жүйеміз эксперименталды және v5.1.0 нұсқасы бойынша қосылуға болады! Біз оны сізге көрсету үшін құжаттамамыздың CSS ішіне қостық, бірақ ол әдепкі бойынша өшірілген. Оны жобаларыңызда қосу жолын білу үшін оқуды жалғастырыңыз.

Бұл қалай жұмыс істейді

Bootstrap 5 көмегімен біз CSS торында құрылған, бірақ Bootstrap бұралуы бар бөлек тор жүйесін қосу опциясын қостық. Сіз әлі де жауап беретін макеттерді құру үшін қалауыңыз бойынша қолдануға болатын сабақтар аласыз, бірақ басқа тәсілмен.

CSS Grid қосылды. Әдепкі тор жүйесін орнату арқылы өшіріңіз $enable-grid-classes: falseжәне CSS торын орнату арқылы қосыңыз $enable-cssgrid: true. Содан кейін Sass-ты қайта құрастырыңыз.
даналарын .rowауыстырыңыз .grid. Класс HTML көмегімен құрастырылатын .gridсыныпты орнатады display: gridжәне жасайды .grid-template
.col-*Сыныптарды сыныптармен ауыстырыңыз .g-col-*. Себебі, біздің CSS Grid бағандары grid-columnорнына сипатты пайдаланады width.
Бағандар мен саңылаулардың өлшемдері CSS айнымалылары арқылы орнатылады. Оларды ата-анаға орнатыңыз .gridжәне қалауыңызша, кірістірілген немесе мәнерлер кестесінде және арқылы --bs-columnsтеңшеңіз --bs-gap.

Болашақта Bootstrap гибридті шешімге ауысуы мүмкін, себебі gapмүлік flexbox үшін толық дерлік браузер қолдауына қол жеткізді.

Негізгі айырмашылықтар

Әдепкі тор жүйесімен салыстырғанда:

Flex утилиталары CSS Grid бағандарына бірдей әсер етпейді.
Саңылаулар шұңқырларды ауыстырады. Бұл сипат әдепкі тор жүйеміздегі gapкөлденеңді ауыстырады және сияқты функцияларды орындайды .paddingmargin
Осылайша, s-ден айырмашылығы .row, .grids-де теріс жиектер жоқ және маржа утилиталарын тор ағындарын өзгерту үшін пайдалану мүмкін емес. Тор аралықтары әдепкі бойынша көлденең және тігінен қолданылады. Қосымша мәліметтер алу үшін теңшеу бөлімін қараңыз.
Кірістірілген және теңшелетін мәнерлер модификатор сыныптарын ауыстыру ретінде қарастырылуы керек (мысалы, style="--bs-columns: 3;"қарсы class="row-cols-3").
Кірістеуі ұқсас жұмыс істейді, бірақ кірістірілген дананың әрбір данасында баған сандарын қалпына келтіруді талап етуі мүмкін .grid. Мәліметтер үшін ұя салу бөлімін қараңыз.

Мысалдар

Үш баған

Барлық көру порттары мен құрылғыларда үш бірдей ені бар бағандарды .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

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

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

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-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әрбір тор элементі автоматты түрде бір бағанға өлшемді болады.

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

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 торымыз .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

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. Есіңізде болсын, біз s қолданамыз gap, .gridбірақ row-gapжәне column-gapқажет болған жағдайда өзгертуге болады.

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

Осыған байланысты сізде gapбір мәнді (барлық жақтарын) немесе жұп мәндерді (тік және көлденең) қабылдай алатын әртүрлі тік және көлденең s болуы мүмкін. Бұл үшін кірістірілген мәнермен gapнемесе біздің --bs-gapCSS айнымалысымен қолдануға болады.

.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 торының бір шектеуі біздің әдепкі сыныптарымыз әлі де екі 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>