Bootstrap

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

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

Глобальні стилі для скидання CSS, типографіки та посилань

Потрібен тип документа HTML5

Bootstrap використовує елементи HTML і властивості CSS, які потребують використання документа HTML5. Обов’язково додайте його на початку кожної сторінки Bootstrapped у вашому проекті.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Типографіка та посилання

У файлі scaffolding.less ми встановлюємо базові глобальні стилі відображення, типографіки та посилань. Зокрема, ми:

  • Видаліть поле на корпусі
  • Встановити background-color: white;наbody
  • Використовуйте атрибути @baseFontFamily, @baseFontSizeі @baseLineHeightяк нашу типографічну базу
  • Встановіть колір глобального посилання за допомогою @linkColorта застосовуйте підкреслення посилання лише на:hover

Скинути через Normalize

Починаючи з Bootstrap 2, традиційне скидання CSS еволюціонувало, щоб використовувати елементи з Normalize.css , проекту Ніколаса Галлагера , який також є основою шаблону HTML5 .

Нове скидання все ще можна знайти в reset.less , але багато елементів видалено для стислості та точності.

Система сітки за замовчуванням із 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 пікселів Негативний проміжок між стовпцями

Змінні в 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>

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

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

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

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

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

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

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

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

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

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

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

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

Using the media queries

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

  1. Use the compiled responsive version, bootstrap-responsive.css
  2. Add @import "responsive.less" and recompile Bootstrap
  3. Modify and recompile responsive.less as a separate file

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

  1.   // Landscape phones and down
  2.   @media (max-width: 480px) { ... }
  3.  
  4.   // Landscape phone to portrait tablet
  5.   @media (max-width: 767px) { ... }
  6.  
  7.   // Portrait tablet to landscape and desktop
  8.   @media (min-width: 768px) and (max-width: 979px) { ... }
  9.  
  10.   // Large desktop
  11.   @media (min-width: 1200px) { ... }

Responsive utility classes

What are they

For faster mobile-friendly development, use these basic utility classes for showing and hiding content by device.

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

For example, you might show a <select> element for nav on mobile layouts, but not on tablets or desktops.

Support classes

Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class Phones 480px and below Tablets 767px and below Desktops 768px and above
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Test case

Resize your browser or load on different devices to test the above classes.

Visible on...

Green checkmarks indicate that class is visible in your current viewport.

  • Phone✔ Телефон
  • Tablet✔ Планшет
  • Desktop✔ Desktop

Прихований на...

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

  • Телефон✔ Телефон
  • планшет✔ Планшет
  • Робочий стіл✔ Робочий стіл