Bootstrap

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

Bootstrap побудований на адаптивних 12-колонкових сітках, макетах і компонентах.

Глобальні налаштування

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

Bootstrap використовує певні елементи HTML і властивості CSS, які потребують використання документа HTML5. Додайте його на початку всіх ваших проектів.

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

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

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

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

Ці стилі можна знайти в scaffolding.less .

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

У Bootstrap 2 старий блок скидання було відкинуто на користь Normalize.css , проекту Ніколаса Галлагера , який також підтримує HTML5 Boilerplate . Хоча ми використовуємо більшу частину Normalize у нашому reset.less , ми видалили деякі елементи спеціально для Bootstrap.

Система сітки за замовчуванням

Приклад живої сітки

Система сітки Bootstrap за замовчуванням використовує 12 стовпців , що створює контейнер шириною 940 пікселів без активованих адаптивних функцій . Завдяки адаптивному файлу CSS ширина сітки змінюється до 724 пікселів і 1170 пікселів залежно від вікна перегляду. Нижче вікон перегляду 767 пікселів стовпці стають плавними та розташовуються вертикально.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

Основна сітка HTML

Для простого макета з двома стовпцями створіть .rowі додайте відповідну кількість .span*стовпців. Оскільки це сітка з 12 стовпців, кожен .span*охоплює певну кількість із цих 12 стовпців, і завжди слід додавати до 12 для кожного рядка (або кількості стовпців у батьківському рядку).

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

У цьому прикладі ми маємо .span4і .span8, тобто 12 стовпців і повний рядок.

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

Перемістіть стовпці вправо за допомогою .offset*класів. Кожен клас збільшує ліве поле стовпця на цілий стовпець. Наприклад, .offset4переміщається .span4по чотирьох колонках.

4
3 зсув 2
3 зсув 1
3 зсув 2
6 зсув 3 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

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

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

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

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

Приклад живої рідинної сітки

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

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

Основна текуча сітка HTML

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

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

Компенсація рідини

Працює так само, як зміщення системи фіксованої сітки: додайте .offset*до будь-якого стовпця, щоб змістити стільки стовпців.

4
4 зсув 4
3 зсув 3
3 зсув 3
6 зсув 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

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

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

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

Макети

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

Забезпечує загальний макет із фіксованою шириною (і, за бажанням, адаптивний) лише з <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 у своєму проекті, додавши належний метатег і додаткову таблицю стилів у <head>свій документ. Якщо ви скомпілювали Bootstrap зі сторінки налаштування, вам потрібно лише включити мета-тег.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Голови вгору!Наразі Bootstrap не включає адаптивні функції за замовчуванням, оскільки не все має бути адаптивним. Замість того, щоб заохочувати розробників видалити цю функцію, ми вважаємо за краще вмикати її за потреби.

Про адаптивний Bootstrap

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

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

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

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

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

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

Мітка Ширина макета Ширина колонки Ширина ринви
Великий дисплей 1200 пікселів і більше 70 пікселів 30 пікселів
За замовчуванням 980 пікселів і більше 60 пікселів 20 пікселів
Таблички портретні 768px і вище 42 пікселів 20 пікселів
З телефонів на планшети 767px і нижче Рідкі колони, без фіксованої ширини
телефони 480 пікселів і нижче Рідкі колони, без фіксованої ширини 
  1. /* Великий робочий стіл */
  2. @media ( min - width : 1200px ) { ... }     
  3.  
  4. /* Книжкова орієнтація планшета на альбомну та робочий стіл */
  5. @media ( min - width : 768px ) і ( max - width : 979px ) { ... }        
  6.  
  7. /* Горизонтальна орієнтація телефону на планшетний ПК */
  8. @media ( max - width : 767px ) { ... }     
  9.  
  10. /* Альбом телефонів і вниз */
  11. @media ( max - width : 480px ) { ... }

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

Для швидшої розробки, адаптованої до мобільних пристроїв, використовуйте ці службові класи для показу та приховування вмісту на пристрої. Нижче наведено таблицю доступних класів і їх вплив на певний макет медіа-запиту (позначений пристроєм). Їх можна знайти в responsive.less.

Клас телефони767px і нижче Таблеткивід 979 пікселів до 768 пікселів Настільні комп'ютериЗа замовчуванням
.visible-phone Видно
.visible-tablet Видно
.visible-desktop Видно
.hidden-phone Видно Видно
.hidden-tablet Видно Видно
.hidden-desktop Видно Видно

Коли використовувати

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

Тестовий приклад адаптивних утиліт

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

Видно на...

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

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

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

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

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