Візміть собі необхідне

Bootstrap v3.3.2 має кілька простих стартових варіантів, кожен з яких цікавий в залежності від рівня досвіду та конкретної потреби використання. Прогляньте що підходить найкраще саме вам.

Bootstrap

Зібрані та мінімізовані CSS, JavaScript, та шрифти. Без документів чи оригінальних сирцевих файлів.


Скачати Bootstrap

Сирцевий код

Сирцеві Less, JavaScript, та файли шрифтів, а також наші доки. Less потрібно ще збирати, плюс - дещо доставляти.

Скачати Сирці

Sass

Bootstrap перейшов від Less до Sass, для легкого включення в проекти Rails, Compass, або чистий Sass.


Скачати Sass

Bootstrap CDN

Люди з MaxCDN люб'язно надали підтримку CDN для Bootstrap CSS та JavaScript. Просто використовуйте ці лінки Bootstrap CDN.

<!-- Свіжа збірка мінімізованих CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Додаткові теми -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Свіжа збірка мінімізованої JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Встановлення через Bower

Щоб встановити та керувати стилями Bootstrap, JavaScript, та їх документацією використовуйте Bower.

$ bower install bootstrap

Що включено в матеріали для скачування

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

Необхідність в jQuery

Будь-ласка майте на увазі, що всі JavaScript плагіни потребують підключення jQuery, прогляньте як це зроблено в стартовому шаблоні. У файлі bower.json можна побачити які версії jQuery підтримуються.

Готова збірка

Якщо ви скористались лінком "Скачати Bootstrap", то структура скачаного пакета після розархівації є приблизно такою:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

Це є найбільш базова форма Bootstrap – тут зібрані файли для їх швидкої вставки в будь-який веб-проект. Ми надаємо збірку CSS та JS (bootstrap.*), а також її мінімізований варіант (bootstrap.min.*). Як додаткові опції тем Bootstrap – також надаються шрифти з Glyphicons.

Сирцевий код Bootstrap

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

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

В каталоги less/, js/, та fonts/ вміщено сирцевий код для наших CSS, JS, та шрифтів (відповідно). Каталог dist/ вміщує весь список з верхньої секції завантаження в прекомпільованому вигляді (готовому до використання, на відміну від сирцевого коду). Каталог docs/ вміщує сирцевий код для нашої документації, а в examples/ показані приклади використання Bootstrap. Решта файлів призначена для підтримки самого пакета (де вони знаходяться) в актуальному стані, інформацію ліцензування, та інші матеріали для розробки.

Компіляція CSS та JavaScript

Bootstrap використовує Grunt для побудови самої системи (Bootstrap), разом зі зручними методами для роботи з фреймворком. Це стосується збірки нашого коду, запуску тестів для нього та інше.

Встановлення Grunt

Щоб встановити Grunt, вам потрібно спочатку скачати та встановити node.js (куди входить і npm). npm поставляється для пакетів модулів node, та забезпечує спосіб управління залежностями при розробці через node.js.

Далі, з командного рядка:
  1. Встановіть grunt-cli глобально, для цього запустіть npm install -g grunt-cli.
  2. Перейдіть в корінь каталога /bootstrap/, та запустіть npm install. npm буде дивитись у файл package.json та автоматично встановлювати необхідні локальні залежності, які там зазначені.

Коли завершите, вам будуть доступні для запуску ряд команд Grunt з командного рядка.

Доступні команди Grunt

grunt dist (Збирає CSS та JavaScript)

Вміст каталогу /dist/ перезаписується вже зібраними та мінімізованими файлами CSS та JavaScript. Користувачі Bootstrap, частіше за все, використовують саме цю команду, щоб отримати готові CSS та JavaScript.

grunt watch (Перевіряє зміни)

Перевіряє сирцеві файли Less та, при наявності змін, автоматично перезбирає CSS.

grunt test (Запускає тести)

Запускає JSHint та довільні тести QUnit в PhantomJS.

grunt docs (Будує та тестує активи доків)

Будує та тестує CSS, JavaScript, та інші активи, які використовуються при локальному запуску документації через jekyll serve.

grunt (Будує абсолютно все та запускає тести)

Збирає та мінімізує CSS і JavaScript, будує матеріали для сайта документації, запускає перевірку на відповідність документації відносно HTML5, перестворює активи для Компонувальника (Customizer), і т.д. Потребує Jekyll. Зазвичай ця команда запускається тільки якщо ви займаєтесь власною розробкою Bootstrap.

Налагодження

Якщо у вас виникли проблеми зі встановлення залежностей чи запуском команд Grunt, найперше - видаліть директорію /node_modules/ згенеровану через npm. Потім, перезапустіть npm install.

Базовий шаблон

Можна почати з цього базового шаблону, або ж скористатись прикладами наведеними нижче підлаштувавши їх під власні потреби.

Нижче надано HTML-код, який використовує мінімізовану версію Bootstrap-документа.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Шаблон</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Вставка HTML5 поєднується з Respond.js для підтримки в IE8 елементів HTML5 та медіа-запитів -->
    <!-- ЗАСТЕРЕЖЕННЯ: файл Respond.js не працює, якщо ви проглядаєте сторінку відкривши її з файлової системи -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Привіт, світ!</h1>

    <!-- jQuery (потрібно для JavaScript плагінів Bootstrap) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Підключення мінімізованої збірки всіх плагінів jQuery. Можна підключати додаткові плагіни, якщо потрібно -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Приклади

На базі шаблона, що надано вище, Bootstrap створює багато компонентів. Ми заохочуємо вас, щоб підбирали та адаптували Bootstrap під ваші власні проекти.

Використання фреймворка

Стартовий шаблон

Нічого окрім базового: збірка CSS, JavaScript, та використано контейнер.

Теми Bootstrap

Налаштуйте теми Bootstrap щоб урізноманітнити вигляд сторінок.

Сітки

Декілька прикладів макетів сітки з усіма чотирма рівнями вкладеності та інше.

Великий екран

Шаблон з великим екраном, навпанеллю та кількома колонками сітки.

Вузький екран

Створіть більш персоналізовані сторінки через звуження контейнера та великого екрана.

Навігаційна панель в дії

Навігаційна панель

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

Статична навігаційна панель

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

Фіксована навігаційна панель

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

Підбірка компонентів

Cover

Односторінковий шаблон для побудови простої та гарної домашньої сторінки.

Карусель

Поєднання в шаблоні навпанелі та каруселі, з додаванням деяких нових компонентів.

Блог

Простий шаблон блогу на дві колонки з підібраною навігацією, заголовком, та типом.

Панель керування

Базова структура для адмінської панелі керування з фіксованою навпанеллю.

Сторінка входу

Шаблон сторінки з формою для входу на сайт.

Вирівняне навменю

Створення компонованої навпанелі з широкими лінками. Увага! Не дуже дружить з Safari.

Закріплений колонтитул

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

Закріплений колонтитул з навменю

Прикріплено колонтитул у нижню частину браузера, з навменю у верхній частині.

Експерименти

Нечутливий Bootstrap

Легко вимкнути чутливість Bootstrap читайте доки.

Offcanvas

Створення навігаційного off-canvas меню з можливістю перемикання для Bootstrap.

Інструменти

Bootlint

Bootlint це офіційний інструмент Bootstrap HTML linter. Він автоматично та в достатньо "правильний" спосіб робить перевірку на наявність ряду відомих HTML-помилок на сторінках, що використовуються Bootstrap. Компоненти чи віджети Vanilla Bootstrap вимагають щоб їхні частини DOM відповідали певній структурі. Bootlint перевіряє, що компоненти Bootstrap мають коректну структуру HTML. Розгляньте можливість додати Bootlint до інструментів веб-розробки Bootstrap, щоб жодна із відомих помилок не сповільнювала розробку вашого проекта.

Спільнота

Дізнавайтесь про розробку Bootstrap та звертайтесь до його спільноти за допомогою цих корисних ресурсів.

Ви також можете підписатись на @twbootstrap on Twitter щоб знати про останні плітки та захоплююче музикальне відео.

Блокування чутливості

Bootstrap автоматично адаптує перегляд сторінок під декілька розмірів екранів. Тут показано як заблокувати таку можливість, щоб сторінки відображались як в цьому нечутливому шаблоні.

Кроки для блокування чутливості сторінок

  1. Не створюйте атрибутів viewport в межах тега <meta> , як про це і говориться в документації CSS
  2. Скасуйте width в .container для кожного рівня сітки певної ширини, наприклад так width: 970px !important; Переконайтеся, що цей код йде після включення основного коду CSS Bootstrap. При бажанні можна пропустити !important за допомогою медіа-запитів або спеціального селектора.
  3. Якщо ви використовуєте навігаційну панель, то повидаляйте з неї всі меню, які можуть згортатись/розгортатись.
  4. Для макету сітки використовуйте класи .col-xs-* на додаток або замість класів medium/large. Не хвилюйтесь, сітка з класом xs (extra-small) масштабується для всіх розмірів екранів.

Для IE8 вам все ще потрібен Respond.js (оскільки ми продовжуємо використовувати медіа-запити, а тому вони повинні оброблятись). Це заблокує аспект "мобільність сайту" в Bootstrap.

Шаблон Bootstrap із заблокованою чутливістю

Наведені вище кроки ми застосували в нашому прикладі шаблона. Прогляньте сирцевий код, щоб побачити специфічні відмінності.

Проглянути приклад нечутливого шаблона

Міграція з версії 2.x до 3.x

Шукаєте інформацію для міграції зі старих версій Bootstrap на версію v3.x? Прогляньте наш посібник по міграції.

Підтримка браузерів та пристроїв

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

Підтримка браузерів

Зокрема, ми підтримуємо останні версії браузерів та платформ, які показані в таблиці нижче. На Windows ми підтримуємо Internet Explorer 8-11.

Chrome Firefox Internet Explorer Opera Safari
Android Підтримується Підтримується N/A Не підтримується N/A
iOS Підтримується N/A Не підтримується Підтримується
Mac OS X Підтримується Підтримується Підтримується Підтримується
Windows Підтримується Підтримується Підтримується Підтримується Не підтримується

Елементи Bootstrap повинні досить добре виглядати та поводитись в Chromium та Chrome для Linux, Firefox для Linux, та Internet Explorer 7, хоча ці браузери підтримуються не офіційно.

Щоб побачити список деяких неполадок пов'язаних з браузерами, які намагається вирішити Bootstrap, прогляньте нашу Таблицю з неполадками браузерів.

Internet Explorer 8 та 9

Internet Explorer 8 та 9 також підтримуються, однак пам'ятайте, що деякі властивості CSS3 та елементи HTML5 не в повній мірі підтримуються даними браузерами. Крім того, Internet Explorer 8 потребує використання Respond.js щоб дозволити підтримку медіа запитів.

Можливість Internet Explorer 8 Internet Explorer 9
border-radius Не підтримується Підтримується
box-shadow Не підтримується Підтримується
transform Не підтримується Підтримується з префіксом -ms
transition Не підтримується
placeholder Не підтримується

Відвідайте Чи можу я використовувати... для більш детального ознайомлення про те, які властивості CSS3 та HTML5 підтримуються різними браузерами.

Internet Explorer 8 та Respond.js

Візміть до уваги наступні застереження при використанні Respond.js у вашому середовищі для розробки чи в робочому середовищі для Internet Explorer 8.

Міждоменне зберігання Respond.js та CSS

Якщо ви зберігаєте Respond.js і CSS на різних (суб)доменах (наприклад, на CDN) – це вимагає деяких додаткових установок. Ознайомтесь з документацією Respond.js для уточнень.

Respond.js та file://

Через правила безпеки браузера, Respond.js не працює при перегляді через протокол file:// (наприклад коли ви відкриваєте HTML файл локально). Щоб протестувати налаштування чутливості в IE8, проглядайте ваші сторінки через HTTP(S). Ознайомтесь з документацією для уточнень.

Respond.js та @import

Respond.js не працює з CSS, на які посилаються через @import. Зокрема, деякі конфігурації Drupal, як відомо, використовують @import. Ознайомтесь з документацією для уточнень.

Internet Explorer 8 та box-sizing

IE8 не в повній мірі підтримує box-sizing: border-box; при комбінуванні з min-width, max-width, min-height, чи max-height. З цієї причини, починаючи з v3.0.1, ми більше не підтримуємо max-width в .container.

Internet Explorer 8 та @font-face

IE8 має деякі проблеми з @font-face при поєднанні з :before. Bootstrap використовує цю комбінацію з Glyphicons. Якщо сторінку закешовано та вона завантажується без маніпуляцій мишкою (напр. натиснули кнопку "оновити" чи завантажуєте щось у iframe), то сторінка відображатиметься ще до завантаження шрифтів. Якщо поводити мишкою над сторінкою (над body), то будуть показуватись деякі літери, і якщо поводити над рештою значків, то і вони будуть відображатись. Див. неполадку #13863 для уточнень.

Режим сумісності з IE

Bootstrap не підтримує режим сумісності в старих версіях Internet Explorer. Щоб бути впевненим, що ви використовуєте останню версію такого режиму для IE, прогляньте чи включений відповідний тег <meta> на вашій сторінці:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Щоб переконатись що даний режим сумісності підключено, відкрийте інструменти налагодження: натисніть F12 та перевірте "Document Mode" (Режим Документа).

Цей тег включено у всі сторінки документації та прикладів для забезпечення найкраще-можливого відображення в кожній з версій Internet Explorer.

Прогляньте це питання на StackOverflow для уточнень.

Internet Explorer 10 у Windows 8 та Windows Phone 8

Internet Explorer 10 не відрізняє device width від viewport width і, таким чином, не правильно застосовує медіа-запити в Bootstrap CSS. Як правило, це можна швидко полагодити додавши наступний код CSS:

@-ms-viewport       { width: device-width; }

Однак це не працює на пристроях з Windows Phone 8 до Оновлення 3 (також відоме як GDR3), де відображається загальний вигляд робочого столу, замість вузької області перегляду "для телефону". Щоб вирішити дану проблему вам необхідно включити наступний код CSS та JavaScript, допоки Microsoft не полагодить це.

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Для отримання додаткової інформації та керівництва з використання, прогляньте Windows Phone 8 and Device-Width.

Щоб привернути увагу, ми включили це в якості прикладів в документації Bootstrap.

Заокруглення процентів в Safari

У версіях Safari v7.1 для OS X та Safari для iOS v8.0, при використанні класу сітки .col-*-1, рушій Safari має деякі проблеми з кількістю десяткових знаків. Тобто якщо ви маєте 12 окремих колонок сітки, ви помітите, що вони будуть коротшими в порівнянні з іншими рядками колонок. Окрім оновлення Safari/iOS, ви можете обійти це двома способами:

  • Або додайте .pull-right до вашої останньої колонки в сітці, щоб отримати жорстке вирівнювання по правому краю
  • Або змініть проценти вручну, щоб отримати ідеальне округлення для Safari (більш складно, ніж у першому варіанті)

Ми будемо слідкувати за цією проблемою, і якщо буде більш просте рішення, то оновимо наш код.

Модалі, навпанелі, та віртуальні клавіатури

Overflow та scrolling

Підтримка overflow: hidden для елемента <body> є досить обмеженою в iOS та Android. У браузері цих пристроїв, при прокруткі за межі верхньої або нижньої модальної частини, починає прокручуватись вміст в <body>.

Віртуальна клавіатура

Також зауважте – якщо ви використовуєте форму вводу в модальному вікні – iOS має помилку відображення, через яку не оновлюється позиція фіксованих елементів при виклику віртуальної клавіатури. Існують деякі обхідні шляхи для цього, у тому числі – трансформуйте елементи через position: absolute або, при виявленні фокуса на елементі, викликайте таймер (щоб збільшити час відображення) і намагайтесь виправити це вручну. Bootstrap не обробляє такі помилки, отже вам потрібно самим це вирішити.

Навігаційне спадне меню

Елемент .dropdown-backdrop не використовується на iOS в навігації через складність z-indexing. Отже, щоб зкрити dropdowns в навігаційному меню, потрібно безпосередньо клікнути елемент dropdown (чи будь-який інший елемент, який буде спрацьовувати при події кліка в iOS).

Підтримка масштабування браузерами

При зміні розміру сторінки, неминуче виявляється некоректне відображення деяких елементів: це стосується і Bootstrap, і решти веб-документа. В залежності від конкретного випадку, ми можемо виправити це (при потребі ви можете відкрити відповідний запит, але спочатку необхідно пошукати чи немає аналогічних запитів). Хоча, як правило, ми ігноруємо їх, оскільки вони часто не мають прямого вирішення, окрім створення обхідних шляхів у вигляді хаків (hacky).

Друк

Навіть в деяких сучасних браузерах, друк може бути химерним.

Зокрема, у Chrome v32 при видачі вмісту вебсторінки для друку, незалежно від налаштування полів, використовується ширина оглядового вікна значно вужча, ніж фізичний розмір паперу. В результаті, в Bootstrap сітка з класом xs (extra-small) несподівано активізується під час друку. Див. неполадку #12078 для уточнень. В зв'язку з цим пропонуємо наступні варіанти вирішення:

  • Обгорніть сітку в клас xs (extra-small) та переконайтесь, що після цього сторінка має прийнятний вигляд.
  • Підберіть значення для Less-змінної @screen-* так, щоб зображення при друку на папері було більше, ніж extra-small.
  • Підберіть відповідні медіа-запити для зміни розміру сітки, коли потрібно роздруковувати сторінку.

Also, as of Safari v8.0, fixed-width .containers can cause Safari to use an unusually small font size when printing. See #14868 for more details. One potential workaround for this is adding the following CSS:

@media print {
  .container {
    width: auto;
  }
}

Початковий браузер в Android

Прямо з коробки, Android 4.1 (та навіть з деякими оновленнями) має застосунок з назвою Browser (а не Chrome) в якості початкового браузера. Нажаль, він має безліч помилок та невідповідностей стосовно CSS.

Меню select

Згаданий вище браузер в Android, для елемента <select>, не відображає відповідних пунктів, якщо застосовуються CSS-властивості border-radius та/або border. (Див. це питання на StackOverflow для уточнень.) Використовуйте наданий нижче код, щоб видалити відповідні CSS-властивості та показувати <select> як елемент без стилів. Перевірка user agent дозволяє уникати застосування цього коду до браузерів Chrome, Safari, та Mozilla.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Хочете проглянути приклад? Огляньте це JS Bin демо.

Попередні перевірки

Для того, щоб забезпечити краще-можливу роботу зі старими та глючними браузерами, Bootstrap використовує браузерні CSS-хаки в певних місцях, призначених спеціально для CSS, щоб в конкретній версії браузера можна було обійти відповідну його неполадку. Ці хаки, зі зрозумілих причин, спричиняють попередження про неполадку від CSS-валідаторів. В декількох місцях, ми також використовуємо CSS-функціональність bleeding-edge, яку ще не повністю стандартизовано, але вона використовується чисто для прогресивного покращення.

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

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

Підтримка третіх сторін

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

Box-sizing

Деяке стороннє програмне забезпечення, включно з Google Maps та Google Custom Search Engine, конфліктують з Bootstrap через * { box-sizing: border-box; }, тобто правило, котре створює padding (відступи) в підсумку не впливає на ширину елемента. Дізнайтесь більше про це, перейшовши на сторінку box model and sizing at CSS Tricks.

В залежності від контекста, ви можете перевизначити box-sizing лише там, де це необхідно (Варіант 1), або скинути його для цілих областей (Варіант 2).

/* Скидання box-sizing
 *
 * Можна робити скидання на окремому елементі або ж перевизначити область для уникнення конфлікту через
 * глобальне налаштування блочної моделі Bootstrap. Обидва варіанти: індивідуальне перевизначення та
 * скидання – є доступними у вигляді простого CSS та некомпільованого LESS формату.
 */

/* Варіант 1A: Перевизначення окремого елемента блочної моделі через CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Варіант 1B: Перевизначення окремого елемента блочної моделі використовуючи Bootstrap LESS mixin */
.element {
  .box-sizing(content-box);
}

/* Варіант 2A: Скидання цілої області за допомогою CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Варіант 2B: Скидання цілої області за допомогою налаштування LESS mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Доступність

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

Пропуск навігації

Якщо ваше навігаційне меню має багато лінків та знаходиться перед головним вмістом в DOM, додайте лінк Skip to main content безпосередньо після тега <body>. (прочитайте чому)

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  <div class="container" id="content">
    Головний вміст сторінки.
  </div>
</body>

Вкладені заголовки

При вкладанні заголовків (<h1> - <h6>), ваш основний заголовок документа повинен бути <h1>. Наступні заголовки повинні логічно вибудовуватись використовуючи <h2> - <h6> щоб програма, яка зчитує заголовки, могла сконструювати зміст сторінки.

Дізнатесь більше про HTML CodeSniffer та Penn State's AccessAbility.

Color contrast

Currently, some of the default color combinations available in Bootstrap (such as the various styled button classes, some of the code highlighting colors used for basic code blocks, the .bg-primary contextual background helper class, and the default link color when used on a white background) have a low contrast ratio (below the recommended ratio of 4.5:1). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.

Додаткові ресурси

Часті Питання про ліцензування

Bootstrap поставляється під ліцензією MIT та з правом власності Twitter 2015. Зведена до менших частин, вона може бути описана наступними умовами.

Вона вимагає:

  • Включати згадку у ваших роботах про ліцензію та право власності

Вона дозволяє:

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

Вона забороняє:

  • Hold the authors and license owners liable for damages as Bootstrap is provided without warranty
  • Hold the creators or copyright holders of Bootstrap liable
  • Redistribute any piece of Bootstrap without proper attribution
  • Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution
  • Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question

Вона не вимагає:

  • Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
  • Відправляти зміни, що ви внесли, до Bootstrap для демонстрації в проекті Bootstrap (хоча зворотній зв'язок заохочується)

Повна версія ліцензії Bootstrap розміщується в проекті репозиторію.

Повідомлення про помилку

Знайшли помилку в українському перекладі Bootstrap?

Не соромтесь повідомити про це:

  • найпростіше - виділяєте текст помилки і натискаєте Ctrl+Enter
  • або ж - якщо помилка неявна, складна, чи може й не помилка, а просто треба краще сформулювати речення - можна зареєструватись на нашому форумі docs.org.ua, та викласти своє бачення кращого перекладу в спеціальній темі.