Bootstrap Grid за 15 хвилин

6 хв. читання

Bootstrap є найбільш поширеним frontend framework-ом на даний момент. Коли справа доходить до побудови адаптивних веб-сайтів і додатків, це перший вибір як професіоналів, так і любителів тому що з ним легко працювати. Той хто знає HTML, CSS і трохи JavaScript може познайомитися з Bootstrap дуже швидко.

У цьому уроці ми збираємося відкрити занавіску базових концептів Bootstap сітки. Це допоможе нам створювати адаптивні макети сторінок, які можуть змінюватися і адаптуватися в залежності від розміру екрану пристрою користувача.


1. Рядки і стовпці

Сітка складається з рядків і стовпців. Це дозволяє вільно розташувати елементи по вертикалі і по горизонталі.

Рядки є блочними елементами. Це означає, що коли ми створюємо рядок, то він займає всю довжину елемента в якому він знаходиться. Ви можете уявляти собі їх як лінії в вашому макеті.

Горизонтальне вирівнювання в сітці здійснюється за допомогою колонок. Тільки стовпці можуть бути прямими дочірніми елементами рядка і весь їх зміст повинен бути розміщений всередині. Розміщення контенту безпосередньо в рядку, буде ламати макет.

Ось один з прикладів:


<div class="row">
    Some content
</div>


<div class="row">
    <div class="col-md-12">Content Goes Here</div>
</div>

Примітка: Рядки і стовпці мають особливі відносини. Колонки мають відступи по 15рх вліво та вправо, тому вони розміщені рівномірно. Проте, це штовхає зміст першого і останнього рядка на 15рх від батьківського елемента. Для компенсації цього, рядок має від'ємний відступ в ліво і право на 15рх. Саме тому ви завжди повинні розташовувати стовпці в рядках.


2. Поділ рядків стовпці

Рядки розділені горизонтально на 12 рівних частин. Коли ми поміщаємо колонку всередині рядка, ми повинні вказати скільки місця він повинен зайняти.

Це робиться шляхом додаванням певного класу .col-MD-номер, де номер може бути цілим числом від 1 до 12. Залежно від числа, стовпець займатиме відсоток від повної ширини рядка: 6 становитиме 50% (12 / 6), 3 буде 25% (12/3) і так далі. Наступний приклад повинен прояснити ситуацію.

<div class="row">
    <div class="col-md-12">Full width</div>
</div>
<div class="row">
    <div class="col-md-3">25%</div>
    <div class="col-md-3">25%</div>
    <div class="col-md-6">50%</div>
</div>

3. Перенос колонки

Ми завжди повинні брати до уваги, що є тільки 12 вільних місць в лінії. Якщо сума рядків перевищуватиме 12, то колонка перейде то наступного рядка.

Давайте поглянемо на практичний приклад.

<div class="row">
    <div class="col-xs-8"></div>
    <div class="col-xs-4"></div>
    <div class="col-xs-9">Ця колонка переміститься до наступного рядка.</div>
</div>

4. Класи розміру екрана

Пам'ятаєте ми говорили про клас .col-md-ЧИСЛО. Префікс -md означає середній розмір екрану. Bootstrap має декілька класів для різних екранів.

  • xs- дуже маленький екран, як у смартфонів. При використанні пишеться так: .col-xs-ЧИСЛО

  • sm- маленький, як у планшетах .col-sm-ЧИСЛО

  • md- середній екран, як у невеликих моніторах чи ноутбуках .col-md-ЧИСЛО

  • lg- великий, як у великих екранах .col-lg-ЧИСЛО

Bootstrap визначає екрана і точок на дюйм при визначенні того, який з класів активний (детальніше). Це гарний спосіб для контролю відображення макетів на різних пристроях.

Коли ми визначаємо правило для будь-якого розміру пристрою, воно буде успадковуватися і застосовуватися до всіх більших розмірів, якщо ми не перезапишемо його шляхом подачі нового.


5. Clearfix

У деяких випадках, коли стовпчик має набагато більше змісту і більшої висоти ніж попередні, макет зламається. Стовпчики будуть накопичуватися один під одним, замість того, щоб рухатися до наступного рядка, як вони повинні. Щоб запобігти цьому, ми додаємо допоміжний елемент div з клас clearfix. Це змусить всі стовпці перейти на новий рядок.

<div class="row">
    <div class="col-xs-6 tall-column">A column much taller than the rest.</div>
    <div class="col-xs-6"></div>
    <div class="clearfix"></div>
    <div class="col-xs-6"></div>
</div>

Ви можете використовувати класи утиліти щоб контролювати, коли властивість clearfix активна.


6. Зміщення Ваш друг

За умовчуванням, стовпці злипаються один з одним, не залишаючи простору, мають властивість float: left. Будь-яке вільне місце, що залишається в рядку, буде переміщене на праву сторону.

Для створення полів в лівій частині колон ми можемо використовувати offset класи. Застосування .col-MD-offset-2 на будь-який стовпець, буде рухати його вправо, неначе є невидимий .col-md-2 стовпець там. Ви можете мати різні відступи для різних розмірів екрану завдяки xs, sm, md і lg префіксам.

<div class="row">
    <div class="col-md-6 col-md-offset-3"></div>
    <div class="col-md-10 col-md-offset-1"></div>
</div>

7. До себе, від себе (push and pull)

Push та Pull класи дозволяють змінювати порядок стовпців в залежності від розміру екрана. Push переміщує колонку вправо, а pull вліво. Вони відрізняються від відступу, тим що використовують властивість position: relative; і не зрушують інші стовпці.

Push і Pull класи підтримують формат .col-РОЗМІР-push-НОМЕР і .col-РОЗМІР-pull-НОМЕР. Можливими значеннями розміру є: sm, xs, md та lg. Таким чином ми повідoмляємо, на якому із 4 розмірів екрана, повинна відбутись заміна сторони. НОМЕР вказує Bootstrap на скільки позицій ми хочемо посунути стовпець.


Чудова робота! Тепер ви ознайомлені з найважливішою частиною сітки Bootstrap і ви готові побудувати свій адаптивний сайт. Але все ж таки, вам залишилося дечому навчитися, для того щоб досягти справжньої майстерності. Перегляньте документацію Bootstrap для того, щоб закінчити вивчення.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація