Біокаміни

Блокова система · Bootstrap російською. Що таке сітка бутстрап? Розрахунок ширини блоків

Використовуйте нашу потужну мобільну сітку flexbox для створення макетів усіх форм та розмірів. Використовується система «12 колонок», 5-ти адаптивних ярусів, препроцесорів Sass та встановлених класів.

Як це влаштовано

Система сіток Bootstrap 4 використовує контейнери, ряди та колонки, щоб зручно розташовувати вміст. Бутстрап реалізований за допомогою флексбоксу та повністю адаптивний. Нижче наведено приклад та глибокий погляд на об'єднання сітки.

Якщо ви не знайомі з flexbox, то ознайомтеся з посібником з флексбоксу CSS Tricks щоб отримати довідкову інформацію, терміни, рекомендації та фрагменти коду.

Одна з трьох колонок

У цьому прикладі за допомогою наших встановлених класів сіток були створені 3 колонки рівної ширини для невеликих, середніх і великих аксесуарів. Ці колонки вирівняні за допомогою батьківського класу.

Ось невелике пояснення роботи Bootstrap 4:

Параметри сіток

Бутстрап використовує em та rem для завдання більшості розмірів, а пікселі px – для «брейкпойнтів» сітки та ширин контейнерів. Це відбувається тому, що ширина зони видимості на кожному пристрої вимірюється в пікселях і не змінюється розміром шрифту .

Подивимося, як діють деякі аспекти системи сіток Bootstrap на різних ручних пристроях.

		Small ≥576px	≥768px	Large ≥992px	≥1200px
Максимальна ширина контейнера	None (auto)	540px	720px	960px	1140px
Префікс класу	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
Число колонок	12
Ширина відступу	30px (15px з кожного боку стовпця)
Може бути вкладеним	Так
Упорядкування колонок	Так

Автоматичне розташування за допомогою колонок

Використовуйте класи колонок зі спеціальними контрольними точками (наприклад, .col-sm-6) для легкого розташування колонок без використання явно означених номерів класів.

Рівна ширина

Наприклад, тут ми бачимо дві сітки, які підійдуть до будь-якого пристрою та зони видимості, від xs до xl. Додайте будь-яку кількість простих класів для кожного брейкпойнта, і кожна колонка буде однаковою шириною.

1 із 2

2 з 2

1 із 3

2 з 3

3 з 3

Стовпці однакової ширини можуть бути розбиті на кілька рядків, але була помилка флексбоксу Safari, яка заважала цьому працювати без явної основи flex-basis або border. Існують обхідні шляхи для більш старих версій браузера, але вони не повинні бути необхідними, якщо ви оновлені.

Колонка

Встановлення ширини однієї колонки

Авто-розташування колонок у сітці флексбоксу також дає можливість встановити ширину однієї колонки, при цьому інші «родинні» колонки автоматично змінять свій розмір навколо неї. Ви можете використовувати встановлені класи сіток (як показано знизу), міксини або інлайн-ширину. Зауважимо, що інші колонки змінюватимуть розмір незалежно від ширини центральної колонки.

2 із 3 (широка)

1 із 3

2 із 3 (широка)

3 з 3

1 із 3

2 із 3 (широка)

3 з 3

Вміст адаптивної ширини

Використовуйте класи col-(breakpoint)-auto для створення колонок, що змінюють ширину вмісту.

Вміст адаптивної ширини

"row justify-content-md-center">

1 із 3

3 з 3

1 із 3

Вміст адаптивної ширини

3 з 3

Мультиряд однакової ширини

Створюйте колонки однієї ширини, які охоплюють множинні ряди додаванням.w-100 туди, де необхідно змістити вниз на новий рядок. Робіть їх адаптивними, застосовуючи.w-100 разом із деякими адаптивними утилітами відображення .

col

Адаптивні класи

Сітка Bootstrap включає 5 «ярусів» наперед визначених класів, що використовуються для побудови складного адаптивного контенту. Адаптуйте розміри своїх колонок для правильного відображення їх на всіх видах і розмірах пристроїв.

Усі брейкпойнти

Для сіток, які виглядають та розташовуються однаково на всіх пристроях будь-якого розміру, використовуйте класи.col та.col-*. Визначте іменований клас із цифрою, коли вам потрібна колонка певного розміру, у всіх інших випадках вільно користуйтесь.

col

col-8

col-4

По горизонталі

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

col-sm-8

col-sm-4

col-sm

Шукайте та створюйте потрібне

Чи не хочете, щоб ваші колонки йшли в одному порядку? Використовуйте комбінацію різних класів для кожного рівня. Дивіться приклад унизу.

Col-12 .col-md-8

Col-6 .col-md-4

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

Прогалини між колонками

Пробіли між колонками можуть бути оперативно відрегульовані за допомогою специфічних для точки зупинки відступів та класів корисності негативного поля. Щоб змінити жолоби в даному рядку, об'єднайте утиліту негативного поля в.row та відповідні утиліти заповнення в.col . Батько.container або.container-fluid , можливо, також необхідно налаштувати, щоб уникнути небажаного переповнення, використовуючи знову відповідну утиліту заповнення.

Ось приклад налаштування сітки Bootstrap на великій (lg) точці зупинки та вище. Ми збільшили заповнення.col за допомогою.px-lg-5, протидіяли цьому с.mx-lg-n5 на батьківському.row, а потім скоригували обгортку.container за допомогою.px-lg-5.

Користувацька вставка стовпців

"col py-3 px-lg-5 border bg-light"> Користувацька вставка стовпців

Вирівнювання

Використовуйте утиліти вирівнювання flexbox для вирівнювання стовпців по вертикалі та горизонталі. Internet Explorer 10-11 не підтримує вертикальне вирівнювання елементів Flex, коли контейнер Flex має min-height, як показано нижче.

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

Одна з трьох колонок

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

Одна з двох колонок

Без пробілів між колонками

Пробіли між стовпчиками в наших встановлених класах можна видалити за допомогою класу.

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

Потрібно створити дизайн «edge-to-edge» (контент щільно прилягає до країв девайсу)?Заберіть батьківський клас .container або .container-fluid.

.no-gutters ( margin-right : 0 ; margin-left : 0 ; > .col , > [ class *= "col-" ] ( padding-right : 0 ; padding-left : 0 ; ) )

Ось як це працює на практиці. Зауважте, що ви можете продовжити використовувати це з усіма іншими встановленими класами сіток (включаючи ширину колонок, «чуйні» яруси, перевизначення та інше).

Col-12 .col-sm-6 .col-md-8

Col-6 .col-md-4

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

Обгортка колонки

Якщо більше 12 колонок розмістити в одному ряду, кожна додаткова колонка обернеться в новий рядок.

Col-4
Оскільки 9 + 4 = 13 > 12, цей div шириною 4 колонки «обернеться» в новий рядок як суміжний юніт.

Col-6
Наступні стовпці продовжуються вздовж нового рядка.

.col-9

.col-4
Оскільки 9 + 4 = 13 > 12, цей div шириною 4 колонки «обернеться» в новий рядок як суміжний юніт.

.col-6
Наступні стовпці продовжуються вздовж нового рядка.

Розриви колонок

Щоб помістити колонки на новий рядок у гнучкому контейнері, потрібно зробити наступне: додайте елемент з width: 100% туди, де ви хочете обернути ваші колонки новим рядком. У нормі це досягається за допомогою множинних .row, але не кожен виконавчий метод може це підтримати.

Col-6 .col-sm-3

.col-6 .col-sm-3

Col-6 .col-sm-4

.col-6 .col-sm-4

Зміна порядку елементів

«Гнучкий» порядок

Використовуйте класи.order - для контролю над візуальним порядкомвашого контенту. Ці класи «чуйні», так що ви можете встановити порядок за допомогою order брейкпойнта (наприклад, .order-1.order-md-2). Він підтримує 1 для 12 через усі 5 ярусів.

Перший, але невпорядкований

Другий, але останній

Третій, але перший

First, but unordered

Second, but last

Third, but first

Також існує чуйний клас. order-first, який швидко змінює порядок одного елемента застосуванням властивості order: -1. Цей клас також може застосовуватись з нумерованими класами order-*.

Перший, але невпорядкований

Другий, але невпорядкований

Третій, але перший

Перший, але невпорядкований

Другий, але невпорядкований

Третій, але перший

Колони, що зміщуються

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

Класи, що зміщуються

Рухайте колонки праворуч, використовуючи класи.offset-md-* . Вони збільшують лівий марджин колонки на колонок. Наприклад, класс.offset-md-4 рухає.col-md-4 на 4 колонки.

Col-MD-4 .offset-MD-4

Col-MD-3 .offset-MD-3

Col-MD-6 .offset-MD-3

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

Col-SM-5 .col-MD-6

Col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

Col-sm-6 .col-md-5 .col-lg-6

.col-sm-5 .col-md-6

"col-sm-5 offset-sm-2 col-md-6 offset-md-0"> .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0"> .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

Відсуваючи колонки

У БС4 порівняно з БС3 більше немає офсетних класів v3. Замість них використовуйте утиліти марджина, такі як mr-auto, щоб змусити «дитячі» колонки відсунутися одна від одної.

class=>>

class="row"> "col-SM-9"

class=>>

class=Level 1: .col-sm-9> "col-8 col-sm-6"

class=Level 2: .col-8 .col-sm-6> Level 2: .col-4 .col-sm-6

«Домішки» SASS

Використовуючи вихідні файли Sass препроцесорів БС, ви маєте можливість використання змінних та «сумішей» Sass для створення зрозумілих та «чуйних» сторінок. Наші встановлені класи сіток використовують ці ж файли та «міксини», отримуючи готові класи для швидкої адаптивної верстки.

Змінні

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

$grid-columns: 12 ; $grid-gutter-width: 30px; $grid-breakpoints: ( // Extra small screen / phone xs: 0 , // Small screen / phone sm: 576px, // screen / tablet md: 768px, // Large screen / desktop lg: 992px, // Extra large screen / wide desktop xl: 1200px ); $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px );

«Домішки»

Міксини використовуються у поєднанні зі змінними сіток для генерації семантичного CSS для колонок індивідуальних сіток.

// Creates a wrapper for series of columns@include make-row(); // Make the element grid-ready (applying everything but the width)@include make-col-ready(); @include make-col($size, $columns: $grid-columns); // Get fancy by offsetting, or changing the sort order@include make-col-offset($size, $columns: $grid-columns);

Приклад використання

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

.example-container { width: 800px; @include make-container(); } .example-row { @include make-row(); } .example-content-main { @include make-col-ready(); @include media-breakpoint-up(sm) { @include make-col(

class="example-container">

class="example-row">

class="example-content-main"> Main content

class="example-content-secondary"> Secondary content

Налаштування сіток

Змінюючи вбудовані змінні SASS та карти сіток, можна повністю переналаштувати певні класи сіток. Змінюйте кількість ярусів, розширення медіачерг, ширину контейнерів – компілюйте та користуйтеся.

Колонки та прогалини між ними

Число колонок сітки може бути змінено через змінні SASS. Використовуйте $grid-columns для генерації ширини (в %) кожної окремої колонки, а $grid-gutter-width дозволяє створювати спеціальні ширини для точок брейкпойнтів відступів колонок, які розділені рівно через padding-left і padding-right .

$grid-columns: 12 ! default; $grid-gutter-width: 30px ! default;

«Яруси» сіток

Ви також можете налаштувати кількість ярусів сіток. Якщо ви хочете, наприклад, 4 яруси, налаштуйте $grid-breakpoints і $container-max-widths так:

$grid-breakpoints: ( xs: 0 , sm: 480px, md: 768px, lg: 1024px ); $container-max-widths: ( sm: 420px, md: 720px, lg: 960px );

Вносячи зміни до змінних SASS або карт, вам необхідно зберігати зміни і компілювати заново. Це дозволить створити абсолютно новий набір встановлених класів сіток з новими параметрами ширини та порядку колонок. Інструменти «чуйної» видимості також оновляться. Обов'язково вкажіть значення сітки в px (не в rem або em і не в %).

Основна розробка сайту для верстальника починається з правильної побудови сітки сайту. Якщо ви використовуєте Bootstrap 3, то розуміння сітки фреймворку вкрай необхідне. У цій невеликій нотатки я постараюся розглянути основні нюанси при використанні сітки від Bootstrap. У статтю в основному надано переклад документації до Bootstrap Grid, але також наведено деякі мої доповнення.

Контейнер-обгортка

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

Використовуйте.container для чуйного з фіксованою шириною контейнера (максимальна ширина блоку 1170px).

Використовуйте.container-fluid для контейнера із шириною на всю область перегляду.

Система сітки

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

Отже, підходимо до суті.

Сітки використовують для побудови макетів сторінок за допомогою компонування рядків та колонок, які містять контент.

Основи роботи сітки Bootstrap:

Row (рядки) повинні бути розташовані всередині.container (fix) або.container-fluid (full-width) для правильного вирівнювання та padding (відступів – розглянемо нижче більш детально).
Використовуйте рядки, щоб створити горизонтальну групу колонок.
Контент повинен бути розташований усередині колонок, і тільки колонки можуть бути першими дочірніми елементами rows (рядки).
Зумовлені класи сітки, наприклад, такі як .row і .col-xs-4 дозволяють швидко створити макет сітки.
Колонки створюють проміжки (зазори між контентом колонок) у вигляді padding (відступів). Цей відступ зміщується в рядках для першої та останньої колонки за допомогою негативного поля елемента.row . Доповнення: Докладніше про використання негативних полів ви можете дізнатися , а якщо коротко: так як у статичного елемента.row не задана ширина, то елемент.row буде виштовхнутий у напрямку left/right зі збільшенням ширини елемента.
Саме через усунення контент усередині сітки нижче вирівнявся на одній лінії з контентом не-сітки (мова очевидно про контент статті - http://getbootstrap.com/css/#grid).
Стовпчики сітки створюються за допомогою вказівки одного номера з дванадцяти можливих для колонок, які ви хочете створити. Наприклад, для побудови трьох рівнозначних колонок достатньо використовувати col-xs-4 .
Якщо більш ніж 12 колонок розташовані всередині одного рядка, то кожна група додаткових колонок має бути обгорнена новим рядком.
Класи сітки поділяються залежно від ширини пристроїв, визначених у точках зупинки. При цьому, наприклад, застосувавши клас.col-md-* до елемента, його стиль буде використаний не тільки для середніх пристроїв, але й до великих пристроїв, але тільки якщо не заданий клас.col-lg-*.

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

Медіа-запити

Для сітки використовуються такі медіа-запити (з LESS-файлу):

/* Зовсім маленькі пристрої (phones, менше 768px) */ /* Медіа-запити відсутні, оскільки ці стилі стоять у Bootstrap за замовчуванням */ /* Невеликі пристрої (планшети, 768px і вище) */ @media (min-width : @screen-sm-min) ( ... ) /* Середні пристрої (монітори, 992px and up) */ @media (min-width: @screen-md-min) ( ... ) /* Великі пристрої ( великі монітори, 1200px and up) */ @media (min-width: @screen-lg-min) ( ... )

Налаштування сітки

	Зовсім невеликі пристрої Phones (<768px)	Невеликі пристрої Планшети (>=768px)	Середні пристрої Настільні (>=992px)	Великі пристрої Настільні (>=1200px)
Поведінка сітки	Горизонтальне весь час	Стиснута спочатку горизонтальна вище точки зупинки (мабуть мається на увазі, коли ширина пристрою менше, ніж передбачено класом – дивіться медіа запити)
Ширина контейнера	None (auto)	750px	970px	1170px
Префікс класу	.col-xs-	.col-sm-	.col-md-	.col-lg-
# колонок	12
Ширина колонки	Auto	~62px	~81px	~97px
Ширина зазору	30px (15px з кожного боку колонки)
Вкладення	Yes
Зміщення	Yes
Упорядкування колонки	Yes

Приклад: складені по горизонталі

Використовуючи клас.col-md-*, ви створюєте сітку, яка починає складатися (утворюється стек) на мобільних пристроях; при цьому на середніх пристроях комірки розташовані горизонтально. Розташуйте колонки сітки в будь-якому.

stacked-to-horizontal

HTML

.col-md-1

.col-md-8

.col-md-4

.col-md-6

Приклад: рідкий контейнер

Змініть сітку з фіксованою шириною на сітку з шириною на все вікно браузера за допомогою заміни.container на.container-fluid .

HTML

...

Приклад: мобільники та настільні пристрої

Чи не хочете, щоб ваші колонки складалися на мобільних пристроях? Застосовуйте до колонок класи для невеликих та середніх пристроїв: .col-xs-*, .col-md-*. Дивіться нижче приклад для кращого розуміння принципів роботи використання декількох класів.

Приклад на офіційному сайті - grid-example-mixed

HTML

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

Приклад: мобільники, планшети та настільні пристрої

На основі попереднього прикладу створіть ще потужніший і динамічніший макет із класом для планшетів.col-sm-* .

Http://getbootstrap.com/css/#grid-example-mixed-complete

Приклад на офіційному сайті - grid-example-mixed-complete

HTML

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

Приклад: зміщення колонки на новий рядок

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

Приклад на офіційному сайті - grid-example-wrapping

HTML

.col-xs-9

.col-xs-4
Since 9 + 4 = 13 > 12, це 4-column-wide div gets загорнуті на нову лінію, як один незмінний unit.

.col-xs-6
Subsequent columns продовжує продовжувати нову лінію.

Скидання адаптивних колонок

Маючи сітку з чотирьох колонок ви, можливо, зіткнетеся з проблемою, коли для відповідних точок зупинки ваші стовпці не вирівнялися правильно, так як один стовпець вище за інший. Щоб виправити це, використовуйте комбінацію класу.clearfix та наших службових чуйних класів.

Приклад на офіційному сайті - grid-responsive-resets

HTML

.col-xs-6 .col-sm-3

У тому, щоб переглянути коло clearing на відповідних перегонах, ви можете повернутись до offsets, pushes, або pulls. Дивіться це в дії в grid example.

HTML

.col-sm-5 .col-md-6

.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0

Зміщення колонок

Зсуньте колонки праворуч, використовуючи клас.col-md-offset-* . Ці класи збільшують ліве поле колонки на колонок. Наприклад, .col-md-offset-4 змістить.col-md-4 на чотири колонки.

Приклад на офіційному сайті - grid-offsetting

HTML

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

Вкладені колонки

Щоб вкласти ваш контент у існуючу сітку, додайте нову.row і встановіть.col-md-* колонок усередині вже існуючої.col-sm-* колонки.

Приклад на офіційному сайті - grid-nesting

HTML

"col-SM-9"

Level 2: .col-xs-8 .col-sm-6

Level 2: .col-xs-4 .col-sm-6

Порядок колонок

Порядок для колонок сітки можна змінити за допомогою .col-md-push-* і.col-md-pull-* .

Приклад на офіційному сайті - grid-column-ordering

HTML

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

Система сіток Twitter Bootstrap 3 - це швидкий та легкий шлях для створення макету сайту.

Опис системи сіток Twitter Bootstrap 3

Сітки Bootstrap застосовують при розробці макетів веб-сторінок та для створення розмітки блоків, у яких необхідно забезпечити правильне розташуванняелементів. Розробляти сітку починають із контейнера, який має фіксовану або плаваючу ширину.

Контейнер із фіксованою шириною

Контейнер із фіксованою шириною (

…

) має чітко визначену ширину, яка змінюється при зміні ширини робочої області вікна браузера і орієнтується в горизонтальному напрямку по центру, за допомогою властивостей margin-left:auto і margin-right:auto . Також контейнер задає внутрішні відступи ліворуч і праворуч по 15рх (padding-left: 15px і padding-right: 15px) для вмісту, що в нього вміщено.

Контейнер із плаваючою шириною

Контейнер із плаваючою шириною (

…

) займає всю ширину вікна браузера і задає внутрішні відступи ліворуч і праворуч по 15рх (padding-left: 15px і padding-right: 15px) для вмісту, що в нього вміщено.

Розміщення рядів усередині контейнера

Наступним етапом є розміщення рядів (блоки div із класом.row) усередині контейнера. Ширина рядів (

…

) Дорівнюватиме ширині контейнера, т.к. даний блокмає негативні зовнішні відступи ліворуч і праворуч по 15рх (margin-left:-15px і margin-right:-15px).

Розміщення блоків усередині рядів Bootstrap

Усередині ряду розміщуються блоки з класом col-*-* , всередині яких розміщується вміст чи інші ряди. Ширина блоків із класом col-*-* задається у відносній формі за допомогою вказівки кількості колонок Bootstrap. Оскільки ряд Bootstrap за замовчуванням складається з 12 колонок, то мінімальна ширина блоку col-*-* дорівнює одній колонці Bootstrap, а максимальна ширина блоку col-*-* дорівнює 12 колонкам Bootstrap.

Наприклад, якщо ми хочемо створити в ряді 3 блоки з однаковою шириною, то нам необхідно встановити ширину цих блоків рівним 4 колонкам Bootstrap (

...

Розрахунок ширини блоків

Наприклад: Розрахувати ширину блоку в пікселях можна так:
[Ширина блоку] = [Ширина колонки Bootstrap]*[Кількість колонок, з яких складається блок],
де: [Ширина стовпчика Bootstrap] = [Ширина ряду (row)] / 12.

[Ширина колонки Bootstrap] = 970/12 = 81px.
[Ширина блоку] = 81 * 4 = 324px.

Система сіток під різні пристрої

Для створення макетів веб-сторінок під різні пристрої(Смартфони, планшети, ноутбуки та персональні комп'ютери) необхідно скористатися зумовленими класами сіток Twitter Bootstrap 3.

Наприклад, можна використовувати клас.col-xs-* для створення сітки для пристроїв з маленьким екраном, таких як смартфони. Так само клас. col-sm-* - для пристроїв з невеликим екраном, таких як планшети, клас. col-md-* - для пристроїв з екраном середніх розмірів, таких як персональні комп'ютери та ноутбуки, а також, клас. для пристроїв із великим екраном.

Наступна таблиця узагальнює деякі ключові особливостінову систему сіток Bootstrap 3.

Особливості системи сіток Bootstrap 3	Крихітка ширина екрану Смартфони (<768px)	Маленька ширина екрану Планшети (≥768px та<992)	Середня ширина екрану Ноутбуки (≥992px та<1200px)	Велика ширина екрану Комп'ютери (≥1200px)
Ширина контейнера фіксованого макета (.container)		750px	970px	1170px
Ширина контейнера плаваючого макету (.container-fluid)	Рівна ширині робочої області вікна браузера
Префікс класу	.col-xs-	.col-sm-	.col-md-	.col-lg-
Максимальна ширина стовпчика Bootstrap для контейнера з фіксованою шириною (.container)		~62px (750px / 12)	~81px (970px / 12)	~97px (1170px / 12)
Максимальна ширина стовпчика Bootstrap для контейнера з плаваючою шириною (.container-fluid)	Ширині робочої області вікна браузера / 12
Внутрішні відступи для вмісту блоків, що складаються з колонок Bootstrap	15px з лівого та правого боку блоку

Примітка:

Якщо ви застосовуєте клас.col-sm-* до блоку, це вплине не тільки на розмітку для пристроїв, з маленьким екраном (планшети), але також на пристрої з середнім та великим екранами, якщо Ви не вказали класи.col-md- * і.col-lg-*. Аналогічно, клас.col-md-* впливатиме на розмітку не тільки для пристроїв із середнім екраном, але й на пристрої з великим екраном, якщо клас.col-lg-* не вказано.

Створення макету сайту за допомогою системи сіток Twitter Bootstrap 3

З новою системою Twitter Bootstrap 3 ви можете легко контролювати відображення макета сайту на різних пристроях, які мають різну ширину екрану.

Як приклад розглянемо процес розробки макету сайту, що складається з трьох блоків для всіх пристроїв. Розроблений макет на різних пристроях (смартфони, планшети, ноутбуки, персональні комп'ютери) виглядатиме по-різному. Наприклад, на смартфонах ці блоки розташовуються вертикально, а великому екрані персонального комп'ютера вони розміщуються горизонтально. Тобто наш макет автоматично змінюватиметься при досягненні граничних значень ширини вікна браузера.

Створення макету для пристрою з великим екраном

Макет сайту для пристрою з великим екраном (width>=1200px) складається з трьох блоків, розташованих горизонтально, які займають всю ширину контейнера. Перший блок має ширину, що дорівнює половині ширини контейнера (col-lg-6), другий блок займає одну четверту від ширини контейнера (col-lg-3), і третій блок теж займає одну четверту від ширини контейнера (col-lg-3).

Налаштування макету для пристрою із середнім екраном

Макет сайту для пристрою із середнім екраном (width >=992px та<1200) состоит из трёх блоков, два из которых расположены в одной строке и один в другой. Первый блок имеет ширину равную 8 колонкам Bootstrap (col-md-8), второй блок занимает оставшуюся ширину, т.е. 12 - 8 = 4 колонки (col-md-4). Так как третий блок должен располагаться с новой строки, то необходимо перед ним поместить дополнительный пустой блок с классом.clearfix , который не будет обтекать предыдущие блоки. Также необходимо иметь в виду, что это надо сделать только для экранов со средней шириной. Для этого необходимо к пустому блоку дополнительно добавить класс.visible-md-block . Ширина 3 блока равна ширине контейнера (col-md-12).

<"height:150px; background:blue;"> Блок №3div > div > div >

Налаштування макету для пристроїв з маленьким та крихітним розмірами екранів

Аналогічно налаштуємо макет для інших пристроїв. Макет сайту для пристрою з маленьким екраном (width >=768px та<992px) состоит из 3 блоков, первый блок занимает всю ширину контейнера, остальные 2 блока расположены под ним и занимают каждый ширину, равную 6 колонкам Bootstrap.

Макет сайту для пристрою з крихітним екраном (width<768px) состоит из 3 блоков, которые расположены вертикально и занимают всю ширину контейнера.

Примітка: Для пристроїв з невеликою шириною екрана (<768px) блоки по умолчанию всегда занимают всю ширину рабочей области экрана (col-xs-12) и располагаются один под другим как в нашем примере. Настраивать макет для таких устройств имеет смысл, если макет отличается от вышесказанного.

Адаптивні службові класи Twitter Bootstrap для відображення та приховування елементів

Twitter Bootstrap 3 містить адаптивні службові класи, які дозволяють увімкнути відображення елементів лише на певних пристроях, розміри екранів яких потрапляють у відповідний діапазон.

У Twitter Bootstrap 3.2 додано підтримку властивості CSS display для класса.visible . Нова можливість дозволяє задавати видимість таким елементам, як inline, block і inline-block на різних екранах. Наприклад, клас.visible-md-block включає видимість елемента, якщо він є блоковим (block) і поточна ширина робочої області вікна браузера відповідає діапазону md (width >=992px<1200px).

Опис
.visible-xs-*	Робить елемент видимим лише на пристроях з дуже маленьким екраном, у яких ширина екрана менше 768px. На інших пристроях ці елементи не помітні.
.visible-sm-*	Робить елемент видимим тільки на пристроях, що мають екран шириною більше або дорівнює 768px (тобто ≥768px) і менше ніж 992px. На інших пристроях ці елементи не помітні.
.visible-md-*	Робить елемент видимим лише на пристроях, що мають екран шириною більше або дорівнює 992px (тобто ≥992px) і менше 1200px. На інших пристроях ці елементи не помітні.
.visible-lg-*	Робить елемент видимим лише на пристроях, що мають екран шириною більше або дорівнює 1200px (тобто ≥1200px). На інших пристроях ці елементи не помітні.

Примітка: Ви також можете спільно використовувати ці класи для того, щоб елементи були видні на кількох пристроях. Наприклад, можна застосувати клас.visible-xs-* і.visible-md-* на будь-який блок, щоб зробити його видимим на пристроях і з дуже маленьким і середнім екраном.

Таким чином, ви можете використовувати нижче перелічені службові класи, щоб приховати відображення елементів на певних пристроях.

Порада: Ви також можете спільно використовувати ці класи, щоб блоки не було видно на кількох пристроях. Наприклад, ви можете застосувати класи.hidden-xs та.hidden-md до блоку на веб-сторінці, щоб зробити цей блок невидимим на пристроях з дуже маленьким та середнім екраном.

<p class = "visible-xs-block" >Цей параграф буде видно лише на смартфонах.p > <p class = "visible-sm-block" >Цей параграф буде видно лише на планшетах.p > <p class = "visible-md-block" >Цей параграф буде видно лише на пристроях із середнім розміром екрана.p > <p class = "visible-lg-block" >Цей параграф буде видно лише на пристроях з великим екраном.p >

Подібно до звичайних адаптивних класів Twitter Bootstrap 3, можна використовувати наступні службові класи, щоб відображати або приховувати певні блоки під час друку веб-сторінок.

У цій статті познайомимося з класами фреймворку Bootstrap 3, призначеними для створення адаптивного «скелета» (макету) сайту.

"Будівельні" елементи сітки Bootstrap 3

Сітка Bootstrap складається з «будівельних» елементів. Основні – це обгорткові контейнери, ряди , адаптивні блокиі чуйні службові класи.

По суті, сітка - це просто список певних класів, за допомогою яких можна задати необхідну поведінку блокам (HTML елементам) і побудувати за їх допомогою певний адаптивний макет сайту.

Обгорткові контейнери

Обгортковий контейнер- це «будівельний» елемент сітки, з якого починається створення макета для всієї сторінки чи її частини (наприклад, шапки, основного меню, основної області, футера) залежно від стратегії розробки.

Контейнер у Bootstrap буває адаптивно-фіксованимабо адаптивно-гумовим.

Перший ( адаптивно-фіксований контейнер) характеризується тим, що він має постійну ширину в межах деякого діапазону ширини viewport (області перегляду).

У наступній таблиці наведено те, яку ширину має адаптивно фіксований контейнер при тій чи іншій ширині області перегляду (viewport) браузера:

Ширина viewport	Ширина контейнера (container)
<768px	Ширина контейнера дорівнює ширині viewport
>= 768px та<992px	750px
>= 992px та<1200px	970px
<=1200px	1170px

Крім установки ширини, адаптивно-фіксований контейнер Bootstrap ще центрує себе в горизонтальному напрямку щодо країв сторінки. Виконує це він за допомогою CSS властивостей margin-left:auto та margin-right:auto . Ще адаптивно-фіксований контейнер задає внутрішні відступи ліворуч і праворуч по 15рх (за допомогою CSS властивостей padding-left: 15px і padding-right: 15px) для вмісту, який у нього вміщено.

...

Адаптивно-гумовий контейнер відрізняється від адаптивно-фіксованого тим, що він займає всю ширину(100%) вікна браузера. Крім цього, він також як і адаптивно-фіксований контейнер задає внутрішні відступи ліворуч і праворуч по 15рх для вмісту, що в нього вміщено.

...

При розробці макету сайту зазвичай не застосовують вкладання одних обгорткових контейнерів Bootstrap в інші.

Отже, перший «будівельний» елемент сітки Bootstrap – це обгортковий контейнер.Він визначає ширину макета на різних viewport, а також виконує його центрування (тільки адаптивно-фіксований контейнер) щодо лівого та правого краю робочої області вкладки або вікна браузера.

Наступний будівельний елемент – це ряд (блок div із класом row). Ряд – це спеціальний блок, який застосовується лише для обертання інших будівельних елементів (адаптивних блоків). Його основне призначення - це нейтралізація позитивного внутрішнього відступу (15px ліворуч і праворуч) обгорткового контейнера або адаптивного блоку.

Приклад формування внутрішніх відступів:

Container (+15px) -> row (-15px) -> col (+15px) -> контент container (+15px) -> row (-15px) -> col (+15px) -> row (-15px) -> col (+15px) -> контент *col - це адаптивний блок

Приклад показує, що незалежно від того, в якому адаптивному блоці знаходиться контент, він завжди матиме правильний відступ від краю (тобто 15px зліва і праворуч).

Наступний "будівельний" елемент сітки Bootstrap - це адаптивний блок (div з класом col-?-?).

Адаптивні блоки- це елементи сітки Bootstrap, яким встановлений один або кілька класів col-?-? . Дані блоки є основними «будівельними» цеглинами, саме вони і формують необхідну структуру.

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

Як здійснюється встановлення ширини адаптивному блоку?Встановлення ширини адаптивного блоку, яку він повинен мати на певному пристрої, задається за замовчуванням від 1 до 12 (кількістю колонок Bootstrap). Це число вказується замість другого знака? у класі col-?-? .

Це число (за замовчуванням від 1 до 12) визначає який відсоток від ширини батьківського елементаповинен мати адаптивний блок.

Наприклад, число 1 - встановлює адаптивний блок ширину, рівну 8,3% (1/12) від ширини батьківського блоку. Число 12 - ширину, що дорівнює 100% (12/12) від ширини батьківського блоку.

Крім вказівки ширини адаптивного блоку необхідно ще вказати і тип пристрою(замість 1 питання). Клас пристрою визначатиме те, на якому viewport буде діяти ця ширина. У Bootstrap 3 розрізняють 4 основні класи. Це xs (ширина viewport >0) , sm (ширина viewport >= 768px), md (ширина viewport >= 992px) та lg (ширина області перегляду браузера >=1200px).

Наприклад, адаптивний блок з класом col-xs-12 col-sm-6 col-md-4 col-lg-3 матиме на пристрої xs ширину 100% (12/12), на sm - 50% (6/12) на md - 33,3% (4/12), на lg - 25% (3/12).

Крім цього, слід звернути увагу на те, що адаптивні блоки не обмежують свій діапазон. Тобто. якщо ви в атрибуті class адаптивного блоку вказали xs , але не вказали sm , його дія пошириться і на область дії цього діапазону.

Наприклад, адаптивний блок з класом col-xs-6 col-lg-3 матиме на пристроях xs, sm та md ширину 50% (6/12), на lg - 25% (3/12).

Адаптивний блок, як і контейнер, задає позитивні відступи ліворуч і праворуч по 15px для контенту, який у нього поміщений.

У правильному макеті, побудованому на основі сітки Bootstrap, адаптивний блок повинен завжди мати в якості свого батька ряд.

Наприклад, розіб'ємо блок на 3 рівні колонки, які на xs будуть відображатися вертикально, а на sm і вище горизонтально:

...

Наприклад, розрахуємо доступну ширину під контент для першого і другого блоку:

1 блок...

2 блок...

Контрольні точки	Доступна ширина 1 блоку	Доступна ширина 2 блоки
320px - 749.98px		від 290px (320px - padding (30px)) до 719.98px (749.98px - padding (30px))
750px - 969.98px		720px (750px - padding (30px))
970px - 1169.98px	616,7px (970px*8/12 - padding (30px))	293,3px (70px*4/12 - padding (30px))
1170px і більше	750px (1170px*8/12 - padding (30px))	360px (1170px*4/12 - padding (30px))

Адаптивні блоки розташовуються в батьківському елементі один за одним рядками. В один рядок поміщаються адаптивні блоки із сумарною кількістю колонок не більше 12 (за умовчанням). Тобто. блоки, що не поміщаються в перший рядок, розташовуються у наступному рядку тощо.

Як розташовуються адаптивні блоки?

У Bootstrap 3 адаптивні блоки плавають (float:left). Це необхідно враховувати під час створення макету веб-сторінки.

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

Ще у плаваючих блоків є одна особливість. Наприклад, якщо у наведеному прикладі висота 1 блоку буде вище, ніж 2 блоки. То 3 блок буде розташовуватися не на новому рядку, а "прилипне" до правій стороні 1 блок.

Щоб цього не допустити, необхідно додати блок із класом clearfix і зробити його видимим для необхідних пристроїв (наприклад, на md та lg):

1 блок...

2 блок...

3 блок...

Основний принцип створення макета

Основний принцип створення макета полягає у вкладанні одних адаптивних блоків до інших. При цьому їх ширина - це відносний параметр, який задається у відсотковому відношенні (кількістю колонок) від ширини батьківського блоку. Тобто. на будь-якому рівні вкладеності, наприклад, ширина адаптивного блоку 6 колонок - це завжди 50% (6/12*100%) від ширини батьківського елемента.

Наприклад, розіб'ємо деякий блок (основний) на 4 блоки (2 у першому рядку та 2 у другому). Для простоти, макет створимо не адаптивний:

1 блок...

2 блок...

3 блок...

4 блок...

Створимо макет 3 блоки (3 x 2):

1 блок...

2 блок...

3-1 блок...

3-2 блок...

3-3 блок...

3-4 блок...

3-5 блок...

3-6 блок...

4 блок...

Неважко помітити, що розмітка вкладеного адаптивного блоку виконується як і основного. Це означає, що немає різниці, який рівень вкладеності має блок, створення його макета виконується за тими самими правилами.

Класи для адаптивного зміщення блоків

У Bootstrap є адаптивні класи (col-?-offset-?), за допомогою яких ви можете зсунути блок на певну кількість колонок праворуч. Перший? необхідно замінити на тип пристрою (xs, sm, md або lg). Другий? кількість колонок.

Наприклад, задаємо блоку на md пристроях ширину 8 колонок і розташуємо його в рядку по центру (тобто зрушимо його на 2 колонки вправо):

1 блок...

Крім інструментів для адаптивного зміщення блоків, Bootstrap 3 є ще спеціальні класи, за допомогою яких можна змінити порядок проходження елементів в межах одного рядка.

Чуйні службові класи Bootstrap 3

Bootstrap 3 містить адаптивні (службові) класи, які дозволяють керувати видимістю відображення елементів залежно від типу пристрою.

Крім вказівки пристрою (xs, sm, md, lg), на якому буде видно блок, необхідно вказати те, як на цьому пристрої він повинен відображатися. Можливі варіанти: inline, block та inline-block.

Клас	Опис
visible-xs-?	Робить елемент видимим тільки на пристроях з дуже маленьким xs екраном (ширина viewport<768px). На других устройствах эти элементы не отображаются.
visible-sm-?	Робить елемент видимим лише на пристроях, що мають екран sm (ширина viewport >=768px та<992px). На других устройствах эти элементы не отображаются.
visible-md-?	Робить елемент видимим лише на пристроях, що мають md екран (ширина viewport >=992px і<1200px). На других устройствах эти элементы не отображаются.
visible-lg-?	Робить елемент видимим лише пристроях, мають екран lg (ширина viewport >=1200px). На інших пристроях ці елементи не відображаються.

Замість знаку? необхідно вказати block, inline або inline-block. Тобто. вказати, як цей елемент повинен відображатись.

Наприклад, додавання до елемента класу visible-md-block означатиме те, що він відображатиметься тільки на пристроях, що мають viewport md (width viewport >=992px і<1200px). Выглядеть данный элемент на странице будет как блок (CSS: display:block;).

Примітка: Ці класи також можна використовувати спільно для того, щоб елементи були видні на кількох пристроях. Наприклад, якщо ви застосуєте до елемента класи visible-xs-inline і visible-md-inline, це зробить його видимим на пристроях, що мають як маленький екран, так і середній. Відображатися цей елемент буде як малий (CSS: display: inline;).

Крім цих Bootstrap 3, має ще класи з протилежною дією. За допомогою їх можна приховати елементи на певних пристроях.

Ці класи також можна використовувати спільно, щоб зробити елемент не видимим на кількох пристроях.

Наприклад, елемент із класами hidden-xs і hidden-sm буде видно відразу на 2 пристроях (xs і sm).

Крім вищенаведених чуйних класів, фреймворк Bootstrap 3 містить і такі, які дозволяють керувати видимістю елементів під час друку.

Клас	Опис
visible-print-block	Елемент, який має вказаний клас, не відображатиметься на сторінці. Під час друку цей елемент буде видно, і мати як CSS-властивості display значення block .
visible-print-inline	Елемент, який має вказаний клас, не відображатиметься на сторінці. Під час друку цей елемент буде видно, і мати як CSS-властивості display значення inline .
visible-print-inline-block	Елемент, який має вказаний клас, не відображатиметься на сторінці. Під час друку цей елемент буде видно, і мати як CSS-властивості display значення inline-block .
hidden-print	Елемент, який має вказаний клас, не відображатиметься під час друку. На сторінці (у браузері) цей елемент буде видно.

Приклад створення макету за допомогою сітки Bootstrap 3

У цьому розділі статті розглянемо процес створення адаптивного макета для блоку з використанням сітки Bootstrap 3.

Макет складається із трьох блоків. Ці блоки повинні розташовуватися на пристроях так, як показано на зображенні.

Розробляти макет зазвичай починають із крихітних пристроїв (xs). На цьому пристрої блоки мають однакову ширину, що дорівнює 12 колонкам Bootstrap.

Контент блоку 1...

Контент блоку 2...

Контент блоку 3...

На sm блоки розташовуються так:

1 – займає всю ширину батьківського блоку;
2 і 3 (кожен з них) - ширину, що дорівнює 6 колонкам Bootstrap.

Контент блоку 1...

Контент блоку 2...

Контент блоку 3...

На md блоки 1 і 2 розташовані на першому рядку, а блок 3 - на 2 рядку. 1 блок має ширину, що дорівнює 8 колонкам Bootstrap (col-md-8), 2 блок - 4 колонки (col-md-4).

3 блок повинен завжди розташовуватись на 2 рядку. Щоб це гарантувати, перед цим блоком необхідно помістити додатковий порожній блок класу clearfix . Цей блок не дозволить 3 блоку обтікати попередні блоки. Крім цього необхідно мати на увазі, що блок із класом clearfix необхідно відображати тільки на md, т.к. ця дія на інших пристроях не потрібна.

Контент блоку 1...

Контент блоку 2...

Контент блоку 3...

На lg адаптивні блоки розташовані горизонтально і разом займають всю ширину. 1 блок має ширину рівну половині ширини батьківського елемента (col-lg-6), 2 блок - одну четверту ширини (col-lg-3), і 3 блок - теж повинен займати одну четверту ширину батьківського елемента (col-lg-3) .

Контент блоку 1...

Контент блоку 2...

Контент блоку 3...

Ще цікаві теми.

Технології, що стрімко розвиваються, змушують нас йти в ногу з часом. Якщо раніше дизайн створювався на чистому HTML та CSS коді, то сьогодні час бібліотек коду.

Багато фронт-енд розробники, які цінують свій час, давно вже використовують шаблонізатори, сітчасті структури, SESS, LESS, Bootstrap та інші рішення. Це правильно, навіщо ускладнювати собі життя, коли є готові колекції та реалізації завдань.

Сьогодні ми розглянемо, як можна створювати блокові сітки на bootstrap 3.0. Хоча з упевненістю можу сказати, за півроку, потрібно буде вникати в нову 4 версію бутстрапу.

Хто ще не знайомий з Bootstrap?

Bootstrap- це бібліотека CSS коду, надана компанією Твіттер і розповсюджується безкоштовно. Значно полегшує життя веб дизайнеру. В архіві додається невеликий додаток у вигляді js файлу. Докладніше про встановлення та використання можна дізнатися на офіційному сайті.

Приклади рішень: http://getbootstrap.com/components/ - таби, стилізація таблиць, спливаючі вікна, навігація, меню, вертикальні списки, кнопки, іконки та інші принади. Теж на англ. мовою.

Що потрібно знати раніше про сітки bootstrap?

Раніше у другій версії бутстрапу були лише деякі доповнення для мобільних рішень. У третій версії весь фреймверк спочатку адаптований під різні пристрої: мобільні, планшети, десктопи. Зараз прояснитися:)

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

Весь код body контенту міститься у спеціальному div блоці. Він може бути фіксованою шириною .container, або повноекранним. container-fluid.