1. Bootstrap
2. Bootstrap CDN
3. Установка за допомогою Bower
4. Встановити за допомогою npm
5. Встановити за допомогою Composer
6. Autoprefixer необхідних для Less / Sass
7. Збірник коду Bootstrap 3
8. Вихідний код Bootstrap
9. установка Grunt
10. Доступні команди Grunt
11. grunt watch (Лічильник)
12. grunt test (Виконати тести)
13. grunt docs (складання та перевірка документів активів)
14. grunt (Побудувати абсолютно все і запустити тести)
15. Пошук і усунення несправностей
16. Використання фреймверка
17. стартовий шаблон
18. теми Bootstrap
19. розмітки
20. Jumbotron
21. вузький Jumbotron
22. навігаційне меню
23. Статична навігаційне меню
24. Фіксована навігаційне меню
25. призначені для користувача компоненти
26. кришка
27. карусель
28. Блог
29. Панель приладів
30. сторінка входу
31. Вирівняне нав. меню
32. Липкий Нижній колонтитул
33. Липкий Нижній колонтитул навігації
34. експерименти
35. Off-полотно
36. Кроки для блокування адаптивного перегляду
37. Шаблон Bootstrap із заблокованої адаптивностью
38. підтримка браузерами
39. мобільних пристроїв
40. настільних браузерів
41. Internet Explorer 8 і 9
42. Internet Explorer 8 і Respond.js
43. Respond.js і крос-доменний CSS
44. Respond.js і file: //
45. Respond.js і @import
46. Internet Explorer 8 і box-sizing
47. Internet Explorer 8 і @ font-face
48. Режим сумісності з IE
49. Internet Explorer 10 на Windows 8 і Windows Phone 8
50. Процентне округлення в Safari
51. Модулі, navbars, і віртуальні клавіатури
52. Текстова полів iOS и прокрутки
53. Віртуальна клавіатура
54. Меню Навігації
55. браузерні масштабування
56. Лепкий: hover /: focus на мобільному
57. печатка
58. Android stock браузер
59. Select меню
60. валідатори

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

Bootstrap

Компіляція і мінімізований CSS, JavaScript, і шрифти. Немає документів або оригінальні вихідні файли не включені.

завантажити Bootstrap

Bootstrap CDN

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

<! - Остання компіляція і стислий CSS -> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384 -BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4u "crossorigin =" anonymous "> <! - Доповнення до теми -> <link rel =" stylesheet "href =" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css /bootstrap-theme.min.css "integrity =" sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl / Sp "crossorigin =" anonymous "> <! - Остання компіляція і стислий JavaScript -> <script src =" https://maxcdn.bootstrapcdn.com /bootstrap/3.3.7/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') завантажить все Bootstrap'и jQuery плагіни на об'єкт jQuery. На bootstrap сам модуль нічого не експортувати. Ви можете вручну завантажити Bootstrap'и jQuery плагіни індивідуально завантаження /js/*.js файли верхнього рівня пакета каталог.

Bootstrap'и package.json містить деякі додаткові метадані в наступних розділах:

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

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

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

$ Composer require twbs / bootstrap

Autoprefixer необхідних для Less / Sass

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

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

Збірник коду Bootstrap 3

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

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. *), А також її мінімізований варіант (bootstrap.min. *). CSS карти джерела (Bootstrap. *. Map) are available for use with certain browsers 'developer tools. Як додаткові опції тим 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. Крім того, будь-який інший включений файл забезпечує підтримку для пакетів, інформацію про ліцензії та розвитку.

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

установка Grunt

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

Then, from the command line:

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 (Лічильник)

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

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

запуск У jshint і the допомогою qunit тестів (автоматично) в допомоги phantomjs .

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

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

grunt (Побудувати абсолютно все і запустити тести)

Компіляції and мініфайли CSS and JavaScript, будує сайт документацій, запускає HTML5 валідатор проти документів, відновлює активи налагоджувальника, і багато іншого. вимагає Jekyll . Зазвичай це необхідно, тільки якщо ви зламали сам завантажувач 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"> <! - Вище 3 Мета-теги ** повинні прийти в першу чергу в голові; будь-який інший керівник контент * після * ці теги -> <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 -> <! - Попередження: Respond.js не працює при перегляді сторінки через файл: // -> <! - [if lt IE 9]> <script src = "https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"> </ script> <script src = "https://oss.maxcdn.com /respond/1.4.2/respond.min.js "> </ script> <! [endif] -> </ head> <body> <h1> Hello, world! </ H1> <! - на jQuery (необхідний для Bootstrap - х JavaScript плагіни) -> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min .js "> </ script> <! - Включають всі скомпільовані плагіни (нижче), або включати окремі файли в міру необхідності -> <script src =" js / bootstrap.min.js "> </ script> </ body> </ html>

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

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

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

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

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

теми Bootstrap

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

розмітки

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

Jumbotron

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

вузький Jumbotron

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

навігаційне меню

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

Статична навігаційне меню

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

Фіксована навігаційне меню

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

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

кришка

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

карусель

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

Блог

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

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

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

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

Шаблон користувальницької форми налаштований для простого входу на сайт.

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

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

Липкий Нижній колонтитул

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

Липкий Нижній колонтитул навігації

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

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

Off-полотно

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

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

Залишайтеся в курсі про розвиток Bootstrap і зверніться до товариства за корисні ресурси.

• Прочитайте і підпишіться на Офіційний Bootstrap Блог .
• Спілкуйтеся з іншими Bootstrapperамі за допомогою IRC в irc.freenode.net сервері irc.freenode.net.
• Для отримання довідки щодо використання Bootstrap, запитаєте на Сайті stackoverflow, використовуючи тег twitter-bootstrap-3 .
• Розробники повинні використовувати ключове слово bootstrap на пакети, які змінюють або додають функціональність Bootstrap при поширенні через npm або аналогічних механізмів доставки для максимального виявлення.
• Знайти надихаючі приклади людей, які будують з Bootstrap на Bootstrap Експо .

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

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

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

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

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

Шаблон Bootstrap із заблокованої адаптивностью

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

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

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

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

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

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

мобільних пристроїв

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

Chrome У Firefox Safari Android Supported Supported N / A iOS Supported Supported Supported

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

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

Chrome У Firefox Internet Explorer Opera Safari Mac Supported Supported N / A Supported Supported Windows Supported Supported Supported Supported Not supported

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

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

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

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

Internet Explorer 8 і 9

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

Властивість Інтернет Експлорер 8 Інтернет Експлорер 9 border-radius Not supported Supported box-shadow Not supported Supported transform Not supported Supported, with -ms prefix transition Not supported placeholder Not supported

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

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

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

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

Підтвердіть режим документа, відкривши засоби налагодження: натисніть Ф12 і перевірте "Document Mode".

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

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

Internet Explorer 10 на Windows 8 і Windows Phone 8

Інтернет Експлорер 10 Нехай не відрізнити ширину пристрою з ширини вікна перегляду, і, отже, неправильно застосовувати на медіа запити в CSS Bootstrap. Як правило, ви б просто додати швидкий фрагмент CSS до виправлення:

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

Однак, це не працює для пристроїв, що працюють під управлінням Windows Phone 8 версій старше, оскільки це викликає такі пристрої, щоб головним чином показати основний робочий стіл замість вузького "phone" view. Для вирішення цієї проблеми вам необхідно включати наступні CSS і JavaScript, щоб обійти помилку.

@ -Ms-viewport {width: device-width; } @ -O-viewport {width: device-width; } @Viewport {width: device-width; } // Авторських 2014-2015 Twitter, Увімкнути. // Ліцензованих відповідно до MIT (https://github.com/twbs/bootstrap/blob/master/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 В8.0 були деякі проблеми з кількістю десяткових знаків, використовуваних в нашому .col - * - 1 грід класів. Так що якщо у вас 12 індивідуальний грід стовпці, Ви помітите, що вони придумали короткі в порівнянні з іншими рядами колон. Крім оновлення сафарі на iOS, у вас є кілька варіантів рішень:

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

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

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

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

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

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

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

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

Меню Навігації

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

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

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

Лепкий: hover /: focus на мобільному

Хоча реально ширяє неможливо на більшості сенсорних екранів, більшість мобільних браузерів наслідувати зависання підтримка і зробити: hover "Липки". Іншими словами,: hover стилі почати застосовувати після натискання елемента і припинити застосовувати тільки після того, як користувач натискає деякі інші елементи. Це може привести до Bootstrap'и: hover стану стати надмірно "застряг" на таких браузерах. Деякі мобільні браузери також зробити: focus аналогічно липкий. В даний час немає простого рішення таких питань, крім видалення повністю такі стилі.

печатка

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

Зокрема, в Chrome v32 і незалежно від відступ параметри, хром використовує ширину області перегляду значно менше, ніж Фізичний розмір паперу при вирішенні медіа запити при друку веб-сторінки. Це може привести до Bootstrap'и дуже маленький грід час несподівано активується при друку. Дивись випуск # 12078 и Хром помилка # 273306 для деяких деталей. Запропоновані способи:

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

Також, як Сафарі і v8.0, фіксованої ширини .container може викликати Сафарі використовувати надзвичайно маленький розмір шрифту при друку. Див. # 14868 и У WebKit помилка # 138192 Для більш докладної інформації. Одним з можливих обійти це, додавши наступні CSS:

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

Android stock браузер

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

Select меню

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

валідатори

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

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

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