Блокова система · Bootstrap українською
Варіанти структурування сторінок з Bootstrap, включаючи глобальні стилі, необхідні інструменти, блокову систему та інше.
Bootstrap включає потужну mobile-first блочна система макетів будівлі будь-яких форм і розмірів. Він заснований на стовпець 12 розмітка і має кілька рівнів по одному для кожної медіа діапазону запиту. Ви можете використовувати його з Sass домішок або наших певних класів.
Зміст
Як це працює
На високому рівні, блочна система працює так:
Звучить добре? Добре, давайте перейдемо до бачачи все це в приклад.
Приклад швидкого запуску
Якщо ви використовуєте Bootstrap скомпільований CSS, у цьому прикладі ви хочете, щоб почати.
Наведений вище приклад створює три рівні ширини стовпців на малих, середніх, великих і дуже великих пристроїв, використовуючи наш певний грид класів. Ці стовпці по центру сторінки з батьком .container.
Функціонал розмітки
Дивись як аспекти Bootstrap блочної системи працюють на декількох пристроях з таблиці.
| .col-sm- | .col-md- | .col-lg- | .col-xl- |
| 12 | |||
| 1.875rem / 30px (15px на всій стороні дерева) | |||
| Yes | |||
| Yes | |||
| Yes |
Sass домішки
При використанні Bootstrap джерело Sass файлів, у вас є можливість використання Sass змінних та міксинів для створення користувальницьких семантичних, адаптивний сторінка розмітки. Наш зумовлений грід класів використовувати ті ж змінні і міксини представити цілий набір готових класів для швидкого адаптаціїрозмітки.
Змінні
Змінні та карти визначити кількість стовпців, ширину проміжку, а медіа запитів точки, з якої починається плаваючі стовпці. Ми використовуємо їх, щоб створити зумовлений грід класів, описаних вище, а також для користувацьких міксини, наведених нижче.
Змішування
Змішування використовуються в поєднанні зі змінними розмітками, щоб утворити семантичні CSS для окремих стовпців розмітки.
Приклади використання
Ви можете змінити змінні на власні значення або просто використовувати міксини з їх значеннями за замовчуванням. Ось приклад з використанням параметрів за промовчанням, щоб створити два стовпці розмітка із зазором між ними.
Побачити їх у дії це призвело наприклад.
Зумовлені класи
Крім семантичної домішки, Bootstrap включає широкий набір вбудованих класів для швидкого створення грід колон. Вона включає опції для апаратного калібрування поля, переупорядкування стовпців, і багато іншого.
Приклад: Складені по горизонталі
Використовуючи єдиний набір .col-md-* грид класів, ви можете створити базову блокову систему що починається складені на мобільних пристроях і планшет пристроїв (екстра малий у невеликому діапазоні), перш ніж стати горизонтально на столі (середніх) пристрої. Місце грид стовпців у будь-який .row.