ознакомление

  1. Bootstrap
  2. Bootstrap CDN
  3. Установка по Bower
  4. Необходимость в jQuery
  5. готова сборник
  6. Исходный код Bootstrap
  7. установление Grunt
  8. Доступные команды Grunt
  9. grunt watch (Проверяет изменения)
  10. grunt test (Запускает тесты)
  11. grunt docs (строит и тестирует активы доков)
  12. grunt (строит абсолютно все и запускает тесты)
  13. налаживание
  14. Использование фреймворка
  15. стартовый шаблон
  16. темы Bootstrap
  17. сетки
  18. большой экран
  19. узкий экран
  20. навигационная панель
  21. Статическая навигационная панель
  22. Фиксированная навигационная панель
  23. подборка компонентов
  24. Cover
  25. карусель
  26. Блог
  27. панель управления
  28. страница входа
  29. закрепленный колонтитул
  30. Закрепленный колонтитул с навменю
  31. эксперименты
  32. Offcanvas
  33. Шаги для блокировки чувствительности страниц
  34. Шаблон Bootstrap с заблокированной чувствительностью
  35. поддержка браузеров
  36. Internet Explorer 8 и 9
  37. Internet Explorer 8 и Respond.js
  38. Междоменной хранения Respond.js и CSS
  39. Respond.js и file: //
  40. Respond.js и @import
  41. Internet Explorer 8 и box-sizing
  42. Internet Explorer 8 и @ font-face
  43. Режим совместимости с IE
  44. Internet Explorer 10 в Windows 8 и Windows Phone 8
  45. Закругления процентов в Safari
  46. Модал, навпанели, и виртуальные клавиатуры
  47. виртуальная клавиатура
  48. Навигационное раскрывающемся меню
  49. Поддержка масштабирования браузерами
  50. печать
  51. Начальный браузер в Android
  52. Меню select
  53. предварительные проверки

Bootstrap v3.3.2 имеет несколько простых стартовых вариантов, каждый из которых интересен в зависимости от уровня опыта и конкретной потребности использования. Смотрите что подходит лучше именно вам.

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

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 под ваши собственные проекты.

Использование фреймворка

Bootstrap v3

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

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

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

темы Bootstrap

Настройте темы Bootstrap чтобы разнообразить вид страниц.

Настройте темы Bootstrap чтобы разнообразить вид страниц

сетки

Несколько примеров макетов сетки со всеми четырьмя уровнями вложенности и прочее.

Несколько примеров макетов сетки со всеми четырьмя уровнями вложенности и прочее

большой экран

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

Шаблон с большим экраном, навпанеллю и несколькими колонками сетки

узкий экран

Создайте более персонализированные страницы из-за сужения контейнера и большого экрана.

Создайте более персонализированные страницы из-за сужения контейнера и большого экрана

навигационная панель

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

Очень базовый шаблон, который включает навигационную панель вместе с дополнительным содержанием

Статическая навигационная панель

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

Очень базовый шаблон, который включает навигационную панель вместе с дополнительным содержанием

Фиксированная навигационная панель

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

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

Cover

Одностраничный шаблон для построения простой и хорошей домашней страницы.

Одностраничный шаблон для построения простой и хорошей домашней страницы

карусель

Сочетание в шаблоне навпанели и карусели, с добавлением некоторых новых компонентов.

Сочетание в шаблоне навпанели и карусели, с добавлением некоторых новых компонентов

Блог

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

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

панель управления

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

Базовая структура для админской панели управления с фиксированной навпанеллю

страница входа

Шаблон страницы с формой для входа на сайт.

Шаблон страницы с формой для входа на сайт

закрепленный колонтитул

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

Закрепление колонтитула в нижней части браузера для случая, когда высота контента сама по себе не делает этого

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

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

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

Offcanvas

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

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 с заблокированной чувствительностью

Приведенные выше шаги мы применили в нашем примере шаблона. Смотрите исходный код, чтобы увидеть специфические отличия.

Просмотреть пример нечувствительного шаблона

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 .