Начиная
Обзор Bootstrap, способы загрузки и использования, основные шаблоны и примеры и многое другое.
Обзор Bootstrap, способы загрузки и использования, основные шаблоны и примеры и многое другое.
Bootstrap (в настоящее время версия 3.3.7) имеет несколько простых способов быстрого начала работы, каждый из которых подходит для разных уровней навыков и вариантов использования. Прочитайте, чтобы увидеть, что соответствует вашим конкретным потребностям.
Скомпилированные и минимизированные CSS, JavaScript и шрифты. Никакие документы или оригинальные исходные файлы не включены.
Source Less, JavaScript и файлы шрифтов, а также наши документы. Требуется компилятор Less и некоторые настройки.
Bootstrap перенесен с Less на Sass для удобства включения в проекты Rails, Compass или только для Sass.
Ребята из jsDelivr любезно предоставляют поддержку CDN для CSS и JavaScript Bootstrap. Просто используйте эти ссылки Bootstrap CDN .
Вы также можете установить и управлять Bootstrap Less, CSS, JavaScript и шрифтами с помощью Bower :
Вы также можете установить Bootstrap с помощью npm :
require('bootstrap')
загрузит все плагины Bootstrap jQuery в объект jQuery. Сам bootstrap
модуль ничего не экспортирует. Вы можете вручную загрузить плагины Bootstrap jQuery по отдельности, загрузив /js/*.js
файлы в каталог верхнего уровня пакета.
Bootstrap package.json
содержит некоторые дополнительные метаданные в следующих ключах:
less
- путь к основному исходному файлу Bootstrap Lessstyle
- путь к неминифицированному CSS Bootstrap, который был предварительно скомпилирован с использованием настроек по умолчанию (без настройки)Вы также можете установить и управлять Bootstrap Less, CSS, JavaScript и шрифтами с помощью Composer :
Bootstrap использует Autoprefixer для работы с префиксами поставщиков CSS . Если вы компилируете Bootstrap из исходного кода Less/Sass и не используете наш Gruntfile, вам нужно самостоятельно интегрировать Autoprefixer в процесс сборки. Если вы используете предварительно скомпилированный Bootstrap или используете наш Gruntfile, вам не нужно об этом беспокоиться, поскольку Autoprefixer уже интегрирован в наш Gruntfile.
Bootstrap можно загрузить в двух формах, в которых вы найдете следующие каталоги и файлы, логически сгруппированные общие ресурсы и предоставляющие как скомпилированные, так и минимизированные варианты.
Обратите внимание, что все подключаемые модули JavaScript требуют включения jQuery, как показано в начальном шаблоне . Проконсультируйтесь с намиbower.json
, чтобы узнать, какие версии jQuery поддерживаются.
После загрузки разархивируйте сжатую папку, чтобы увидеть структуру (скомпилированного) Bootstrap. Вы увидите что-то вроде этого:
Это самая основная форма Bootstrap: предварительно скомпилированные файлы для быстрого использования практически в любом веб-проекте. Мы предоставляем скомпилированные CSS и JS ( bootstrap.*
), а также скомпилированные и минифицированные CSS и JS ( bootstrap.min.*
). Исходные карты CSS ( bootstrap.*.map
) доступны для использования с инструментами разработчика некоторых браузеров. Включены шрифты от Glyphicons, а также дополнительная тема Bootstrap.
Загрузка исходного кода Bootstrap включает предварительно скомпилированные ресурсы CSS, JavaScript и шрифтов, а также исходный код Less, JavaScript и документацию. В частности, он включает в себя следующее и многое другое:
less/
, js/
и fonts/
являются исходным кодом для наших шрифтов CSS, JS и значков (соответственно) . Папка dist/
включает в себя все, что указано в предварительно скомпилированном разделе загрузки выше. Папка docs/
содержит исходный код нашей документации и examples/
информацию об использовании Bootstrap. Помимо этого, любой другой включенный файл обеспечивает поддержку пакетов, информацию о лицензии и разработку.
Bootstrap использует Grunt для своей системы сборки с удобными методами работы с фреймворком. Это то, как мы компилируем наш код, запускаем тесты и многое другое.
Чтобы установить Grunt, вы должны сначала загрузить и установить node.js (который включает npm). npm обозначает упакованные модули узла и представляет собой способ управления зависимостями разработки через node.js.
Затем из командной строки:grunt-cli
глобально с помощью npm install -g grunt-cli
./bootstrap/
каталог, затем запустите npm install
. npm просмотрит package.json
файл и автоматически установит перечисленные там необходимые локальные зависимости.По завершении вы сможете запускать различные команды 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.
Создайте базовый шаблон выше, используя множество компонентов Bootstrap. Мы рекомендуем вам настраивать и адаптировать Bootstrap в соответствии с потребностями вашего индивидуального проекта.
Получите исходный код для каждого приведенного ниже примера, загрузив репозиторий Bootstrap . Примеры можно найти в docs/examples/
каталоге.
Супер базовый шаблон, который включает в себя панель навигации и некоторый дополнительный контент.
Базовая структура панели администратора с фиксированной боковой панелью и панелью навигации.
Создайте пользовательскую панель навигации с оправданными ссылками. Берегись! Не слишком дружелюбный к сафари.
Легко отключите отзывчивость Bootstrap в соответствии с нашей документацией .
Bootlint — это официальный инструмент HTML- линтера Bootstrap . Он автоматически проверяет несколько распространенных ошибок HTML на веб-страницах, использующих Bootstrap довольно «ванильным» способом. Компоненты/виджеты Vanilla Bootstrap требуют, чтобы их части DOM соответствовали определенным структурам. Bootlint проверяет, что экземпляры компонентов Bootstrap имеют правильно структурированный HTML. Рассмотрите возможность добавления Bootlint в свою цепочку инструментов веб-разработки Bootstrap, чтобы ни одна из распространенных ошибок не замедляла разработку вашего проекта.
Будьте в курсе развития Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.
irc.freenode.net
сервере, в канале ##bootstrap .twitter-bootstrap-3
.bootstrap
в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной возможности обнаружения.Вы также можете подписаться на @getbootstrap в Твиттере , чтобы быть в курсе последних сплетен и потрясающих музыкальных клипов.
Bootstrap автоматически адаптирует ваши страницы под различные размеры экрана. Вот как отключить эту функцию, чтобы ваша страница работала, как в этом неадаптивном примере .
<meta>
упомянутую в документах CSS.width
для .container
каждого уровня сетки одну ширину width: 970px !important;
. Убедитесь, что это идет после CSS Bootstrap по умолчанию. При желании вы можете избежать использования !important
медиа-запросов или какого-либо селекторного фу..col-xs-*
классы в дополнение к средним/крупным или вместо них. Не беспокойтесь, очень маленькая сетка устройств масштабируется до всех разрешений.Вам по-прежнему понадобится Respond.js для IE8 (поскольку наши медиа-запросы все еще там и должны быть обработаны). Это отключает аспекты «мобильного сайта» Bootstrap.
Мы применили эти шаги к примеру. Прочтите его исходный код, чтобы увидеть реализованные конкретные изменения.
Хотите перейти со старой версии Bootstrap на v3.x? Ознакомьтесь с нашим руководством по миграции .
Bootstrap создан для лучшей работы в новейших настольных и мобильных браузерах, а это означает, что старые браузеры могут отображать в другом стиле, хотя и полностью функциональные, визуализацию определенных компонентов.
В частности, мы поддерживаем последние версии следующих браузеров и платформ.
Альтернативные браузеры, использующие последнюю версию WebKit, Blink или Gecko, напрямую или через API веб-представления платформы, явно не поддерживаются. Однако Bootstrap должен (в большинстве случаев) корректно отображаться и работать и в этих браузерах. Более подробная информация о поддержке представлена ниже.
Вообще говоря, Bootstrap поддерживает последние версии браузеров по умолчанию для каждой основной платформы. Обратите внимание, что прокси-браузеры (такие как Opera Mini, режим Turbo Opera Mobile, UC Browser Mini, Amazon Silk) не поддерживаются.
Хром | Fire Fox | Сафари | |
---|---|---|---|
Андроид | Поддерживается | Поддерживается | Н/Д |
iOS | Поддерживается | Поддерживается | Поддерживается |
Точно так же поддерживаются последние версии большинства настольных браузеров.
Хром | Fire Fox | Интернет-проводник | Опера | Сафари | |
---|---|---|---|---|---|
Мак | Поддерживается | Поддерживается | Н/Д | Поддерживается | Поддерживается |
Окна | Поддерживается | Поддерживается | Поддерживается | Поддерживается | Не поддерживается |
В Windows мы поддерживаем Internet Explorer 8-11 .
Для Firefox, в дополнение к последнему обычному стабильному выпуску, мы также поддерживаем последнюю версию Firefox с расширенной поддержкой (ESR) .
Неофициально Bootstrap должен выглядеть и вести себя достаточно хорошо в Chromium и Chrome для Linux, Firefox для Linux и Internet Explorer 7, а также в Microsoft Edge, хотя официально они не поддерживаются.
Список некоторых ошибок браузера, с которыми приходится бороться Bootstrap, см. на нашей Стене ошибок браузера .
Internet Explorer 8 и 9 также поддерживаются, однако имейте в виду, что некоторые свойства CSS3 и элементы HTML5 не полностью поддерживаются этими браузерами. Кроме того, Internet Explorer 8 требует использования Respond.js для включения поддержки мультимедийных запросов.
Особенность | Интернет Эксплорер 8 | Интернет Эксплорер 9 |
---|---|---|
border-radius |
Не поддерживается | Поддерживается |
box-shadow |
Не поддерживается | Поддерживается |
transform |
Не поддерживается | Поддерживается, с -ms префиксом |
transition |
Не поддерживается | |
placeholder |
Не поддерживается |
Посетите страницу Могу ли я использовать... для получения подробной информации о поддержке браузерами функций CSS3 и HTML5.
Остерегайтесь следующих предостережений при использовании Respond.js в средах разработки и производства для Internet Explorer 8.
Использование Respond.js с CSS, размещенным в другом (суб)домене (например, в CDN), требует дополнительной настройки. Подробнее см. в документации Respond.js .
file://
Из-за правил безопасности браузера Respond.js не работает со страницами, просматриваемыми через file://
протокол (например, при открытии локального HTML-файла). Чтобы протестировать адаптивные функции в IE8, просмотрите свои страницы через HTTP(S). Подробнее см. в документации Respond.js .
@import
Respond.js не работает с CSS, на который ссылается @import
. В частности, известно, что некоторые конфигурации Drupal используют файлы @import
. Подробнее см. в документации Respond.js .
IE8 не полностью поддерживает box-sizing: border-box;
в сочетании с min-width
, max-width
, min-height
или max-height
. По этой причине, начиная с версии 3.0.1, мы больше не используем max-width
в .container
s.
У IE8 есть некоторые проблемы в @font-face
сочетании с :before
. Bootstrap использует эту комбинацию со своими Glyphicons. Если страница кэшируется и загружается без наведения мыши на окно (т. е. нажатия кнопки обновления или загрузки чего-либо в iframe), то страница отображается до загрузки шрифта. При наведении курсора на страницу (тело) отображаются некоторые значки, а при наведении курсора на остальные значки они также отображаются. Подробнее см. в выпуске № 13863 .
Bootstrap не поддерживается в старых режимах совместимости Internet Explorer. Чтобы убедиться, что вы используете новейший режим рендеринга для IE, рассмотрите возможность включения соответствующего <meta>
тега на свои страницы:
Подтвердите режим документа, открыв инструменты отладки: нажмите F12и отметьте «Режим документа».
Этот тег включен во всю документацию и примеры Bootstrap, чтобы обеспечить наилучшую возможную визуализацию в каждой поддерживаемой версии Internet Explorer.
См. этот вопрос StackOverflow для получения дополнительной информации.
Internet Explorer 10 не отличает ширину устройства от ширины области просмотра и, следовательно, неправильно применяет медиа-запросы в CSS Bootstrap. Обычно вы просто добавляете быстрый фрагмент CSS, чтобы исправить это:
Однако это не работает для устройств с более ранними версиями Windows Phone 8, чем Update 3 (также известными как GDR3) , поскольку на таких устройствах вместо узкого «телефонного» вида отображается в основном вид рабочего стола. Чтобы решить эту проблему, вам потребуется включить следующие CSS и JavaScript, чтобы обойти эту ошибку .
Дополнительные сведения и рекомендации по использованию см . в статье Windows Phone 8 и Device-Width .
В качестве предупреждения мы включили это во всю документацию и примеры Bootstrap в качестве демонстрации.
Механизм рендеринга версий Safari до версии 7.1 для OS X и Safari для iOS версии 8.0 имел некоторые проблемы с количеством десятичных разрядов, используемых в наших .col-*-1
классах сетки. Таким образом, если бы у вас было 12 отдельных столбцов сетки, вы бы заметили, что они оказались короткими по сравнению с другими рядами столбцов. Помимо обновления Safari/iOS, у вас есть несколько вариантов обходных путей:
.pull-right
к последнему столбцу сетки, чтобы получить выравнивание по правому краю.Поддержка элемента overflow: hidden
on <body>
весьма ограничена в iOS и Android. С этой целью, когда вы прокручиваете верхнюю или нижнюю часть модального окна в браузерах любого из этих устройств, <body>
содержимое начинает прокручиваться. См. ошибку Chrome № 175502 (исправлена в Chrome v40) и ошибку WebKit № 153852 .
Начиная с iOS 9.3, когда модальное окно открыто, если начальное касание жеста прокрутки находится в пределах границ текстового <input>
или a <textarea>
, <body>
содержимое под модальным окном будет прокручиваться вместо самого модального окна. См. ошибку WebKit № 153856 .
Кроме того, обратите внимание, что если вы используете фиксированную панель навигации или используете ввод в модальном окне, в iOS есть ошибка рендеринга, которая не обновляет положение фиксированных элементов при срабатывании виртуальной клавиатуры. Несколько обходных путей для этого включают преобразование ваших элементов position: absolute
или вызов таймера в фокусе, ��тобы попытаться исправить позиционирование вручную. Это не обрабатывается Bootstrap, поэтому вам решать, какое решение лучше всего подходит для вашего приложения.
Этот .dropdown-backdrop
элемент не используется в iOS в навигации из-за сложности z-индексации. Таким образом, чтобы закрыть раскрывающиеся списки на панелях навигации, вы должны напрямую щелкнуть элемент раскрывающегося списка (или любой другой элемент, который вызовет событие щелчка в iOS ).
Масштабирование страницы неизбежно приводит к появлению артефактов рендеринга в некоторых компонентах, как в Bootstrap, так и в остальной части Интернета. В зависимости от проблемы мы можем ее исправить (сначала найдите, а затем, если нужно, откройте проблему). Тем не менее, мы склонны игнорировать их, поскольку они часто не имеют прямого решения, кроме хакерских обходных путей.
:hover
/ :focus
на мобильном телефонеНесмотря на то, что настоящее зависание невозможно на большинстве сенсорных экранов, большинство мобильных браузеров эмулируют поддержку зависания и делают его :hover
«липким». Другими словами, :hover
стили начинают применяться после касания элемента и перестают применяться только после того, как пользователь коснется другого элемента. :hover
Это может привести к нежелательному «зависанию» состояний Bootstrap в таких браузерах. Некоторые мобильные браузеры также делают :focus
подобные липкие. В настоящее время нет простого решения этих проблем, кроме полного удаления таких стилей.
Даже в некоторых современных браузерах печать может быть причудливой.
В частности, начиная с Chrome v32 и независимо от настроек полей, Chrome использует ширину области просмотра, значительно меньшую, чем физический размер бумаги, при разрешении медиа-запросов при печати веб-страницы. Это может привести к неожиданной активации сверхмалой сетки Bootstrap при печати. Дополнительные сведения см. в выпуске № 12078 и ошибке Chrome № 273306 . Предлагаемые обходные пути:
@screen-*
переменных Less так, чтобы бумага для принтера считалась больше, чем очень маленькая.Кроме того, начиная с Safari v8.0, фиксированная ширина .container
может привести к тому, что Safari будет использовать необычно маленький размер шрифта при печати. Для получения более подробной информации см . № 14868 и ошибку WebKit № 138192 . Одним из возможных обходных путей для этого является добавление следующего CSS:
Из коробки Android 4.1 (и, по-видимому, даже некоторые более новые версии) поставляются с приложением «Браузер» в качестве веб-браузера по умолчанию (в отличие от Chrome). К сожалению, в браузерном приложении много ошибок и несоответствий с CSS в целом.
На <select>
элементах стандартный браузер Android не будет отображать боковые элементы управления, если они border-radius
и/или border
применены. (Подробности см. в этом вопросе StackOverflow .) Используйте приведенный ниже фрагмент кода, чтобы удалить оскорбительный CSS и отобразить <select>
как нестилизованный элемент в стандартном браузере Android. Обнюхивание пользовательского агента позволяет избежать помех для браузеров Chrome, Safari и Mozilla.
Хотите увидеть пример? Посмотрите эту демонстрацию 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).
Bootstrap следует общепринятым веб-стандартам и — с минимальными дополнительными усилиями — может использоваться для создания сайтов, доступных для тех, кто использует AT .
Если ваша навигация содержит много ссылок и идет перед основным содержимым в DOM, добавьте Skip to main content
ссылку перед навигацией (простое объяснение см. в этой статье A11Y Project о пропуске навигационных ссылок ). Использование .sr-only
класса визуально скроет ссылку пропуска, а .sr-only-focusable
класс гарантирует, что ссылка станет видимой после фокусировки (для зрячих пользователей клавиатуры).
Из-за давних недостатков/ошибок в Chrome (см. проблему 262171 в системе отслеживания ошибок Chromium ) и Internet Explorer (см. эту статью о ссылках на странице и порядке фокуса ), вам необходимо убедиться, что цель вашей ссылки по крайней мере программно можно сфокусировать, добавив tabindex="-1"
.
Кроме того, вы можете захотеть явно подавить видимую индикацию фокуса на цели (особенно потому, что Chrome в настоящее время также устанавливает фокус на элементах tabindex="-1"
при щелчке мышью) с помощью #content:focus { outline: none; }
.
Обратите внимание, что эта ошибка также повлияет на любые другие ссылки на странице, которые может использовать ваш сайт, что сделает их бесполезными для пользователей клавиатуры. Вы можете рассмотреть возможность добавления аналогичного временного исправления ко всем другим именованным якорям/идентификаторам фрагментов, которые действуют как цели ссылки.
При вложении заголовков ( <h1>
- <h6>
) ваш основной заголовок документа должен иметь расширение <h1>
. Последующие заголовки должны иметь логическое использование <h2>
, <h6>
чтобы программы чтения с экрана могли составить оглавление для ваших страниц.
Узнайте больше на HTML CodeSniffer и AccessAbility Penn State .
В настоящее время некоторые из комбинаций цветов по умолчанию, доступных в Bootstrap (например, различные стилизованные классы кнопок, некоторые цвета выделения кода, используемые для основных блоков кода , .bg-primary
контекстный вспомогательный класс фона и цвет ссылки по умолчанию при использовании на белом фоне) имеют низкий коэффициент контрастности (ниже рекомендуемого соотношения 4,5:1 ). Это может вызвать проблемы у пользователей со слабым зрением или дальтоников. Эти цвета по умолчанию, возможно, потребуется изменить, чтобы повысить их контрастность и разборчивость.
Bootstrap выпущен под лицензией MIT и защищен авторским правом Twitter 2016 года. Сведенный к более мелким кускам, он может быть описан со следующими условиями.
Полная лицензия Bootstrap находится в репозитории проекта для получения дополнительной информации.
Члены сообщества перевели документацию Bootstrap на разные языки. Ни один из них официально не поддерживается, и они не всегда могут быть обновлены.
Мы не помогаем организовывать или размещать переводы, мы просто ссылаемся на них.
Закончили новый или лучший перевод? Откройте запрос на извлечение, чтобы добавить его в наш список.