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

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

Сітка за замовчуванням 940 пікселів

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

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

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

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

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

4 зсув 4

3 зсув 3

8 зсув 4

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

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

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

приклад

1 рівень колонки

Рівень 2

<div class = "row" > 
  <div class = "span12" > 
    1 рівень колонки
    <div class = "row" > 
      <div class = "span6" > Рівень 2 </div> 
      <div class = "span6" > Рівень 2 </div> 
    </div>
  </div>
</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">.

<тіло>
  <div class = "container" > 
    ...
  </div>
</body>

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

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

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Вміст бічної панелі-->
    </div>
    <div class = "span10" > 
      <!--Вміст тіла-->
    </div>
  </div>
</div>

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

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

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

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

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

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

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

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

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

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

  // Альбом телефонів і вниз
  @media ( max - width : 480px ) { ... }     
 
  // Альбомна орієнтація телефону на планшет із книжковою орієнтацією
  @media ( max - width : 768px ) { ... }     
 
  // Книжкова орієнтація планшета на альбомну та робочий стіл
  @media ( min - width : 768px ) і ( max - width : 940px ) { ... }        
 
  // Великий робочий стіл
  @media ( min - width : 1200px ) { .. }