Завантажити

У Bootstrap (наразі версія 3.3.7) є кілька простих способів швидко розпочати роботу, кожен із яких підходить для різного рівня навичок і варіантів використання. Прочитайте, щоб побачити, що відповідає вашим конкретним потребам.

Завантажувальний CDN

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

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Встановити за допомогою Bower

Ви також можете встановити Bootstrap Less, CSS, JavaScript і шрифти та керувати ними за допомогою Bower :

$ bower install bootstrap

Встановити за допомогою npm

Ви також можете встановити Bootstrap за допомогою npm :

$ npm install bootstrap@3

require('bootstrap')завантажить усі плагіни jQuery Bootstrap в об’єкт jQuery. Сам bootstrapмодуль нічого не експортує. Ви можете вручну завантажити плагіни jQuery Bootstrap окремо, завантаживши /js/*.jsфайли в каталог верхнього рівня пакета.

Bootstrap package.jsonмістить деякі додаткові метадані за такими ключами:

• less- шлях до основного вихідного файлу Less Bootstrap
• style- шлях до немініфікованого CSS Bootstrap, попередньо скомпільованого з використанням налаштувань за замовчуванням (без налаштування)

Встановити за допомогою Composer

Ви також можете встановити Bootstrap Less, CSS, JavaScript і шрифти та керувати ними за допомогою Composer :

$ composer require twbs/bootstrap

Для Less/Sass необхідний автопрефікс

Bootstrap використовує Autoprefixer для роботи з префіксами постачальників CSS . Якщо ви компілюєте Bootstrap із джерела Less/Sass і не використовуєте наш Gruntfile, вам потрібно буде самостійно інтегрувати Autoprefixer у процес збірки. Якщо ви використовуєте попередньо скомпільований Bootstrap або використовуєте наш Gruntfile, вам не потрібно турбуватися про це, оскільки Autoprefixer уже інтегровано в наш Gruntfile.

Що включено

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

Попередньо скомпільований Bootstrap

Після завантаження розархівуйте стиснуту папку, щоб побачити структуру (скомпільованого) Bootstrap. Ви побачите щось на зразок цього:

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

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

Вихідний код 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 для своєї системи збірки зі зручними методами роботи з фреймворком. Це те, як ми компілюємо наш код, запускаємо тести тощо.

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

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

grunt watch(Дивитися)

Переглядає вихідні файли Less і автоматично перекомпілює їх у CSS щоразу, коли ви зберігаєте зміни.

grunt test(Виконайте тести)

Запускає JSHint і запускає тести QUnit без голови в PhantomJS .

grunt docs(Створення та тестування ресурсів документів)

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

grunt(Створіть абсолютно все та запустіть тести)

Компілює та мінімізує CSS і JavaScript, створює веб-сайт документації, запускає валідатор HTML5 для документів, повторно генерує активи Customizer тощо. Потрібен Джекіл . Зазвичай це необхідно, лише якщо ви зламуєте сам Bootstrap.

Вирішення проблем

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

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

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

Скопіюйте наведений нижче 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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Приклади

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

Отримайте вихідний код для кожного прикладу нижче, завантаживши репозиторій Bootstrap . Приклади можна знайти в docs/examples/довіднику.

Використання каркаса

Початковий шаблон

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

Тема Bootstrap

Завантажте додаткову тему Bootstrap для покращеного візуального досвіду.

Сітки

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

Джамботрон

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

Вузький джамботрон

Створіть більш спеціальну сторінку, звузивши стандартний контейнер і jumbotron.

Навпаки в дії

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

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

Статична верхня панель навігації

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

Виправлена ​​панель навігації

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

Спеціальні компоненти

Обкладинка

Односторінковий шаблон для створення простих і красивих домашніх сторінок.

Карусель

Налаштуйте навігаційну панель і карусель, а потім додайте кілька нових компонентів.

Блог

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

Панель приладів

Базова структура інформаційної панелі адміністратора з фіксованою бічною та навігаційною панелями.

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

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

Виправдана нав

Створіть спеціальну панель навігації з вирівняними посиланнями. Голови вгору! Не надто зручне для Safari.

Клейкий колонтитул

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

Прикріплений нижній колонтитул із панеллю навігації

Прикріпіть нижній колонтитул до нижньої частини вікна перегляду з фіксованою панеллю навігації вгорі.

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

Не відповідає Bootstrap

Легко вимкніть реакцію Bootstrap згідно з нашими документами .

Без полотна

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

Інструменти

Bootlint

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

Спільнота

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

• Прочитайте та підпишіться на офіційний блог Bootstrap .
• Спілкуйтеся з іншими Bootstrappers за допомогою IRC на irc.freenode.netсервері в каналі ##bootstrap .
• Щоб отримати допомогу щодо використання Bootstrap, запитайте на StackOverflow за допомогою тегуtwitter-bootstrap-3 .
• Розробники повинні використовувати ключове слово bootstrapв пакетах, які змінюють або доповнюють функціональність Bootstrap під час розповсюдження через npm або подібні механізми доставки для максимальної видимості.
• Знайдіть надихаючі приклади того, як люди будують за допомогою Bootstrap на виставці Bootstrap Expo .

Ви також можете слідкувати за @getbootstrap у Twitter , щоб дізнаватися про останні плітки та дивовижні музичні відео.

Вимкнення відповіді

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

Кроки для відключення сторінки

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

Вам все одно знадобиться Respond.js для IE8 (оскільки наші медіа-запити все ще існують і потребують обробки). Це вимикає аспекти «мобільного сайту» Bootstrap.

Шаблон Bootstrap з вимкненою системою реагування

Ми застосували ці кроки до прикладу. Прочитайте його вихідний код, щоб побачити внесені конкретні зміни.

Перегляньте приклад невідповідної системи

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

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

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

Зокрема, ми підтримуємо останні версії наведених нижче браузерів і платформ.

Альтернативні браузери, які використовують останню версію WebKit, Blink або Gecko, безпосередньо чи через API веб-перегляду платформи, явно не підтримуються. Однак Bootstrap має (у більшості випадків) також правильно відображатися та працювати в цих браузерах. Нижче наведено більш точну інформацію про підтримку.

Мобільні пристрої

Загалом, Bootstrap підтримує найновіші версії браузерів за замовчуванням на кожній основній платформі. Зауважте, що проксі-браузери (наприклад, Opera Mini, режим Turbo Opera Mobile, UC Browser Mini, Amazon Silk) не підтримуються.

Настільні браузери

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

У Windows ми підтримуємо Internet Explorer 8-11 .

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

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

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

Internet Explorer 8 і 9

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

Перейдіть на сторінку Чи можу я використовувати... , щоб дізнатися більше про підтримку браузером функцій 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 .

Respond.js і@import

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

Internet Explorer 8 і зміна розміру коробки

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

Internet Explorer 8 і @font-face

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

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

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

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

Підтвердьте режим документа, відкривши інструменти налагодження: натисніть F12і відзначте «Режим документа».

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

Перегляньте це запитання StackOverflow, щоб отримати додаткові відомості.

Internet Explorer 10 у Windows 8 і Windows Phone 8

Internet Explorer 10 не розрізняє ширину пристрою від ширини вікна перегляду , і тому не правильно застосовує медіа-запити в CSS Bootstrap. Зазвичай ви просто додаєте короткий фрагмент CSS, щоб виправити це:

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

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

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

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
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 і Device-Width .

Як попередження, ми включили це в усю документацію та приклади Bootstrap як демонстрацію.

Відсоткове округлення Safari

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

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

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

Переповнення та прокручування

Підтримка overflow: hiddenелемента <body>досить обмежена в iOS і Android. З цією метою, коли ви прокручуєте верхню або нижню частину модального елемента в будь-якому з браузерів цих пристроїв, <body>вміст почне прокручуватися. Перегляньте помилку Chrome №175502 (виправлено в Chrome v40) і помилку WebKit №153852 .

Текстові поля iOS і прокрутка

Починаючи з iOS 9.3, коли модал відкритий, якщо перший дотик жесту прокручування знаходиться в межах тексту <input>або <textarea>, <body>вміст під модалом прокручуватиметься замість самого модалу. Перегляньте помилку WebKit №153856 .

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

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

Панель навігації, що випадає

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

Масштабування браузера

Масштабування сторінки неминуче створює артефакти візуалізації в деяких компонентах, як у Bootstrap, так і в решті Інтернету. Залежно від проблеми ми можемо її вирішити (спочатку здійсніть пошук, а потім за потреби відкрийте проблему). Однак ми схильні ігнорувати їх, оскільки вони часто не мають прямого рішення, окрім хакерських обхідних шляхів.

Sticky :hover/ :focusна мобільному

Незважаючи на те, що справжнє наведення неможливе на більшості сенсорних екранів, більшість мобільних браузерів емулюють підтримку наведення та роблять :hover«липким». Іншими словами, :hoverстилі починають застосовуватися після торкання елемента і припиняють застосовуватися лише після того, як користувач торкається іншого елемента. Це може спричинити небажане «зависання» станів Bootstrap у :hoverтаких браузерах. Деякі мобільні браузери також роблять :focusтак само липким. Наразі немає простого вирішення цих проблем, крім повного видалення таких стилів.

Друк

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

Зокрема, починаючи з Chrome v32 і незалежно від налаштувань полів, Chrome використовує ширину вікна перегляду, значно вужчу за фізичний розмір паперу, під час вирішення медіа-запитів під час друку веб-сторінки. Це може призвести до неочікуваної активації надзвичайно дрібної сітки Bootstrap під час друку. Перегляньте проблему №12078 і помилку Chrome №273306, щоб отримати деякі відомості. Запропоновані обхідні шляхи:

• Скористайтеся надзвичайно дрібною сіткою та переконайтеся, що ваша сторінка під нею виглядає прийнятно.
• Налаштуйте значення @screen-*змінних Less так, щоб ваш папір для принтера вважався більшим за дуже малий.
• Додайте спеціальні медіа-запити, щоб змінити контрольні точки розміру сітки лише для друкованих носіїв.

Крім того, починаючи з Safari версії 8.0, s фіксованої ширини .containerможе спричинити використання Safari надзвичайно малого розміру шрифту під час друку. Дивіться #14868 і помилку WebKit #138192 для отримання додаткової інформації. Одним із потенційних способів вирішення цієї проблеми є додавання наступного CSS:

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

Стандартний браузер Android

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

Виберіть меню

На <select>елементах стандартний браузер Android не відображатиме бічні елементи керування, якщо застосовано border-radiusта/або border. (Докладніше див. у цьому питанні StackOverflow .) Скористайтеся фрагментом коду нижче, щоб видалити образливий CSS і відобразити <select>елемент як елемент без стилю в стандартному веб-переглядачі Android. Сніффінг агента користувача дозволяє уникнути перешкод у браузерах 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, які ще не повністю стандартизовані, але вони використовуються виключно для прогресивного вдосконалення.

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

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

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

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

Розмір коробки

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

Залежно від контексту ви можете замінити за потреби (Варіант 1) або скинути розмір поля для цілих регіонів (Варіант 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via 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;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Доступність

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

Пропустити навігацію

Якщо ваша навігація містить багато посилань і розташована перед основним вмістом у DOM, додайте Skip to main contentпосилання перед навігацією (для простого пояснення перегляньте цю статтю проекту A11Y про пропуск навігаційних посилань ). Використання .sr-onlyкласу візуально приховає посилання пропуску, а .sr-only-focusableклас гарантує, що посилання стане видимим після фокусування (для зрячих користувачів клавіатури).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

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

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

Дізнайтеся більше на HTML CodeSniffer і AccessAbility від Penn State .

Кольоровий контраст

Наразі деякі комбінації кольорів за замовчуванням, доступні в Bootstrap (наприклад, різні стилізовані класи кнопок, деякі кольори підсвічування коду, що використовуються для базових блоків коду , допоміжний клас .bg-primary контекстного фону та колір посилання за замовчуванням при використанні на білому тлі) мають низький коефіцієнт контрастності (нижче рекомендованого співвідношення 4,5:1 ). Це може спричинити проблеми користувачам із слабким зором або дальтоніком. Ці кольори за замовчуванням може знадобитися змінити, щоб підвищити їх контрастність і розбірливість.

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

• Букмарклет "HTML Codesniffer" для виявлення проблем із доступністю
• Розширення Chrome Accessibility Developer Tools
• Аналізатор колірного контрасту
• Проект A11Y
• Документація зі спеціальних можливостей MDN

Поширені запитання щодо ліцензії

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

Це вимагає від вас:

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

Це дозволяє:

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

Він забороняє вам:

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

Це не вимагає від вас:

• Включіть вихідний код самого Bootstrap або будь-яких модифікацій, які ви могли внести в нього, у будь-який перерозподіл, який ви можете зібрати, який включає його
• Надішліть зміни, які ви вносите в Bootstrap, назад до проекту Bootstrap (хоча такий відгук заохочується)

Повну ліцензію Bootstrap можна знайти в репозиторії проекту для отримання додаткової інформації.

Переклади

Члени спільноти переклали документацію Bootstrap різними мовами. Жоден не підтримується офіційно, і вони не завжди можуть бути актуальними.

• Bootstrap 中文文档 (китайська)
• Bootstrap 3 中文手冊 (китайська (традиційна))
• Bootstrap på Dansk (датська)
• Bootstrap en Français (французька)
• Bootstrap auf Deutsch (німецька)
• Bootstrap in Italiano (італійська)
• Bootstrap 한국어 (корейська)
• Bootstrap em Português do Brasil (бразильська португальська)
• Bootstrap по-русски (рос.)
• Bootstrap en Español (іспанська)
• Türkçe Bootstrap (турецька)
• Bootstrap українською (укр.)
• Bootstrap bằng tiếng Việt (в’єтнамська)

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

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