Bootstrap

Будівельні ліси

Bootstrap побудовано на адаптивній сітці з 12 стовпців. Ми також включили макети з фіксованою та рідкою шириною на основі цієї системи.

Система сітки за замовчуванням із 12 стовпців із адаптивним поворотом

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Система сітки за замовчуванням, яка є частиною Bootstrap, є сіткою з 12 стовпців шириною 940 пікселів .

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

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

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


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

4
4 зсув 4
3 зсув 3
3 зсув 3
8 зсув 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Вкладені стовпці

Завдяки статичній (неплинній) системі сіток у Bootstrap створення гнізд є простим. Щоб вкласти свій вміст, просто додайте новий .rowі набір .span*стовпців у наявний .span*стовпець.

приклад

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

1 рівень колонки
Рівень 2
Рівень 2 
  1. <div class = "row" > 
  2.   <div class = "span12" > 
  3.     1 рівень колонки
  4.     <div class = "row" > 
  5.       <div class = "span6" > Рівень 2 </div> 
  6.       <div class = "span6" > Рівень 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Система гнучкої сітки 12 адаптивних стовпців на основі відсотків

Стовпчики рідини

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Відсотки, а не пікселі

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

Рідкі ряди

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

Розмітка

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Рідке вкладення

Вкладення з плавними сітками дещо відрізняється: кількість вкладених стовпців не обов’язково збігається з батьківським. Натомість ваші стовпці скидаються на кожному рівні, оскільки кожен рядок займає 100% батьківського стовпця.

Рідина 12
Рідина 6
Рідина 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     1 рівень колонки
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Рівень 2 </div> 
  6.       <div class = "span6" > Рівень 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

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

змінна Значення за замовчуванням опис
@gridColumns 12 Кількість стовпців
@gridColumnWidth 60 пікселів Ширина кожного стовпчика
@gridGutterWidth 20 пікселів Негативний проміжок між стовпцями
@siteWidth Обчислена сума всіх колон і жолобів Підраховує кількість стовпців і жолобів для встановлення ширини .container-fixed()міксину

Змінні в LESS

У Bootstrap вбудовано кілька змінних для налаштування системи сітки за замовчуванням 940 пікселів, задокументованої вище. Усі змінні для сітки зберігаються у variables.less.

Як налаштувати

Зміна сітки означає зміну трьох @grid*змінних і перекомпіляцію Bootstrap. Змініть змінні сітки у variables.less і скористайтеся одним із чотирьох задокументованих способів перекомпіляції . Якщо ви додаєте більше стовпців, обов’язково додайте CSS для тих у grid.less.

Залишайтеся чуйними

Налаштування сітки працює лише на рівні за замовчуванням, сітки 940 пікселів. Щоб зберегти адаптивні аспекти Bootstrap, вам також доведеться налаштувати сітки в responsive.less.

Макети Базові шаблони для створення веб-сторінок

Фіксований макет

Стандартний і простий макет шириною 940 пікселів по центру майже для будь-якого веб-сайту чи сторінки, наданий одним <div class="container">.

  1. <тіло>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

Гнучкий макет

<div class="container-fluid">надає гнучку структуру сторінки, мінімальну та максимальну ширини та ліву бічну панель. Це чудово для додатків і документів.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Вміст бічної панелі-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Вміст тіла-->
  8.     </div>
  9.   </div>
  10. </div>

Адаптивний дизайн Медіа-запити для різних пристроїв і роздільної здатності

Чуйні пристрої

Підтримувані пристрої

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

Мітка Ширина макета Ширина колонки Ширина ринви
Смартфони 480 пікселів і нижче Рідкі колони, без фіксованої ширини
Таблички портретні від 480 пікселів до 768 пікселів Рідкі колони, без фіксованої ширини
Пейзажні планшети від 768 пікселів до 979 пікселів 42 пікселів 20 пікселів
За замовчуванням 980 пікселів і більше 60 пікселів 20 пікселів
Великий дисплей 1210 пікселів і вище 70 пікселів 30 пікселів

Потрібен мета-тег

Щоб забезпечити належне відображення адаптивних сторінок на пристроях, додайте мета-тег вікна перегляду.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

Що вони роблять

Медіа-запити дозволяють створювати настроювані CSS на основі ряду умов — співвідношення, ширини, типу відображення тощо, але зазвичай зосереджуються навколо min-widthта max-width.

  • Змініть ширину стовпця в нашій сітці
  • Укладайте елементи в стопку, а не плавайте, де це необхідно
  • Змініть розмір заголовків і тексту, щоб вони більш відповідали пристроям

Використання медіа-запитів

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

  1. Використовуйте скомпільовану адаптивну версію bootstrap-responsive.css
  2. Додайте @import "responsive.less" і перекомпілюйте Bootstrap
  3. Змініть і перекомпілюйте responsive.less як окремий файл

Чому б просто не включити його? По правді кажучи, не на все потрібно реагувати. Замість того, щоб заохочувати розробників видалити цю функцію, ми вважаємо за краще її ввімкнути.

  1.   // Альбом телефонів і вниз
  2.   @media ( max - width : 480px ) { ... }     
  3.  
  4.   // Альбомна орієнтація телефону на планшет із книжковою орієнтацією
  5.   @media ( max - width : 768px ) { ... }     
  6.  
  7.   // Книжкова орієнтація планшета на альбомну та робочий стіл
  8.   @media ( min - width : 768px ) and ( max - width : 980px ) { ... }        
  9.  
  10.   // Великий робочий стіл
  11.   @media ( min - width : 1200px ) { .. }