TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як користуватися макетами сітки Bootstrap 5?

113

Bootstrap 5 пропонує потужну систему компонування сітки, яка допомагає легко створювати зручні для мобільних пристроїв макети. У системі розкладки сітки Bootstrap існує шість адаптивних точок зупинки для різних розмірів пристроїв. У кожному є 12 стовпців, і, змішуючи та узгоджуючи, ви можете створювати різні макети за вашим бажанням. Система сіток заснована на гнучкому боксі і повністю реагує.

Підручник із макета Bootstrap 5

Цей підручник містить такі теми:

  1. Основи компонування сітки
  2. Сіткова система рівня 5
  3. Проста сітка рівної ширини
  4. Одна ширина стовпця та зміна розміру інших стовпців
  5. Змінна зміст ширини
  6. Сітка з кількох рядків рівної ширини
  7. Горизонтальна сітка з укладанням
  8. Вертикальне вирівнювання
  9. Горизонтальне вирівнювання
  10. Сітка без жолобів
  11. Обгорнута сітка стовпців
  12. Перевпорядкування вмісту стовпця в сітці
  13. Зсув стовпця
  14. Вкладеність у Grid

1 Основи системи сітки Bootstrap

Система сітки використовує три основні класи CSS для створення необхідного макета – .container, .row та .col. Контейнер охоплює повний макет, а потім рядки, а потім стовпці.

  • Використовуйте клас .container для центрування вмісту з фіксованою шириною та .container-fluid для чуйного розміщення на всю ширину.
  • Ви можете використовувати клас .row, щоб включити всі горизонтальні стовпці, розділені на 12 рівних ширини.
  • Розмістіть фактичний вміст у стовпцях за допомогою класів .col або .col-*. Наприклад, рядок може містити два стовпці типу .col-8 + .col-4. Стовпець повинен бути безпосереднім дочірнім елементом класу рядків.
  • У всіх стовпцях використовується flexbox, що означає просте використання .col класу розділить рядок на стовпці однакової ширини. Наприклад, якщо ви використовуєте два класи .col у рядку, він автоматично розподіляється на дві області 50%.
  • Ви можете чітко визначити ширину стовпця, наприклад .col-sm-8, яка займе 3/4 (75%) ширини рядка.
  • За замовчуванням стовпці та рядки мають відступи та поля для кращої видимості. Ви можете видалити поле та заповнення, додавши додатковий клас “.noglutter" із “.row”.
  • Bootstrap 5 пропонує шість точок зупинки – надзвичайно малі (xs), маленькі (sm), середні (md), великі (lg), надвеликі (xl) та надвеликі (xxl).
  • Усі рівні контрольних точок за замовчуванням використовують клас .col. Будь -які інші класи будуть застосовуватися до всіх пристроїв вищого рівня. Наприклад, .col-sm-4 (малий) буде застосовано до невеликих, середніх, великих та надвеликих пристроїв.

Сітка 2 -го рівня

Нижче в таблиці показано шість рівнів контрольних точок, запропонованих у Bootstrap 5:

Сітка Дуже малий Маленький Середній Великий Дуже великий Екстра надзвичайно великий
Точка зупинки <576 пікс ≥576px ≥768px ≥992px ≥1200px ≥1400px
Клас CSS .з- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Максимальна ширина контейнера Немає (авто) 540 пікс 720 пікселів 960 пікс 1140 пікс 1320 пікс
  • Стовпці – кожен рядок розділений на 12 стовпців однакової ширини.
  • Ширина жолоба – 15 пікселів з кожної сторони стовпця загальною кількістю 30 пікселів.
  • Вкладеність – так, стовпці можна вкладати в інший стовпець.
  • Впорядкування стовпців – Так, вміст у будь -якому стовпці рядка можна впорядкувати.

Давайте покажемо різні приклади, щоб краще зрозуміти сітки:

3 Проста сітка рівної ширини

Створіть просту сітку з рівними стовпцями лише за допомогою класів “.col”. При використанні класів ".col" рядок буде автоматично розділений на стовпці однакової ширини. Наприклад, при використанні двох класів ".col" рядок буде розділений на два стовпці 1/2/1/2. Нижче наведено приклад кодів для створення 1/2+1/2 та 1/3+1/3+1/3 за допомогою простих класів ".col".

<div class="container"> <div class="row"> <div class="col"> .col </div> <div class="col"> .col </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col"> .col </div> <div class="col"> .col </div> </div> </div>

Рівні стовпці відображатимуться у браузері, як показано нижче:

Як користуватися макетами сітки Bootstrap 5?

4 Ширина однієї колонки та зміна розміру інших стовпців

Система сітки Bootstrap дозволяє визначити ширину для одного стовпця, а решта стовпців у цьому ж рядку буде автоматично скориговано. Наприклад, коли ви визначаєте “col + col-6 + col” у рядку, він буде автоматично розділений як стовпці “1/3 + 1/6 + 1/3”. Нижче наведено два приклади визначення одного стовпця, а потім інші два стовпці будуть відповідно скориговані.

Як користуватися макетами сітки Bootstrap 5?

Нижче наведено код для налаштування стовпців, що оточують стовпчик із визначеною шириною:

<div class="container"> <div class="row"> <div class="col"> .col </div> <div class="col-6"> .col-6 </div> <div class="col"> .col </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-5"> .col-5 </div> <div class="col"> .col </div> </div> </div>

5 Змінна зміст ширини

Ширину стовпців можна обмежити фактичним вмістом за допомогою класу “.col- {breakpoint} -auto”, наприклад, “.col-md-auto”.

Як користуватися макетами сітки Bootstrap 5?

Середні стовпці у наведеному вище прикладі автоматично регулюються до ширини вмісту. Нижче наведено код вищезазначеної схеми сітки:

<div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2"> .col .col-lg-2 </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> </div>

Сітка з кількох рядків рівної ширини

Просто створіть декілька макетів стовпців у рядку, постійно використовуючи класи “.col”. Вам просто потрібно вставити клас ".w-100", де потрібна точка зупинки.

Як користуватися макетами сітки Bootstrap 5?

Нижче наведено код для створення декількох рядків однакової ширини за допомогою одного класу "рядок".

<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 class="w-100"></div> <div class="col">.col</div> <div class="col">.col</div> </div>

7 Горизонтальна сітка з накладанням

Ви можете створити макет сітки з нагромадженням, використовуючи класи “.col-sm-“, які будуть розгорнуті до горизонтальної сітки на робочому столі.

Як користуватися макетами сітки Bootstrap 5?

Нижче наведено код для створення горизонтальної розкладки сітки, як показано вище.

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

8 Вертикальне вирівнювання

Вертикальне вирівнювання вмісту всередині стовпця можна відрегулювати, додавши один із наступних трьох класів із класом “.row”, як показано нижче:

<div class="row align-items-start"> - Align content vertical top <div class="row align-items-center"> - Align content vertical middle <div class="row align-items-end"> - Align content vertical bottom

9 Горизонтальне вирівнювання

Подібно до вертикального вирівнювання, ви також можете налаштувати горизонтальне вирівнювання стовпців, як показано нижче:

<div class="container"> <div class="row justify-content-start"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-center"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-end"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-around"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-between"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> </div>

Це дасть наступний результат у браузері:

Як користуватися макетами сітки Bootstrap 5?

10 Сітка без жолобів

За замовчуванням стовпці матимуть горизонтальні відступи, а рядки матимуть негативні горизонтальні поля для кращого вирівнювання. Ви можете видалити ці поля та відступи, використовуючи клас «без жолобів» з «рядком», як показано нижче.

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

Це дасть такий результат:

Як користуватися макетами сітки Bootstrap 5?

11 Обгорнута сітка стовпців

Якщо у вас більше 12 стовпців поспіль, ці стовпці автоматично переносяться до наступного рядка. Наприклад, з наведеним нижче перші два стовпці помістяться в перший рядок (9+2 = 11), тоді як третій і четвертий стовпці будуть перенесені в новий рядок.

<div class="row"> <div class="col-9">.col-9 (Row 1)</div> <div class="col-2">.col-2 (Row 1)</div> <div class="col-4">.col-4 (Row 1)</div> <div class="col-5">.col-5 (Row 1)</div> </div>

Обгорнуті стовпці будуть виглядати так:

Як користуватися макетами сітки Bootstrap 5?

12 Перевпорядкування вмісту стовпців у сітці

Bootstrap дозволяє впорядковувати вміст стовпця незалежно від позиції в рядку. Наприклад, у наведеному нижче макеті сітки використовуються три стовпці.

<div class="container"> <div class="row"> <div class="col"> First .col No order </div> <div class="col order-12"> Second .col .order-12 moved to last </div> <div class="col order-1"> Third .col .order-1 moved to first </div> </div> </div>

Результат виглядає так, як показано нижче, без впорядкованого стовпця, він матиме пріоритет над усіма іншими упорядкованими стовпцями і показаний у першому стовпці. Вміст у стовпці, що використовує клас “order-12”, буде переміщено на останню позицію. І вміст у стовпці, що використовує “order-1”, буде переміщено до центральної (першої) позиції.

Як користуватися макетами сітки Bootstrap 5?

13 Зсув стовпця

З Bootstrap 4 вони припинили функцію зсуву стовпців через використання макета сітки flexbox. Але ви все ще можете перемістити стовпці за допомогою класів корисних полів, таких як “ml-auto”, “mr-auto” тощо.

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

Нижче наведено результат зміщення стовпців за допомогою класів маржі:

Як користуватися макетами сітки Bootstrap 5?

14 Вкладеність у Grid

Ви також можете вкласти стовпці в інші стовпці, як показано нижче:

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

Це дасть такий результат:

Як користуватися макетами сітки Bootstrap 5?

Висновок

Як ви бачите, існує багато макетів за замовчуванням, які можна створити за допомогою системи макетів сітки Bootstrap 5. Також можна створити власний CSS для створення настроюваних макетів або зміни одного з типових макетів. Суцільна схема сітки flexbox та багаторазові компоненти роблять Bootstrap 5 більш міцним, ніж попередня версія.


Вивчити Bootstrap 5 (індекс )


Джерело запису: www.webnots.com

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі