Риштування · Twitter Bootstrap українською мовою

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

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

<!DOCTYPE html>
<html lang = "en" > 
  ...
</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 пікселів стовпці стають рухливими та складаються вертикально.

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

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

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

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

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

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

3 зсув 2

3 зсув 1

3 зсув 2

6 зсув 3

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

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

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

приклад

Тут два вкладені .span4стовпці розміщені в межах .span8.

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

Рівень 2

<div class = "row" > 
  <div class = "span9" > 
    Колонка 1 рівня
    <div class = "row" > 
      <div class = "span6" > Рівень 2 </div> 
      <div class = "span3" > Рівень 2 </div> 
    </div>
  </div>
</div>

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

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

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

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

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

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

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

4 зсув 4

3 зсув 3

6 зсув 6

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

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

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

Рідина 12

Рідина 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    1 рівень колонки
    <div class = "row-fluid" > 
      <div class = "span6" > Рівень 2 </div> 
      <div class = "span6" > Рівень 2 </div> 
    </div>
  </div>
</div>

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

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

Увімкнення адаптивних функцій

Увімкніть адаптивний CSS у своєму проекті, додавши належний метатег і додаткову таблицю стилів у <head>свій документ. Якщо ви скомпілювали Bootstrap зі сторінки налаштування, вам потрібно лише включити мета-тег.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Видно на...

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

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

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

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

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

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

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