Работа с Bootstrap


Содержание

Начало работы

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

Введение

Bootstrap — это самая популярная в мире платформа для создания адаптивных сайтов и приложений. Внутри вы найдете HTML, CSS и JavaScript высокого качества, чтобы сделать любой проект проще, чем когда-либо.

Вот как быстро начать работу с Bootstrap CDN и стартовой страницей шаблона.

Содержание

Быстрый старт

Хотите быстро добавить Bootstrap в свой проект? Используйте компакт-диск Bootstrap CDN, предоставляемый бесплатно пользователями MaxCDN. Используете диспетчер пакетов или нуждаетесь в загрузке исходных файлов?Перейдите на страницу загрузки.

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

Добавьте плагины JavaScript, jQuery и Tether в конец ваших страниц прямо перед закрывающим тегом

Основы Bootstrap

Обзор Bootstrap 3, как загружать и пользоваться, поддерживаемые браузеры и устройства и другое.

Загрузка

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

Bootstrap 3

Минимизированный код CSS, JavaScript и шрифты. Без документации и исходных файлов.

Исходный код

Исходный код Less, JavaScript, файлы шрифтов и документация. Требуется компилятор Less и другие настройки.

Bootstrap перенесен из Less в Sass для легкого включения в Rails, Compass, или проекты Sass-only.

Текущая версия v3.3.2.

Bootstrap CDN

Сайт MaxCDN любезно предоставил Bootstrap возможность пользоваться услугами CDN для распространения файлов CSS и JavaScript. Чтобы воспользоваться этой возможностью, поменяйте локальные настройки на ссылки для Bootstrap CDN приведенные ниже:

Установка с помощью Bower

Для управления исходными файлами Bootstrap’s Less, CSS, JavaScript, шрифтов и локальными копиями документов используйте Bower.

Что включено

Bootstrap доступен в двух версиях. Одна из них содержит скомпилированный вариант, а другая минимизированный (уменьшенный по объему). В обоих случаях каталоги и файлы логически сгруппировны.

Требуется jQuery

Обратите внимание, что всем JavaScript плагинам необходима библиотека jQuery. jQuery необходимо подключить как показано в базовом шаблоне. Чтобы посмотреть какие версии jQuery поддерживаются обратитесь к bower.json .

Файловая структура Bootstrap 3

После загрузки, разархивируйте файлы. Вы увидите нечто похожее на это:

Это основная форма Bootstrap: скомпилированные файлы готовы для быстрого использования в любом веб-проекте. Предоставлены сборки CSS и JS ( bootstrap.* ) и минимизированный вариант ( bootstrap.min.* ). В качестве дополнительной опции для Bootstrap включены шрифты Glyphicons.

Исходный код Bootstrap 3

Исходный код Bootstrap включает прекомпелированные CSS, JavaScript и шрифты, вместе с исходным Less, JavaScript и документацией. Для наглядности посмотрите приведенный пример ниже.

less/ , js/ , шрифты/ с иконками . Папка dist/ включает в себя все перечисленные скомпилированные файлы, указанные в разделе выше. Папка docs/ содержит документацию и примеры/ использования Bootstrap. Кроме того, находится информация о лицензиях и развитии предыдущих версий.

Сообщество

Оставайтесь в курсе развития Bootstrap. Обратитесь к сообществу за полезной информацией.

Поддержка Bootstrap на русском языке

На сайте Русское сообщество Bootstrap вы можете найти ответы на интересующие вопросы, познакомиться с русскоязычными разработчиками или сами принять участие в жизни сообщества.

Для англоязычных пользователей:

  • Читайте и подписывайтесь на Официальный Bootstrap Блог.
  • Общайтесь с другими Bootstrapperами с помощью IRC в irc.freenode.net сервер, на ##twitter-bootstrap channel.
  • Для получения дополнительной информации по использованию Bootstrap, обратитесь на StackOverflow using the tag twitter-bootstrap-3 .
  • Найти вдохновляющие примеры сайтов построенных на Bootstrap можно на Bootstrap Expo.

Блокировка адаптивности

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

Шаги для блокировки адаптивного просмотра

  1. Не создавайте с именем viewport как об этом сказано в описании CSS
  2. Отмените width , .container для каждого уровня разметки определенной ширины, например так : width: 970px !important; Убедитесь, что этот код идет после включения основного кода Bootstrap CSS. При желании можно избежать !important с медиа-запросами или со специальным селектором.
  3. Если вы используете навигационное меню, удалите все меню, которые могут сворачиваться/разворачиваться.
  4. Для макета разметки используйте классы .col-xs-* как дополнение или вместо классов medium/large. Разметка с классом xs (extra small) масштабируется для всех размеров мониторов.

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

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

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

Переход с v2.x на v3.x

Посмотрите документацию о переходе со старой версии Bootstrap на v3.x? Ознакомьтесь с руководством по переходу.

Браузеры и поддержка устройств

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

Поддержка браузерами

В частности, мы поддерживаем последние версии из следующих браузеров и платформ. На платформе Windows, мы поддерживаем Internet Explorer 8-11. Более конкретная информация поддержки предоставлена ниже.

Chrome Firefox Internet Explorer Opera Safari
Android Поддерживается Не поддерживается N/A Не поддерживается N/A
iOS Поддерживается N/A Не поддерживается Поддерживается
Mac OS X Поддерживается Поддерживается Поддерживается Поддерживается
Windows Поддерживается Поддерживается Поддерживается Поддерживается Не поддерживается

Bootstrap должен достаточно хорошо выглядеть и вести себя в Chromium и Chrome для Linux, Firefox для Linux, и Internet Explorer 7, хотя они официально не поддерживаются.

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 Не поддерживается

Посетите Can I use. для более детального ознакомления, какие свойства 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 .

Режим совместимости с IE

Bootstrap не поддерживает режим совместимости в старых версиях Internet Explorer. Чтобы быть уверенным, что вы используете последнюю версию такого режима для IE, просмотрите включен соответствующий тег на вашей странице:

Подтвердите режим документа, открыв средства отладки: нажмите F12 и проверьте «Document Mode».

Этот тег входит в состав всех Bootstrap документациий и примеров для обеспечения лучшей визуализации возможных в каждой поддерживаемой версии Internet Explorer.

Internet Explorer 10 на Windows 8 и Windows Phone 8

Internet Explorer 10 не отличает ширину устройства ширины окна просмотра, и таким образом не правильно применяет медіазапити в Bootstrap CSS. Как правило, это можно быстро починить добавив следующий код CSS:

Однако, это не работает для устройств, работающих под управлением Windows Phone 8 версий старше, чем Update 3 (a.k.a. GDR3), поскольку это вызывает такие устройства, чтобы главным образом показать основной рабочий стол вместо узкого «phone» view. Для решения этой проблемы вам необходимо включать следующие CSS и JavaScript, чтобы обойти ошибку.

Для получения дополнительной информации и руководства по использованию, просмотрите Windows Phone 8 и Device-Width.

Чтобы привлечь внимание, мы включили это в качестве примеров в документации Bootstrap.

Процентное округления в Safari

В версиях Safari v6.1 для OS X и Safari для iOS v7.0.1, при использовании класса разметки .col-*-1 , движок Safari имеет некоторые проблемы с количеством десятичных знаков. То есть если вы имеете 12 отдельных колонок разметки, вы заметите, что они будут более короткими по сравнению с другими рядами колонок. Здесь можно немного изменить (просмотрите #9282), но у вас есть несколько вариантов:

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

Мы будем следить за этой проблемой, и если будет более простое решение, то обновим наш код.

Переполнение и прокрутка

Поддержка overflow: hidden для элемента достаточно ограничена в iOS и Android. В браузере этих устройств, при прокруткі за пределы верхней или нижней модальной части, начинает прокручиваться содержание в .

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

Обратите внимание — если вы используете форму ввода в модальном окне или навигации, iOS имеет ошибку отображения, через которую не обновляется позиция фиксированных элементов при вызова виртуальной клавиатуры. Существуют некоторые обходные пути для этого, в том числе — трансформирующие элементы position: absolute , или при выявлении фокуса на элементе вызывают таймер и пробуют исправить это вручную. Bootstrap не обрабатывает такие ошибки, так что вам нужно самим это решить.

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

Браузерное масштабирование

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

Выводы на принтер

Даже в некоторых современных браузерах, печать может быть изворотливой. В частности, по состоянию на Chrome v32 и независимо от настройки полей, Chrome значительно использует ширину окна просмотра уже, чем физический размер бумаги при разрешении запросов СМИ во время печати веб-страницы. Это может привести к неожиданно активирующейся при печати экстра-малых разметки Bootstrap. Смотрите #12078. Предлагаемые методы обхода:

  • Примените extra-small разметку и убедитесь, что ваша страница выглядит приемлемо.
  • Настройка значения @screen-* Less переменных, чтобы ваш бумага для принтера рассматривалась больше, чем extra-small.
  • Добавте пользовательские запросы, чтобы изменить размер разметки точек останова только для печатных СМИ.

Android stock браузер

Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.

Select меню

On elements, the Android stock browser will not display the side controls if there is a border-radius and/or border applied. Use the snippet of code below to remove the offending CSS and render the as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.

Поддержка третьих сторон

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

Размерность блоков

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

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

Доступность

Bootstrap следует общим веб-стандартам, и—при минимальных дополнительных усилиях—может быть использован для создания сайтов, доступных через AT .

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

Если ваше навигационное меню имеет много линков и находится перед главным содержанием в DOM, добавьте линк Перейти к главному содержимому непосредственно после тега . (прочитайте почему)

Вложенные заголовки

При вложении заголовков (

), ваш основное заглавие документа должен быть

. Следующие заголовки должны логически вибудовуватись используя

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

Дополнительные ресурсы

Лицензия FAQs

Bootstrap выпущено под лицензией MIT и имеет авторское право 2014 Twitter. Сведена к меньшим частям, и может быть описана следующими условиями.

Она требует:

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

Она позволяет:

  • Свободно скачивать и использовать Bootstrap, полностью или частично, для личного, частного, внутренних или коммерческих целях компании
  • Использовать Bootstrap в пакетах или в дистрибуции, которую вы сами создаете
  • Измените исходный код
  • Грант сублицензии изменять и распространять Bootstrap третьим лицам, не включенных в лицензии

Она запрещает:

  • Hold the authors and license owners liable for damages as Bootstrap is provided without warranty
  • Держите создателей или владельцев авторских прав к ответственности Bootstrap
  • Распространять любую часть Bootstrap без ссылки на источник
  • Использовать любые пометки, которые относятся к Twitter, чтобы в такой способ явно или неявно продемонстрировал, что Twitter одобряет ваш дистрибутив
  • Использовать любые пометки, которые относятся к Twitter, чтобы в такой способ явно или неявно продемонстрировал будто вы создаете программное обеспечение по запросу Twitter

Она не требует:

  • Включать исходный код Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
  • Предоставлять изменения, которые вы внесли в Bootstrap для демонстрации в проекте Bootstrap (хотя обратная связь приветствуется)

Полная версия лицензии Bootstrap размещена в проекте репозитория более подробно.


Настройка Bootstrap

Bootstrap лучше обслуживать, когда в среде разработки разделять каждую зависимость от него на отдельные версии. Придерживаясь этого правила — в будущем ваш апгрейд до новой версии Bootstrap будет легким.

После того как вы скачали и подключили стили и скрипты Bootstrap, вы можете настроить их компоненты. Чтобы это сделать, просто создайте новую таблицу стилей (LESS, если желаете, или просто CSS).

Простую сборку или минимизированную?

Если вы не планируете читать CSS, выбирайте их минимизированную версию. Это тот же код, просто компактнее. Минимизированы таблицы стилей используют меньшую ширину канала, что есть хорошо, особенно в рабочем (production) среде.

И в дальнейшем, включайте любые компоненты Bootstrap и HTML, для создания шаблонов страниц вашего сайта.

Настройка составных

Вы можете настраивать компоненты в разной степени, но в большинстве выделяются две категории: легкая настройка и полная перестройка. Есть много разных примеров от третьих сторон, которые позволяют реализовать обе категории.

Мы определяем легкая настройка как поверхностные изменения, например, изменение цвета и шрифта для существующих компонентов Bootstrap. Примером легкой настройки является Twitter Translation Center (написан @mdo). Давайте посмотрим, как реализуется настройка кнопки .btn-ttc на этом сайте.

Для создания основы кнопки Bootstrap необходимо только один класс .btn . Теперь мы будем расширять стиль .btn новым модифицированным классом .btn-ttc , который позже создадим. Это позволяет изменять вид при минимальном усилии.

Наша кнопка, которую мы настраиваем, будет иметь примерно такой код:

Заметьте как .btn-ttc добавляется к стандартному класса .btn .

Чтобы завершить настройку, добавьте следующий пользовательский код стилей CSS:

В кратце: Посмотрите источник стиля и продублируйте селекторы для модификации.

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

  • Найдите код в сборнике CSS Bootstrap для каждого элемента, который хотите настроить.
  • Скопируйте компоненты селектора и стиле и вставьте их в ваших стилей, которые настраиваете. Например, чтобы настроить фон навигационного меню, просто скопируйте описание стиля .navbar .
  • В ваших стилях, которые настраиваете, редактировать CSS, которые вы только что скопировали с Bootstrap. Не нужно дописывать дополнительные классы, добавлять в конце !important . Просто сохраните их.
  • Посмотрите что у вас получилось и при необходимости повторите предыдущие шаги.

Как только вы научитесь делать легкая настройка, визуальная полная перестройка будет такой же простой. Например для сайта Karma, который использует Bootstrap со сбросом CSS и тяжелыми модификациями, нужно хорошо поработать. Но здесь используется тот же принцип: включаются сначала стиле Bootstrap по умолчанию, затем применяется их настройки.

Альтернативные методы настройки

Хотя не рекомендуется для пользователей, плохо знакомых с Bootstrap, все же вы можете использовать один из двух альтернативных методов для настройки. Первый заключается в изменении кода файла .less (супер-усложняет апгрейд), второй — создание маппинга между Less кодом и вашими собственными классами через mixins. На данный момент, ни один из этих методов здесь пока не документировано.

Удаление ненужного кода

Не нужно для каждого сайта все делать с помощью Bootstrap, особенно в производственном (production) среде, где нужно оптимизировать пропускную способность. Мы рекомендуем удалbть все лишнее используя нашу Настройку.

Для этого просто снимите галочки со всех компонентов, функций, или групп компонентов, которые вам не нужны. Загружайте новые измененные файлы и заменяйте ими файлы Bootstrap по умолчанию. Вы получите свежие файлы Bootstrap, но без функций, которые вы посчитали лишними. Каждая такая компонована сборник содержит компилированные и минимизированы версии.

Переводы

Члены сообщества перевели документацию Bootstrap на различные языки. Никто официально не поддерживается и они не всегда могут быть в курсе событий.

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

Введение

Обзор проекта, компонентов, а так же как начать с простого шаблона.

  • Скачать
  • Файловая структура
  • Что включено?
  • HTML-шаблон
  • Примеры
  • Что делать дальше?

1. Скачать

Перед скачиванием убедитесь что у Вас имеется удобный редактор кода (мы рекомендуем Sublime Text 2), а так же какое-либо понимание и знание технологий HTML и CSS. Здесь мы не дадим описание исходных файлов, но они находятся в свободном доступе на GitHub.

Скачать готовый проект

Быстрый способ начать: скачать скомпилированные и минифицированные файлы CSS, JS, и картинок.

Скачать исходники

Оригинальные файлы CSS и JavaScript, с текущей версией Bootstrap можно скачать через GitHub.

2. Файловая структура

После скачивания Вы увидите следующую структуру и файлы, Логически сгрупированые и предоставленные в скомпилированном и минифицированном виде.

Разархивировав скаченный архив (скомпилированного) Bootstrap’а. Вы увидите следующую структуру:

Это основной вид Bootstrap’а: скомпилированные файлы для начала быстрой работы, просто загрузите на сервер и Вы готовы к работе. Мы предоставили скомпилированные CSS и JS ( bootstrap.* ), наряду со скомпилированными и минифицированными CSS и JS ( bootstrap.min.* ) файлами. Картинки были сжаты через ImageOptim, приложение для Mac, позволяющее сжимать PNG-файлы.

Учитывайте что все JavaScript-плагины основаны на jQuery.

3. Что включено?

Bootstrap заряжен порцией высококачественного HTML, CSS, и JS для любого типа веб-разработки.

Документация

Шаблон

Глобальные стили для элемента body : изменение background’а, ссылки на стили, сетка шаблона и два простых макета.

Стили основных HTML элементов, оформление и шрифты, код, таблицы, формы и кнопки. Включая Glyphicons — набор иконок.

Компоненты

Основные стили компонентов интерфейса: вкладки и навигационные кнопки, навигационный бар (navbar), сообщения, заголовки страниц и т.п.

Javascript-плагины

Схоже с компонентами, Javascript-плагины оживляют ваш веб-проект, и Компоненты такие как всплывающие подсказки (tooltips), всплывающий контент (popovers), всплывающие окна (modals) и много других вкусностей.

Список компонентов

Вместе Компоненты и Javascript-плагины представляют следующий список элементов интерфейса:

  • Группы кнопок
  • Кнопки с выпадающими списками
  • Элементы навигации: вкладки, кнопки и списки
  • Навигационный бар (Navbar)
  • Этикетки
  • Бейджи
  • Заголовки страниц и элемент hero
  • Миниатюры
  • Сообщения
  • Индикаторы процесса (прогресса)
  • Всплывающие окна
  • Выпадающие списки
  • Всплывающие подсказки
  • Всплывающий контент
  • Стек вкладок
  • Каруселька
  • Вспомогательное меню input элемента (Typeahead)

В будущих обзорах, мы рассмотрим эти компоненты по отдельности более подробно. А пока, посмотрите на каждую из них в документации для получения информации о том, как их использовать.

4. Основной HTML шаблон

Вместо чтения красочных описаний Bootstrap’a, мы предлагаем Вам начать его использовать. Для начала создайте базовый HTML шаблон, который будет включать в себя все что писано в Файловой структуре.

Затем обратите внимание на стандартный HTML-файл:

Что бы Забутстреппить эту страничку, просто добавьте линк на CSS и JS файлы:

Все готово! Благодаря этим файлам, вы можете начать разрабатывать ваш сайт или приложение на Bootstrap’е.

5. Примеры

Для продолжения обратите внимание на стандартные макеты страниц. Используйте эти примеры для начала работы над своим проектом, изменяйте их и создавайте что-то уникальное.

Основной сайт. Маркетинг.

Основной «Hero» элемент и три дополняющие колонки с информацией.

Плавающая разметка

Данный пример использует все преимущества динамического дизайна с плавающей шириной.

Стартаперский шаблон

Полнофункциональный шаблон, включающий в себя все фичи (HTML/CSS/LESS/JS) от Bootstrap.


Классический для продукта

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

Вход (Логин)

Классическая форма входа.

Подвал

Подвал привязанный к низу страницы.

Каруселька «jumbotron»

Интерактивный, приятный и веселый шаблон, подойдет как для продукта так и для команды.

Следующие шаги.

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

C чего начать

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

Загрузка

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

Bootstrap

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

Исходный код

Исходный Less, JavaScript, и файлы шрифтов, вместе с нашими документами. Требуется компилятор Less и другие настройки.

Bootstrap перенесен из Less в Sass для легкого включения в Rails, Compass, или проекты Sass-only.

Bootstrap CDN

Сотрудники MaxCDN любезно предоставили поддержку CDN для Bootstrap CSS и JavaScript. Просто используйте эти ссылки Bootstrap CDN.

Установка с помощью Bower

Вы также можете установить и управлять Bootstrap’ы Less, CSS, JavaScript, и шрифты, используя Bower:

Установить с помощью npm

Вы также можете установить Bootstrap используя npm:

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:

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

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

Что включено

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

Требуется jQuery

Обратите внимание, что все JavaScript плагины требуют jQuery должны быть подключены, как показано на стартовом шаблоне. Обратитесь в наш bower.json чтобы посмотреть какие версии jQuery поддерживаются.

Сборник кода Bootstrap 3

После загрузки, разархивируйте сжатые каталоги. Вы должны увидеть нечто похожее на это:

Это является наиболее базовая форма 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, и документацией. Более конкретно, оно включает в себя следующее и более:

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

Компиляция CSS и JavaScript

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-документа.

Примеры шаблонов

На шаблоне, что представлен выше, Bootstrap создает множество компонентов. Мы рекомендуем Вам настроить и адаптировать Bootstrap в соответствии с потребностями Вашего индивидуального проекта.

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

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

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

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

Темы Bootstrap

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


Разметки

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

Jumbotron

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

Узкий Jumbotron

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

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

Статическое навигационное меню

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

Фиксированное навигационное меню

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

Пользовательские компоненты

Крышка

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

Карусель

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

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

Панель приборов

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

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

Шаблон пользовательской формы настроен для простого входа на сайт.

Выровненное нав. меню

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

Фиксированный Нижний колонтитул

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

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

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

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

Неадаптивный Bootstrap

Легко отключить адаптивность Bootstrap согласно нашим документам.

Off-холст

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

Инструменты

Bootlint

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

Сообщество

Оставайтесь в курсе развития Bootstrap и обратитесь к сообществу за полезными ресурсами.

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

Вы также можете перейти на @getbootstrap на Twitter к последним сплетням и удивительным музыкальным клипам.

Отключение адаптивности

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

Шаги для блокировки адаптивного просмотра

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

Вам еще нужно Respond.js для IE8 (так как наш медиа запросы еще есть и должны быть обработаны). Это отключает «мобильный сайт» аспекта Bootstrap.

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

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

Миграция с версии v2.х v3.х

Хотите перенести из старой версии Bootstrap v3.х? Проверьте наши руководство по миграции.

Браузер и поддержка устройств

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, просмотрите включен соответствующий тег на вашей странице:

Подтвердите режим документа, открыв средства отладки: нажмите F12 и проверьте «Document Mode».

Этот тег входит в состав всех Bootstrap документациий и примеров для обеспечения лучшей визуализации возможных в каждой поддерживаемой версии Internet Explorer.

Internet Explorer 10 на Windows 8 и Windows Phone 8

Интернет Эксплорер 10 не отличает ширину устройства с шириной окна просмотра, и, следовательно, неправильно применяет медиа запросы в CSS Bootstrap. Как правило, вы могли бы просто добавить быстрый фрагмент CSS чтобы исправить это:

Однако, это не работает для устройств, работающих под управлением Windows Phone 8 версий старше, чем Обновления 3 (а.к.а. GDR3), поскольку это вызывает такие устройства, чтобы главным образом показать основной рабочий стол вместо узкого «phone» view. Для решения этой проблемы вам необходимо включать следующие CSS и JavaScript, чтобы обойти ошибку.

Для получения дополнительной информации и руководства по использованию, просмотрите 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 на элемент весьма ограничен в iOS и Android. С этой целью, когда вы прокрутите мимо верхней или нижней части модального в любом из браузеров этих устройств, в контент начнет прокручиваться. Смотрите Хром ошибка № 175502 (исправлено в Chrome и V40) и В WebKit ошибка #153852.

текстовых полей iOS и прокрутки

Начиная с iOS 9.3, в то время как модальные открыт, если начальное касание прокрутки жест в пределах границы текста или

В содержание под модальным будет прокручиваться вместо модальных себя. Смотрите В WebKit ошибка № 153856.

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

Обратите внимание — если вы используете форму ввода в модальном окне или навигации, iOS имеет ошибку отображения, через которую не обновляется позиция фиксированных элементов при вызова виртуальной клавиатуры. Существуют некоторые обходные пути для этого, в том числе — трансформирующие элементы position: absolute , или при выявлении фокуса на элементе вызывают таймер и пробуют исправить это вручную. Bootstrap не обрабатывает такие ошибки, так что вам нужно самим это решить.

Меню Навигации

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

Браузерное масштабирование

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

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

Хотя реальное зависание не возможно на большинстве сенсорных экранов, мобильные браузеры эмулируют поддержку зависания и делают :hover «Липким». Другими словами, :hover стили начинают применяться после нажатия элемента и прекращают применение только после того, как пользователь нажимает какие-либо другие элементы. Поэтому :hover из Bootstrap’а может привести к нежелательному «залипанию» на таких браузерах. Некоторые мобильные браузеры также делают :focus липкий. Пока что нет простого решения таких вопросов, помимо полного удаления таких стилей.

Печать

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

В частности, в Chrome версии 32 независимо от параметров отступов и размеров полей, Chrome при печати использует значительно более узкую область просмотра, чем физический размер бумаги при отображении медиа запросов. Это может привести к тому, при печати Bootstrap неожиданно активирует очень мелкую сетку. Смотри подробности в Ошибке #12078 и Ошибке Chrome #273306. Рекомендуемые обходные пути:

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

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

Заводские Andro >Из коробки, Android 4.1 (и даже некоторые новые версии) ставят приложение Браузера в качестве веб-браузера по умолчанию(в отличие от Chrome). К сожалению, стандартные браузеры имеют множество ошибок и несоответствий с CSS в целом.

Меню выбора

На элементе, в Android браузере не будет отображаться элементы управления если есть border-radius и/или border . (Смотри этот вопросы на StackOverflow более детально.) Используйте фрагмент кода ниже, чтобы удалить этот CSS и сделать элемент без стиля на Android браузере. Избегать недовольство юзера помогает использование браузеров: Chrome, Safari и Mozilla.

Валидаторы

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

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

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

Поддержка третьих сторон

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

Размерность блоков

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

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

Доступность

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

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

Если ваши навигации содержит множество ссылок и доходит до основного Контента в DOM, добавить Skip to main content ссылка до навигации (для простого объяснения, увидеть это Статья A11Y проект пропустить навигационные ссылки). С помощью .sr-only класс визуально скрывают перейдите по ссылке, и .sr-only-focusable класс будет гарантировать, что ссылка будет видна после целенаправленной (для зрячих пользователей клавиатура).

Благодаря давнему недостатки/ошибки в Chrome (см. вопрос 262171 в хром багтрекер) и Internet Explorer (см. эту статью на ссылки и фокус того), Вы должны убедиться, что цель вашей ссылке пропустить хотя бы программно фокусируемый, добавив tabindex=»-1″ .

Кроме того, может потребоваться явно подавляет видимый фокусировки на мишени (в частности, хром в настоящее время также устанавливает фокус на элементах с tabindex=»-1″ при щелчке мышкой) с #content:focus < outline: none; >.

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

Вложенные заголовки

При вложении заголовков (

), ваш основное заглавие документа должен быть

. Следующие заголовки должны логически вибудовуватись используя

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

Цветовой контраст

В настоящее время, некоторые из умолчанию цветовые комбинации в Bootstrap (например, различные кнопки в стиле классы, часть кода подсветкой цвет основные блоки кода В .bg-primary контекстная фоне вспомогательный класс, и по умолчанию цвет ссылки при использовании на белом фоне) имеют низкую контрастность (ниже рекомендуемое соотношение 4.5:1). Это может вызвать проблемы для пользователей с ослабленным зрением или дальтонизмом. Эти цвета по умолчанию могут быть изменены, чтобы увеличить контрастность и четкость.

Дополнительные ресурсы

Лицензия FAQs

Bootstrap выпущено под лицензией MIT и имеет авторское право 2020 Twitter. Сведена к меньшим частям, и может быть описана следующими условиями.


Она требует:

  • Сохранить лицензии и уведомление об авторских правах, включенные в Bootstrap — х CSS и JavaScript файлов, когда вы используете их в ваших работах

Она позволяет:

  • Свободно скачивать и использовать Bootstrap, полностью или частично, для личного, частного, внутренних или коммерческих целях компании
  • Использовать Bootstrap в пакетах или в дистрибуции, которую вы сами создаете
  • Измените исходный код
  • Грант сублицензии изменять и распространять Bootstrap третьим лицам, не включенных в лицензии

Она запрещает:

  • Держите авторов и владельцев лицензий несет ответственности за ущерб, как Bootstrap предоставляется без гарантии
  • Держите создателей или владельцев авторских прав к ответственности Bootstrap
  • Распространять любую часть Bootstrap без ссылки на источник
  • Использовать любые пометки, которые относятся к Twitter, чтобы в такой способ явно или неявно продемонстрировал, что Twitter одобряет ваш дистрибутив
  • Использовать любые пометки, которые относятся к Twitter, чтобы в такой способ явно или неявно продемонстрировал будто вы создаете программное обеспечение по запросу Twitter

Она не требует:

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

Полная версия лицензии Bootstrap размещена в проекте репозитория более подробно.

Переводы

Члены сообщества перевели документацию Bootstrap на различные языки. Никто официально не поддерживается и они не всегда могут быть в курсе событий.

Мы не помогаем организовывать перевод, мы просто даем на них ссылки.

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

Спроектированы и построены со всей любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших спонсоров.

Что такое Bootstrap и зачем он нужен?

В этой статье мы познакомимся с фреймворком Bootstrap. Рассмотрим, что это такое и зачем он нужен. Разберём его основные преимущества и недостатки.

Bootstrap — это открытый и бесплатный HTML, CSS и JS фреймворк, который используется веб-разработчиками для быстрой вёрстки адаптивных дизайнов сайтов и веб-приложений.

Фреймворк Bootstrap используется по всему миру не только независимыми разработчиками, но иногда и целыми компаниями. На Bootstrap создано очень много различных сайтов, посмотреть на них можно на странице Bootstrap Expo.

Основная область его применения – это разработка frontend сайтов и интерфейсов админок. Среди аналогичных систем (Foundation, UIkit, Semantic UI, InK и др.) фреймворк Bootstrap является самым популярным .

Почему Bootstrap так популярен? Это связано с тем, что он позволяет верстать сайты в несколько раз быстрее, чем это можно выполнить на «чистом» CSS и JavaScript. А в нашем мире время – это самый дорогой ресурс. Также его популярность связана с доступностью . Она заключается в том, что на нём даже начинающий разработчик может верстать достаточно качественные макеты , которые трудно было бы выполнить без глубоких знаний веб-технологий и достаточной практики.

Фреймворк Bootstrap представляет собой набор CSS и JavaScript файлов . Чтобы его использовать на странице эти файлы нужно просто подключить к ней. После подключения вам станут доступны инструменты данного фреймворка: колоночная система (сетка Bootstrap), классы и компоненты .

Как это работает? Например, чтобы создать кнопку на странице с помощью Bootstrap, достаточно к ссылке или элементу button добавить всего несколько классов.

Создание кнопки в Bootstrap 4:

Ну как? Сколько на это потребовалось времени? Да, всего несколько секунд.

А если, например, мне нужно создать вкладки , то для этого нужно будет лишь скопировать готовый HTML фрагмент, и отредактировать его так, чтобы в нём было нужное мне количество вкладок:

Всё, вкладки готовы. На это тоже ушли секунды. Правда, потрясающая скорость. В этом сила Bootstrap.

Из чего состоит Bootstrap?

Bootstrap состоит из:

  • сетки;
  • классов для стилизации текста, изображений, таблиц и другого контента;
  • компонентов предназначенных для создания кнопок, различных форм на странице, горизонтальных и вертикальных навигационных меню, слайдеров, выпадающих списков, аккордеонов, модальных окон, всплывающих подсказок и других элементов интерфейса;
  • классов для решения вспомогательных задач наиболее часто возникающими перед веб-разработчиками (выравнивание текста, скрытие или отображение элемента, задания цвета и фона элементу, задание margin и padding отступов, и др.).

С чего начать изучение Bootstrap?

Первое, что вам необходимо — это скачать Bootstrap и подключить его к странице . Как это выполнить рассмотрено в статье «Установка платформы Bootstrap».

Многие начинающие веб-разработчики задаются вопросом: «Как начать работать с Bootstrap?» . На самом деле создавать страницы на Bootstrap очень просто.

Первое – это нужно научиться работать с сеткой . В Bootstrap она используется как для создания основного каркаса страницы, так и для разметки всего остального. Как с ней работать можно почитать в статье «Сетка в Bootstrap 3» или «Сетка в Bootstrap 4» в зависимости от того какую версию вы собираетесь использовать.

Сетка в Bootstrap 3 построена на float, а Bootstrap 4 – на CSS Flexbox.

Следующее – это изучить компоненты и классы Bootstrap .

После изучение этих базовых вещей уже можно будет переходить к вёрстке сайта или веб-приложения.

Ну если ваша задача не просто использовать Bootstrap, а что-то в нём изменять, переделывать, то без хороших знаний CSS тут конечно уже не обойтись. Некоторые вещи, конечно, можно настроить через изменения SCSS переменных и применения миксинов, а другие – нет. И это касается любых фреймворков.

Преимущества и недостатки фреймворка Bootstrap

Преимущества, которые даёт фреймворк Bootstrap при разработке на его основе frontend части сайтов и интерфейсов админок:

  • высокая скорость создания качественной адаптивной вёрстки даже начинающими веб-разработчиками (достигается это благодаря использованию готовых компонентов, созданных профессионалами);
  • кроссбраузерность и кроссплатформеннось (корректное отображение и работа сайта во всех поддерживаемых этим фреймворком браузерах и операционных системах);
  • наличие большого количество готовых хорошо продуманных компонентов , протестированных огромным сообществом веб-разработчиков на различных устройствах;
  • возможность настройки под свой проект , достигается это посредством изменения SCSS переменных и использования Bootstrap миксинов (можно изменить количество колонок, цвета, радиуса скруглений углов элементов, отступы между колонками и многое другое);
  • низкий порог вхождения ; для работы с фреймворком не обязательно иметь глубокие знания по HTML, CSS, JavaScript и jQuery (достаточно знать только основы вышеперечисленных технологий);
  • наличие хорошо продуманного дизайна компонентов и согласованности (в Bootstrap все компоненты выполнены в едином стиле);
  • наличие огромного сообщества, большого количества статей, рецептов и видеоматериалов ; всё это при желании поможет не только хорошо разобраться в фреймворке, но и найти ответы практически на любые вопросы.

Фреймворк Bootstrap – это проект с открытым исходным кодом , доступным на Github. Он имеет лицензию MIT. Это означает, что его можно использовать бесплатно как в личных, так и в коммерческих проектах.

На Bootstrap, конечно, верстают далеко не всё . Если проект большой или имеет уникальный дизайн, или если вы работаете на заказ и клиент готов платить за проект на «чистом» CSS и JavaScript достаточную сумму, то в этом случае Bootstrap конечно не имеет смысла использовать. Но такая разработка в основном осуществляется в команде, в которой каждый её участник выполняет какой-то свой определенный набор функций.

Тоже касается и личных проектов, если у вас есть достаточно количество времени и ваш уровень знания технологий HTML, CSS и JavaScript достаточный, чтобы это осуществить, то тогда Bootstrap вам не нужен.

Bootstrap, как и большинство подобных фреймворков, имеет недостатки. Один из них заключается в том, что его нет смысла использовать для вёрстки сайтов, когда это требует переписывания большого количества CSS кода и простой настройкой переменных Bootstrap, например, тут не обойтись.

Другой недостаток связан с тем, что код CSS и JavaScript вашего проекта будет значительно больше по размеру, чем если бы вы его самостоятельно написали конкретно под этот проект. Ну, это понятно, т.к. стили, да и код JavaScript, заточены в Bootstrap под различные сценарии, которые в вашем проекте могут просто не использоваться. Уменьшить код фреймворка Bootstrap можно выполнив самостоятельную сборку проекта из исходных кодов и включить в неё только те компоненты, которые нужны. Как это выполнить для Bootstrap 4 можно почитать в этой статье, а для Bootstrap 3 — в этой.

Какую версию Bootstrap выбрать?

Для разработки большинства веб-проектов лучше использовать последнюю версию Bootstrap . На текущий момент актуальной является версия 4.3.1.

В этой версии верстать на много лучше, т.к. она основано как было уже отмечено выше на CSS Flexbox.

Данная версия поддерживает последние, стабильные версии всех основных браузеров и платформ. В операционной системе Windows эта версия Bootstrap поддерживает Internet Explorer 10-11 и Microsoft Edge.

Если же вам нужна поддержка более старых версий браузеров, например Internet Explorer 8 и 9, то в этом случае лучше остановиться на третьей версии Bootstrap. Последняя актуальная версия из 3 ветки — это 3.4.1.

В старых версиях браузера Internet Explorer (8 и ниже) некоторые компоненты Bootstrap 3 могут отображаться без градиентов, теней и закруглённых углов. Это связано с тем, что эти версии не поддерживают свойства CSS3, которые используются в её компонентах.

Следующий шаг в изучении Bootstrap, это его установка .

HTML/CSS-фреймворк Bootstrap или как встроить верстку на сайт за несколько минут

Итак, подведем итоги, в первом модуле HTML/CSS вы научились в РУЧНОМ режиме создавать веб-страницы. Статью для начинающих свой путь в программировании и верстке читайте здесь Верстка HTML/CSS — шаг 1 из 6 проверенных шагов к профессии веб-программист.

В каждом процессе хочется найти УСКОРИТЕЛЬ и сделать процесс более БЫСТРЫМ без потери качества. К счастью, сегодня есть множество html, css фреймворков, которые могут значительно упростить создание адаптивных сайтов и взять всю самую сложную часть работы “на себя”.

Здесь вам приходит на помощь фреймворк Bootstrap. С помощью Bootstrap верстку можно создавать очень быстро по сравнению с классическим HTML/CSS, так как в Bootstrap уже имеются готовые компоненты, например: кнопки разных размеров, модальные окна, Grid System (сетка для расположения элементов), меню навигации и т.д.

Framework Bootstrap — помощник верстальщика


Популярность фреймворка Bootstrap зашкаливает. Bootstrap просто везде!

Разберемся по порядку.

Фреймворк (от англ. framework — каркас, конструкция, структура) — это некий набор библиотек, который ускоряет процесс разработки.

Фреймворки призваны УПРОСТИТЬ жизнь опытным разработчикам и помочь НОВИЧКАМ начать создавать действительно ДОСТОЙНЫЕ сайты. Собрал каркас — прикрутил модули — тестируй!

Bootstrap — это HTML/CSS фреймворк для создания современных, кросс-браузерных и стандартизованных интерфейсов. Свидетельством этого является его непрерывно растущая популярность.

Преимущества Bootstrap

1. Bootstrap позволяет получить сразу кросс-браузерную и адаптивную страницу, которая выглядит хорошо во всех браузерах и на всех устройствах. Особенно это оценят те, кто еще не имеет достаточного опыта в верстке.

2. Значительно ускоряется разработка страниц, посредством использования готовых шаблонов, которые можно брать и править под нужды своего проекта.

3. Ваш итоговый код получается аккуратным и понятна его структура, что упрощает дальнейшее развитие и поддержку вашего сайта. К тому же однообразная структура кода упрощает командную работу.

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

Такой сайт можно создать буквально за несколько часов, а не дней!

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

На данном фреймворке создано уже миллионы шаблонов сайтов, поэтому одно из обязательных требований работодателей — это знание Bootstrap.

Подведем итоги

Для того, чтобы использовать фреймворк Bootstrap, его нужно изучить .

Верстка — настоящее веб-искусство, которое может освоить каждый.

Последовательность от простого к сложному дает прочный фундамент знаний.

1. HTML/CSS верстка — начни учиться бесплатно

Основные HTML-теги, CSS-стили. Работа в редакторе кода SublimeText. Адаптивная верстка сайтов под мобильные устройства. Создание верстки сайта и правильной HTML-разметки для SEO.

БЫСТРОЕ ОСВОЕНИЕ НОВОГО ИНСТРУМЕНТА ПРИ ХОРОШЕЙ БАЗЕ курса HTML/CSS. Вы сможете создавать верстку любого веб-сайта в разы быстрее. В курсе HTML/CSS мы с нуля сами создаем компоненты и стилизуем их. В Bootstrap берем готовые (понимая как они устроены и работают) и изменяем под свой дизайн. Навыки работы с Bootstrap — частое требование работодателей. Ссылка на скачивание Bootstrap

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

Методом проб и ошибок вырабатываете нужные навыки.

Дальше эти навыки, путем постоянного применения, встраиваете в свою жизнь, и они становятся частью вас.

2. HTML/CSS фреймворк Bootstrap ускоренная адаптивная верстка,

3. PHP/MySQL понимание объектно-ориентированного программирования, построение архитектуры базы данных. Основы безопасности сайта.

4. LINUX/GIT настройка серверов сайта, система контроля версий кода.

5. PHP фреймворк CODEIGNITER собираете полученные знания из предыдущих курсов и создаете профессиональный сайт, используя архитектуру MVC (model-view-controller).

6. JAVASCRIPT интеграция кода JS для живости сайта. Работа с библиотекой jQuery.

Любители сидят и ждут вдохновения, остальные просто встают и идут работать.

Стивен Кинг, американский писатель

Действуйте! Верим в вас и ваши возможности,
команда beONmax

Bootstrap: что это, с чего начать изучение и как использовать

Что такое Bootstrap и с чем его едят?

Это CSS-framework. Bootstrap входит в число самых популярных фреймворков HTML, CSS и JS. Это бесплатный набор инструментов для создания сайтов, который включает в себя элементы типографики, готовые веб-формы, кнопки, меню и прочие веб-элементы. Основным направлением фреймворка признана разработка сложных мобильных проектов. Немаловажным преимуществом Bootstrap является большое сообщество, которое в пять раз превосходит конкурентов.

Главная особенность Bootstrap — что это не только CSS фреймворк, но и Javascript-библиотека. В Bootstrap разработаны готовые к использованию стили и скрипты, подключение которых к документу происходит прописыванием нужных классов и атрибутов HTML-элементов.

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

История Bootstrap

Первая версия фреймворка была разработана создателями Twitter и называлась Blueprint. В 2011 году, спустя несколько месяцев закрытой разработки, проект был открыт для общего доступа. Ключевым свойством, которое сделало Bootstrap столь популярным, было введение адаптивной сетки для верстки сайтов. В дальнейшем проект только набирал обороты и развивался все более энергично. Он и по сей день находится в активной разработке. Самая новая версия вышла 18 января 2020 года. В Bootstrap 4 шаблоны выходят на новый уровень, а также появилось множество умных опций.

Назначение Bootstrap

Фреймворк (в переводе каркас, структура) — это платформа, помогающая разработать структуру программной системы, облегчающую разработку и объединение отдельных компонентов большого проекта. Проще говоря, это несколько файлов с готовым разработанным проектом, который подключается к сайту, как правило в разделе Head, и позволяет использовать свой функционал.

Как уже говорилось ранее, фреймворки призваны ускорять процесс разработки. Если каждый раз делать сайт от начала и до конца, многие вещи потребуют уйму времени, повторяясь из одного проекта в другой с незначительными изменениями. Сотни тысяч или даже миллионов строк кода. И каким бы хорошим разработчиком человек ни был, он не сможет избежать ошибок, отладка которых займет также уйму времени. Фреймворк — это почти гарантированно работающий и протестированный тысячами людей код.

Известно, что с сайтами фиксированного дизайна легко работать. Однако, когда дело касается адаптивной верстки, выясняется наружу выходит множество подводных камней. Благодаря своей ориентированности на мобильную разработку, Bootstrap позволяет обойти все проблемы. Только задумайтесь, сколько нужно будет выполнить медиа-запросов при разработке шаблонов среднего по размерам проекта.

Вместе с Bootstrap можно заниматься разработкой адаптивных шаблонов, даже не являясь первоклассным верстальщиком. Это вторая глобальная задача, которую решают фреймворки. Они позволяют без погружения в суть дела решать общий набор задач. Хорошо это или плохо? Но это существенно ускоряет процесс разработки.

Bootstrap берет на себя ответственность за адаптивность и кроссбраузерность верстки. Это два краеугольных камня современной веб-разработки, требующие множества усилий на отладку и доработку, если заниматься этим лично. Тогда как через готовые фреймворки это делается значительно легче и быстрее.

Другим важным преимуществом, раскрывающимся при использовании фреймворков (Bootstrap в частности), является командная работа над проектами. Использовать фреймворк — это как говорить на едином международном языке. Тогда как работа по старинке требует большого количество времени на поиск взаимопонимания. У каждого программиста свой стиль написания кода, комментирования, внесения правок и пр. В условиях, когда разработчики могут меняться в течение одного проекта десятки раз, постоянный поиск понимания занимал бы очень много времени.

Минусы Bootstrap

Поговорив о том, что это — Bootstrap и о его достоинствах, также следует упомянуть о недостатках.

  1. Избыточность. Как и у всякой популярной библиотеки общего назначения, в Bootstrap множество опций, которые не пригодятся в текущем проекте. Проще говоря, вам дают транспорт, который умеет летать, плавать, ездить и прыгать, а вам нужно только кататься по ровным дорогам. Остальные возможности не будут использованы. Bootstrap включает в себя все на все случаи жизни. Впрочем, такой ли это минус? Это позволяет использовать фреймворк в самых разных проектах. Стоит отметить, что разработчики идут на встречу своим пользователям, позволяя подключать и отключать возможности фреймворка по компонентам.
  2. Шаблонность. Шаблоны Bootstrap 4 включают в себя множество готовых вариантов, например, кнопок, которые используются повсеместно. Однако проблема легко решаема, если разработчик не ленив и готов потратить немного времени для настройки проекта под себя.
  3. Новизна. Bootstrap придерживается наиболее передовых разработок в своей области. Из-за этого могут возникать проблемы совместимости со старыми и устаревающими версиями браузеров.

В итоге получается, что минусы Bootstrap не такие серьезные. И больше относятся к удобству, нежели к действительному недостатку.

Компоненты Bootstrap

В Bootstrap есть все, что может понадобиться для разработки стандартного веб-проекта. Выпадающее меню, кнопки, слайдеры, окна оповещения (модальные окна Bootstrap), вкладки, индикаторы загрузки, «хлебные крошки» и многое-многое другое. Как уже говорилось ранее, Bootstrap позволяет включать и отключать компоненты и выбирать те из них, которые нужны.

Основные инструменты Bootstrap

[tchecklist]

  • Сетка — возможность задать размеры невидимых колонок и вести разработку дизайна вокруг них.
  • Шаблоны — доступны как фиксированные варианты, так и резиновые.
  • Типографика — шрифты, классы для шрифтов, иконки.
  • Медиа — позволяет управлять изображениями и видео.
  • Таблицы — средства редактирования и управления HTML-таблицами, вплоть до добавления динамичности (сортировки, переноса).
  • Формы — классы, отвечающие за оформление форм и обрабатывающие события, связанные с ними.
  • Навигация — вкладки, меню, панели навигации и пр.
  • Алерты — окна оповещения о каких-либо событиях на сайте, также называемые модальными окнами Bootstrap.

[/tchecklist]

Стоит также отметить темы. Хотя это не является официальной возможностью фреймворка, но обширное комьюнити создало огромное число цельных тем под Bootstrap. То есть все готовые, проработанные в определенной цветовой схеме веб-элементы, необходимые для сайта.

Как начать работать с Bootstrap?

Знакомство с любым фреймворком или библиотекой рекомендуется всегда начинать с посещения сайта разработчика. Как правило, там обязательно найдется раздел наподобие «Bootstrap — что это». В данном случае официальный сайт getbootstrap.com содержит отличный раздел get started. У хорошего разработчика не возникнет проблем с чтением документации на английском языке, для остальных — есть официальный русский перевод.

После сайта разработчиков следует обратить внимание на сообщество Bootstrap. В 90% случаев другие пользователи уже сталкивались с искомой проблемой и решили ее. Наконец, ввиду популярности фреймворка, у него существует огромное количество гайдов: как видео, так и сайтов-курсов.

По сложности Bootstrap — программа средних размеров. Ее освоение требует чтения документации, но главное — практики. Освоение происходит очень быстро благодаря проработанной детальной справке на сайте разработчика.

Bootstrap: что это, с чего начать изучение и как использовать на News4Auto.ru.

Наша жизнь состоит из будничных мелочей, которые так или иначе влияют на наше самочувствие, настроение и продуктивность. Не выспался — болит голова; выпил кофе, чтобы поправить ситуацию и взбодриться — стал раздражительным. Предусмотреть всё очень хочется, но никак не получается. Да ещё и вокруг все, как заведённые, дают советы: глютен в хлебе — не подходи, убьёт; шоколадка в кармане — прямой путь к выпадению зубов. Мы собираем самые популярные вопросов о здоровье, питании, заболеваниях и даем на них ответы, которые позволят чуть лучше понимать, что полезно для здоровья.

Bootstrap

Содержание:

Bootstrap (от англ. сущ. «шнуровка» (ботинок) или гл. «добиваться самостоятельно«) — бесплатный фреймворк (набор инструментов) для быстрой вёрстки сайтов и прототипирования интерфейсов веб-приложений. Создан изначально для нужд популярного микроблогингового сервиса Twitter, однако в 2011 году открыт для свободного скачивания всем желающим.

Bootstrap включает в себя готовые шаблоны блоков различной конфигурации, кнопок, таблиц, форм, которые добавляются в Ваш проект простым прописыванием специальных классов. Кроме готовых CSS и HTML-сниппетов, имеется и ряд JavaScript-дополнений, которые реализуют тот или иной специфический функционал.

Всё это в совокупности позволяет довольно быстро создавать прототипы различных пользовательских интерфейсов. Поэтому, если Вам нужно быстро сверстать современный адаптивный сайт, можете воспользоваться средствами Bootstrap, о которых мы Вам расскажем в статье ниже.

Быстрая вёрстка сайта

Язык: Русский Формат: Обновлено: 2020-08-19 Автор:

Используя возможности фреймворка Bootstrap, Вы сможете самостоятельно и быстро верстать современный сайт.

Вёрстка сайта – дело не сказать чтобы очень сложное, но довольно муторное. Помимо того, что нужно оснастить сайт требуемым функционалом, нужно ещё чтобы он был красивым! Такую красоту, обычно, делает дизайнер в Фотошопе. А задача верстальщика при этом сделать так же как на картинке. И вот для этого уже приходится попотеть.

Где-то с год назад я работал в команде с одним дизайнером над созданием сайта. И он после просмотра готового макета задал мне вопрос: «А ты что, не используешь сетку?». В Фотошопе он, оказывается, всё рисовал по направляющим, чтобы было ровно, однако в обычном HTML подобных средств выравнивания нет.

И вот тогда я и решился познакомиться с технологией, которая уже не первый год была у многих на устах – Bootstrap.


Зачем нужен Bootstrap

Чтобы понять, нужен ли Вам Bootstrap, необходимо сначала понять, что это такое и для чего. Кратко отвечая на вопрос, скажу, что Bootstrap – это набор стилей, скриптов (а в 3-й версии ещё и готовых символьных шрифтов), которые можно применять для быстрой вёрстки различных блоков сайта. При этом большинство этих блоков изначально поддерживают адаптивность и прилично выглядят на экранах мобильных устройств без каких-либо дополнительных действий с Вашей стороны.

Чтобы лучше понять, что же может Bootstrap и для чего конкретно его можно применить, предлагаю Вам взглянуть на следующую схему:

Сразу стоит сказать, что, несмотря на довольно хороший функционал, в Bootstrap часто не хватает некоторых популярных средств. Например, в нём нет:

  • сетки для вертикального выравнивания блоков (но есть свойства для выравнивания текстовых элементов);
  • свойств для адаптивного масштабирования текста (нужно использовать сторонние библиотеки или собственные механизмы);
  • средств для вёрстки полноэкранных лэндингов;
  • некоторых популярных плагинов (нормального слайдера, вертикальных табов, поэкранной прокрутки и т.п.);
  • ряда свойств для позиционирования.

Справедливости ради следует сказать, что недавно вышел Bootstrap 4, который довольно сильно отличается по реализации и функционалу от более распространённой версии Bootstrap 3. Однако, в рамках данной статьи мы рассмотрим именно проверенную временем и стабильную 3-ю версию (последняя на данный момент – 3.3.7).

Установка Bootstrap

Чтобы начать работу с Bootstrap его нужно правильно подключить в Ваш HTML-документ. Сделать это можно несколькими способами.

Внешнее подключение через Bootstrap CDN

Как в своё время было с популярной библиотекой jQuery (кстати, её наличие тоже обязательно), Bootstrap на сегодняшний день тоже обзавёлся собственной системой доставки контента (CDN). Это означает, что Вам можно ничего не качать для его установки – достаточно просто прописать ссылки на нужные Вам компоненты в Вашем HTML-документе.

Минимально необходимым набором компонентов для работы Bootstrap является его таблица стилей и файл скриптов (bootstrap.css и bootstrap.js, соответственно). Стили Бутстрапа нужно подключить в секции перед объявлением своих стилей (style.css), а скрипты можно отправить в «подвал» сайта для ускорения загрузки страницы. Кстати, для этой же цели лучше использовать минифицированные версии файлов, ссылки на которые выглядят так:

Рекомендуется также подключать CSS-файл темы, в котором содержатся уникальные стили оформления Вашей версии Bootstrap (о том, как её сделать речь пойдёт немного ниже). Его следует также поместить перед объявлением Вашей основной таблицы стилей, но после общих стилей Бутстрапа. Ссылка на подключение темы выглядит так:

Создание динамичных веб-сайтов с помощью Bootstrap

На этой странице

Bootstrap — это популярная бесплатная платформа для HTML, CSS и JavaScript, используемая для разработки динамичных веб-сайтов, оптимизированных для мобильных устройств. Платформа содержит удобные шаблоны HTML и CSS для кнопок, таблиц, переходов, каруселей изображений и других элементов, которые можно использовать на веб-страницах. Доступны несколько дополнительных подключаемых модулей JavaScript, с помощью которых даже начинающие разработчики смогут создавать потрясающие динамичные веб-сайты.

Dreamweaver позволяет создавать документы Bootstrap и редактировать существующие веб-страницы, созданные с помощью Bootstrap. Вы можете открывать в Dreamweaver как готовые файлы Bootstrap, так и незавершенные проекты, а затем редактировать их не только путем изменения кода, но и с использованием визуальных возможностей, например интерактивного просмотра, визуального конструктора CSS, визуальных медиазапросов и инструмента Extract.

На текущий момент поддерживаются версии Bootstrap 4.3.1 и 3.4.1.

Распространенные вопросы

Я использую «резиновые» макеты в Dreamweaver. Как можно начать работу с Bootstrap?

При создании документов с «резиновым» макетом Dreamweaver обеспечивает динамичность веб-страниц, автоматически применяя соответствующие классы. Вам достаточно сосредоточиться на своем содержимом и решить, как оно будет перекомпоновываться при отображении в различных формфакторах.

Аналогичным образом при работе с документами Bootstrap можно сосредоточить внимание только на содержимом и проекте и возложить задачу обеспечения динамичности веб-страницы на Dreamweaver, который тесно интегрирован с платформой Bootstrap.

В настоящее время Dreamweaver поддерживает версии Bootstrap 3.4.1 и 4.3.1.

«Bootstrap 3.4.1 включает адаптивную структуру сетки для мобильных устройств, которая должным образом масштабирует колонки (до 12) при увеличении размеров устройства или окна просмотра. Он включает предопределенные классы для простых макетов, а также эффективные миксины для создания семантически более сложных макетов» — документация по Bootstrap.

«Претерпевший существенные изменения Bootstrap 4.3.1 включает эффективную сетку flexbox для создания макетов любых форм и масштабов для мобильных устройств. В вашем распоряжении структура из 12 колонок, пять адаптивных уровней, переменные и миксины Sass, а также десятки предопределенных классов» — документация по Bootstrap.

Чтобы начать работу с документами Bootstrap в Dreamweaver, рассмотрите возможность использования начальных шаблонов Bootstrap. Dreamweaver содержит множество шаблонов, предназначенных для создания веб-сайтов различных типов, например сайтов электронной коммерции или портфолио.

Можно ли перенести существующие документы с «резиновым» макетом в документы Bootstrap в Dreamweaver?

Нет, прямого способа преобразования существующих документов с «резиновым» макетом в документы Bootstrap не существует. Тем не менее работа пользователя в Dreamweaver при создании и разработке документов Bootstrap аналогична работе с документами с «резиновыми» макетами. Например, можно приступить к созданию документа Bootstrap непосредственно в диалоговом окне Создать документ . Создание документов с «резиновым» макетом для трех основных формфакторов (мобильный телефон, планшет и ПК) для Bootstrap начинается с создания документа для основных размеров экрана: малого, среднего, большого и очень большого. Параметры редактирования макета, отображаемые при выборе элементов документов Bootstrap, также аналогичны применяемым для документов с «резиновыми» макетами.

Можно ли импортировать старые сайты в последнюю версию Dreamweaver?

Да, вы можете импортировать старые сайты в последнюю версию Dreamweaver. При этом Dreamweaver ищет CSS-файл Bootstrap в папке site root/css/ .

  • Если на сайте присутствует CSS-файл Bootstrap v3, то версия Bootstrap в разделе Управление сайтами > Дополнительные параметры > Bootstrap будет установлена в значение 3.4.1 .
  • Если на сайте присутствует CSS-файл Bootstrap v4, то версия Bootstrap в разделе Управление сайтами > Дополнительные параметры > Bootstrap будет установлена в значение 4.3.1 .
  • Если на сайте в папке site root/css отсутствует CSS-файл Bootstrap, то в разделе Управление сайтами > Дополнительные параметры > Bootstrap будет установлена версия Bootstrap 4.3.1 .

Создание документов Bootstrap

Разработку веб-сайта Bootstrap можно начать, выбрав один из следующих вариантов в диалоговом окне Создать документ .

  • Начальные шаблоны Bootstrap ( Начальные шаблоны > Шаблоны Bootstrap ) — используйте этот вариант, если хотите быстро начать работу, не занимаясь созданием макетов страниц с нуля. Просто отредактируйте текст, при необходимости замените ресурсы, и вы получите динамичный веб-сайт, готовый к работе. См. раздел Использование начальных шаблонов Bootstrap для получения дополнительных сведений.
  • Создать HTML-документ на базе платформы Bootstrap ( Создать документ > HTML > Bootstrap ) — используйте этот вариант, если хотите построить веб-сайт шаг за шагом, используя компоненты CSS и Bootstrap, доступные в Dreamweaver. Дополнительную информацию см. в разделе Создание HTML-документов на базе платформы Bootstrap.

Использование начальных шаблонов Bootstrap

Начальные шаблоны Bootstrap позволяют моментально создавать веб-страницы на популярные темы. Все зависимые файлы в рамках платформы сохраняются автоматически.

Выберите Файл > Создать .

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

Нажмите кнопку Создать .

Будет создана HTML-страница на основе выбранного шаблона. Теперь можно изменять страницу путем добавления или удаления компонентов, а также редактирования текста и ресурсов по мере необходимости.

Создание HTML-документов на базе платформы Bootstrap

Разработку динамичного веб-сайта можно начать с создания HTML-документа на платформе Bootstrap. Можно либо создать новый набор файлов платформы Bootstrap, либо использовать уже существующие файлы. После создания документа можно добавлять компоненты Bootstrap, например аккордеоны и карусели, используя панель «Вставка» в Dreamweaver. А если у вас есть файлы Photoshop, используйте функцию Extract, чтобы добавлять в документ Bootstrap изображения, шрифты, стили, текст и многое другое.

Выберите Файл > Создать .

В открывшемся диалоговом окне Создать документ выберите Создать документ > HTML , а затем щелкните по вкладке Bootstrap .

Чтобы создать новый файл bootstrap.css (и другие файлы Bootstrap), выполните следующие действия.

Укажите, следует ли создать новый CSS-файл Bootstrap или использовать существующий CSS-файл.

Если вы решили создать новый CSS-файл, в корневом каталоге сайта будет создана папка css, в которую будет скопирован файл bootstrap.css. В случае использования существующего файла CSS необходимо указать путь или перейти к его расположению.

Нажмите Создать новый .

(Необязательно) Если нужно прикрепить к документу любой другой CSS-файл, щелкните значок в разделе Присоединить CSS . Откроется диалоговое окно Присоединить внешнюю таблицу стилей . Укажите нужные параметры и нажмите кнопку ОК .

Параметр «Включить готовый макет» позволяет получить готовую базовую структуру документа Bootstrap.

Если вы не хотите использовать базовую структуру и предпочитаете начать с пустого документа, снимите флажок Включить готовый макет .

(Необязательно) Макет по умолчанию содержит 12 столбцов с внутренним полем 30 пикселов. Размеры экрана по умолчанию: 576 пикселов, 768 пикселов, 992 пикселов и 1200 пикселов.

Если нужно изменить эти параметры, нажмите кнопку Настройка . Файл bootstrap.css будет изменен соответствующим образом.

Для Bootstrap версии 3.4.0 размеры экрана по умолчанию будут составлять 768, 992 и 1200 пикселов.

Выберите Использовать Extract для создания страницы на основе композиций Photoshop , если нужно открыть панель Extract (в том случае, если она закрыта). В этом случае можно начать извлечение ресурсов из композиций Photoshop прямо сейчас.

По умолчанию новый сайт создается на основе Bootstrap версии 4.3.1. После создания документа в корневой папке сайта будут папки css и js. Однако, если вы хотите создать сайт с помощью Bootstrap версии 3.4.1, то выберите вариант Сайт > Управление сайтами. Выберите корневую папку сайта. Щелкните Дополнительные параметры > Bootstrap. В раскрывающемся списке Версия Bootstrap выберите 3.4.1. При использовании Bootstrap 3.4.1 в корневой папке сайта вы найдете папки css, js и fonts.

При создании страницы Bootstrap 4.3.1 поддерживается jQuery версии 3.3.1. Начальные шаблоны Bootstrap обновлены до версии Bootstrap 4.3.1.

При добавлении компонентов Bootstrap на страницу Bootstrap у вас есть возможность обновить страницы Bootstrap 4.0.0 до Bootstrap 4.3.1 и версию jQuery до 3.3.1. Нажмите кнопку Да в диалоговом окне, которое откроется при вставке компонентов Bootstrap на страницу.

При импорте сайта Bootstrap 4.0.0 или при переносе сайта с предыдущих версий на следующую версию релиза Dreamweaver версия Bootstrap получает значение 4.3.1 в разделе Настройка сайта > Дополнительные параметры > Bootstrap.

В Bootstrap 4.3.1 высота cтроки сетки со столбцом меняется c 1 пикс. до 0 пикс. Чтобы сделать его видимым в режиме интерактивного просмотра, необходимо добавить содержимое, опубликованное в строке сетки со столбцом.

Чтобы использовать существующие файлы платформы Bootstrap, выполните следующие действия.

Щелкните Использовать существующий и укажите путь к файлу bootstrap.css. Также можно перейти в папку, где сохранен CSS-файл.

(Необязательно) Если нужно прикрепить к документу любой другой CSS-файл, щелкните значок в разделе «Присоединить CSS». В диалоговом окне Присоединить внешнюю таблицу стилей укажите необходимые параметры и нажмите ОК .

Параметр «Включить готовый макет» позволяет получить готовую базовую структуру документа Bootstrap. Если вы не хотите использовать базовую структуру и предпочитаете начать с пустого документа, снимите флажок Включить готовый макет .

Нажмите кнопку «Создать» .

Создаваемый файл bootstrap.css доступен только для чтения. Таким образом, нельзя редактировать эти стили с помощью конструктора CSS; панель «Свойства» в конструкторе CSS в файлах Bootstrap отключена.

Если необходимо изменить стили в документе Bootstrap, создайте другой CSS-файл для переопределения существующих стилей, а затем присоедините его к документу.

Открытие файлов Bootstrap

Рекомендуется открывать и редактировать в Dreamweaver документы, созданные только в Bootstrap версии 3 и выше.

Открыть файлы Bootstrap можно одним из следующих способов.

  • Выберите Файл > Открыть и перейдите к HTML-файлу Bootstrap.
  • (Рекомендуется) Создайте сайт в Dreamweaver и выберите в качестве папки сайта папку, содержащую все необходимые файлы Bootstrap.

При открытии HTML-файла Bootstrap в Dreamweaver происходит следующее.

  • Строки выделяются серыми пунктирными линиями со скругленными углами.
  • Столбцы выделяются синими пунктирными линиями.

Dreamweaver распознает файлы CSS, связанные с имеющимися HTML-файлами Bootstrap, если имя файла CSS содержит слово «bootstrap». Ссылка на CSS-файл может быть представлена следующими способами.

    Локальный путь:

свернутый или развернутый CSS-файл, доступный локально. Например:

Удаленный путь:

свернутый или развернутый CSS-файл, доступный удаленно. Например:

CDN

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

Скрытие и показ скрытых элементов Bootstrap и управление ими

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

Чтобы скрыть элемент Bootstrap, щелкните его правой кнопкой мыши и выберите «Скрыть элемент». Элемент будет временно скрыт в представлении.

Для просмотра и отображения скрытых элементов щелкните правой кнопкой мыши и выберите «Управление скрытыми элементами». Скрытые элементы отображаются на сером заштрихованном фоне. Щелкните значок глаза, чтобы отобразить элемент.

Добавление компонентов Bootstrap

Параметр «Компоненты Bootstrap» на панели Вставка содержит список всех компонентов Bootstrap, которые можно добавить на веб-страницу в Dreamweaver. В зависимости от версии Bootstrap в файле bootstrap.css, подключенном к странице HTML, соответствующие компоненты будут представлены на панели Вставка . Например, в Bootstrap версии 4.0.0 отображаются такие дополнительные компоненты, как карты и значки. Аналогичным образом, компоненты Glyphicon, панели, колодцы и миниатюры доступны только в Bootstrap версии 3.3.7. В зависимости от версии Bootstrap соответствующие компоненты отображаются на панели Вставка .

Заполнение компонентов на панели Вставка происходит на основе следующих критериев.

  • Документ находится в фокусе: компоненты на панели «Вставка» заполняются в зависимости от версии Bootstrap в файле Bootstrap, привязанном к документу.
  • «Версия» в настройках сайта. Для документов без bootstrap Dreamweaver ищет номер версии в разделе Настройки сайта > Дополнительно > Bootstrap. В зависимости от версии в данном параметре будет произведено заполнение соответствующих компонентов. По умолчанию для новых сайтов используется версия 4.3.1.
  • Путь сохранения файлов: для документа, не являющегося Bootstrap и не относящегося ни к одному сайту, на панели «Вставка» будут показаны компоненты версии 4.3.1.

Чтобы добавить компонент, перетащите его из панели на свою веб-страницу. При перетаскивании компонента обратите внимание на визуальные подсказки, например интерактивные направляющие, подсказки точной вставки (при использовании DOM) и помощника по выбору положения. Используйте эти средства для быстрого и точного размещения компонентов на странице. Дополнительные сведения о вставке элементов на веб-страницу см. в разделе Обзор панели «Вставка».

Добавление строк

Выберите строку, после которой требуется добавить новую строку. Затем щелкните значок «Добавить новую строку». Будут добавлены строка Bootstrap и два дочерних элемента с шестью столбцами в каждом.

Код для добавленной строки выглядит следующим образом:

где «*» соответствует текущему размеру экрана в Dreamweaver.

Добавление столбцов

Выберите требуемый столбец и щелкните значок «Добавить новый столбец». Выбранный столбец будет скопирован без дочерних элементов.

Всем пустым столбцам назначается минимальная высота 20px. Тем не менее она фактически не добавляется на страницу. Она отображается только в интерактивном просмотре для упрощения вставки элементов в столбцы.

Повторяющиеся строки и столбцы

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

Функция «Добавить строку/Добавить столбец» дублирует строку или столбец вместе с классами, но без содержимого.

Изменение размера и смещение столбцов

Изменение размера и смещение столбцов становится необходимым при создании быстродействующих проектов с различными областями просмотра.

Изменение размера столбцов

Для изменения размера выберите требуемый столбец и перетащите находящийся справа маркер. Для документов с Bootstrap версии 4.0.0: при изменении размера столбца добавляется класс col-*-n, где «*» соответствует текущему медиазапросу (xsm, md, ld, xl), а «n» — количеству занимаемых классом столбцов. Для размера экрана Очень маленький будет добавлен класс col-n.

Для документов с Bootstrap версии 3.3.7: при изменении размера столбца добавляется класс col-*-n , где «*» соответствует текущему медиазапросу (xs, sm, md или lg), а «n» — количеству занимаемых классом столбцов.

Dreamweaver определяет текущий размер экрана и добавляет соответствующий класс. Чтобы изменить размер столбцов в соответствии с определенными областями просмотра, измените размер области просмотра, используя настройки в правом нижнем углу или инструмент прокрутки. Затем измените размер столбцов.

Смещение столбцов

Чтобы сместить столбец, выберите требуемый столбец и перетащите находящийся слева маркер. Смещение отображается как заштрихованная область. Для документов с Bootstrap версии 4.0.0: при смещении столбца добавляется класс offset-*-n, где «*» соответствует текущему медиазапросу (sm, md, lg или xl), а «n» — количеству занимаемых классом столбцов.

Для документов с Bootstrap версии 3.3.7: при смещении столбца добавляется класс col-*-offset-n, где «*» соответствует текущему медиазапросу (xs, sm, md или lg), а «n» — количеству столбцов, на которое происходит сдвиг.

Dreamweaver определяет текущий размер экрана и добавляет соответствующий класс. Чтобы сместить столбцы в соответствии с определенными областями просмотра, измените размер области просмотра, используя настройки в правом нижнем углу или инструмент прокрутки. Затем сдвиньте столбцы.

На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Bootstrap 4. Начало работы. Шаблон

Фреймворк Bootstrap получил очень широкое распространение благодаря массе факторов, главным из которых являлось использование классов для быстрого построения адаптивной сетки, основанной на 12 столбцах. Также Bootstrap предоставляет в своем составе набор плагинов jQuery, позволяющий простым добавлением кода вставить такие интерактивные элементы, как карусель (или слайдер), вплывающие подсказки, модальные окна и др.

Огромное количество сайтов было сделано на основе версии 3, последней из которых является Bootstrap 3.3.7 (перейти на официальный сайт). Более года разрабатывался Bootstrap 4, который был доступен для скачивания в alpha-версии. На данный момент можно использовать версию 4.1.1 Bootstrap-4. Лучше всего скачивать его с официального сайта, хотя вы можете это сделать и на русскоязычном сайте, если с английским пока беда.

Загрузка и подключение файлов Bootstrap 4

Bootstrap 4 доступен для скачивания в скомпилированном виде, т.е. файлы, которые вы получите после распаковки архива будут в формате css и js, причем они будут размещены в соответствующих папках css и js.

Можно также скачать исходные файлы, которые подойдут для разработчиков, знакомых с SASS (SCSS). Этот вариант лучше подходит для тех, кто будет менять значение переменных для создания собственных параметров сетки, цветов, отступов или шрифтов. Если вы пока не разбираетесь в принципах SASS, имеет смысл подключать стандартную версию Bootstrap 4 и переопределять некоторые правила в собственном стилевом файле. Также можно будет подключать различные темы Bootstrap.

Если вы не хотите или не можете скачать архив с основными файлами Bootstrap, тогда ваш вариант — подключение файлов через Bootstrap CDN. В этом случае вам необходимо стабильное соединение с Интернетом.

Илон Маск рекомендует:  Склонение слов рубля, рублей
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL