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 Boilerplate .

Нове скидання все ще можна знайти в 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 стовпців , які відображаються з шириною 724 пікселів, 940 пікселів (за замовчуванням без адаптивного CSS) і 1170 пікселів. Нижче вікон перегляду 767 пікселів стовпці стають плавними та розташовуються вертикально.

  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 = "span6" > 
  3.     Колонка 1 рівня
  4.     <div class = "row" > 
  5.       <div class = "span3" > Рівень 2 </div> 
  6.       <div class = "span3" > Рівень 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" >

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

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 : 767px ) { ... }     
  6.  
  7.   /* Книжкова орієнтація планшета на альбомну та робочий стіл */
  8.   @media ( min - width : 768px ) і ( max - width : 979px ) { ... }        
  9.  
  10.   /* Великий робочий стіл */
  11.   @media ( min - width : 1200px ) { ... }

Чуйні корисні класи

Хто вони

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

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

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

Наприклад, ви можете відображати <select>елемент для навігації на мобільних макетах, але не на планшетах чи настільних комп’ютерах.

Допоміжні заняття

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

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

Тестовий випадок

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

Видно на...

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

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

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

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

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