Обзор Bootstrap, включая загрузку и использование, некоторые основные шаблоны и примеры и многое другое.
Введение
Bootstrap — это самая популярная в мире платформа для создания адаптивных сайтов и приложений. Внутри вы найдете HTML, CSS и JavaScript высокого качества, чтобы сделать любой проект проще, чем когда-либо.
Вот как быстро начать работу с Bootstrap CDN и стартовой страницей шаблона.
Быстрый старт
Хотите быстро добавить Bootstrap в свой проект? Используйте компакт-диск Bootstrap CDN, предоставляемый бесплатно пользователями MaxCDN. Используете диспетчер пакетов или нуждаетесь в загрузке исходных файлов?Перейдите на страницу загрузки.
Скопируйте таблицу стилей в ваш перед всеми другими таблицами стилей, чтобы загрузить наш CSS.
Добавьте плагины JavaScript, jQuery и Tether в конец ваших страниц прямо перед закрывающим тегом
. Обязательно разместите jQuery и Tether, так как наш код зависит от них. Хотя мы используем jQuery’s slim build в наших документах, полная версия также поддерживается.
И это все, вы на своем пути к полностью Bootstrap-овскому сайту. Если вы не уверены в общей структуре страницы, продолжайте читать пример шаблона страницы.
Стартовый шаблон
Убедитесь, что ваши страницы настроены с учетом последних стандартов проектирования и разработки. Это означает использование HTML5 doctype и включение метатега viewport для правильного адаптивного поведения. Поместите все это вместе, и ваши страницы должны выглядеть следующим образом:
Это все, что вам нужно для общих требований к страницам. Посмотрите Layout docs или наши официальные примеры, чтобы начать компоновку контента и компонентов вашего сайта.
Важные глобальные переменные
Bootstrap использует несколько важных глобальных стилей и настроек, о которых вам нужно знать при использовании, и которые почти исключительно направлены на нормализацию стилей кросс-браузера.
HTML5 doctype
Bootstrap требует использования doctype HTML5.
lang="en"> .
Адаптивный meta tag
Bootstrap разработан по стратегии mobile first, при которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости с помощью меди-запросов CSS. Чтобы обеспечить правильное отображение и масштабирование для всех устройств, добавьте адаптивный viewport meta tag в ваш .
Вы можете увидеть пример этого в действии в стартовом шаблоне.
Box-sizing
Для более простого определения размеров в CSS мы переключаем глобальное значение box-sizing из content-box в border-box . Это гарантирует, что padding не повлияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторыми сторонними программными продуктами, такими как Google Maps и Google Custom Search Engine.
В редком случае вам нужно переопределить его, используйте что-то вроде следующего:
С указанным фрагментом вложенные элементы — включая сгенерированный контент с помощью :before и :after — все наследуют указанный box-sizing для этого .selector-for-some-widget .
Normalize.css
Для улучшения кроссбраузерного рендеринга мы используем Normalize.css для коррекции небольших несоответствий между браузерами и устройствами. Мы также используем наши собственные стили с Reboot.
Сообщество
Будьте в курсе разработки Bootstrap и обращайтесь к сообществу с этими полезными ресурсами.
Следуйте за @getbootstrap в Twitter.
Читайте и подписывайтесь на The Official Bootstrap Blog.
Присоединяйтесь к the official Slack room.
Общайтесь с другими Bootstrappers в IRC. На сервере irc.freenode.net в канале ##bootstrap .
Справку по внедрению можно найти в Stack Overflow ( bootstrap-4 ).
Разработчики должны использовать ключевое слово bootstrap для пакетов, которые изменяют или добавляют к функциональности Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной видимости.
Вы также можете следить за @getbootstrap в Twitter за последними сплетнями и потрясающими музыкальными видео.
Комментарии
На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter.
Поддержать проект
Разработан и создан с любовью @mdo и @fat. Поддерживается основной командой с помощью наших авторов.
Перевод — компания SIMAI. Нашли ошибку? Сообщите нам! Выделите и нажмите Ctr+Enter.
Создавайте быстрые, отзывчивые сайты с помощью Bootstrap
Быстро создавайте и настраивайте адаптивные сайты, ориентированные на мобильные устройства, с помощью Bootstrap, самого популярного в мире инструментария с открытым исходным кодом для интерфейса пользователя, включающего переменные и миксины Sass, адаптивную сеточную систему, обширные предварительно созданные компоненты и мощные плагины JavaScript.
В настоящее время v5.0.1
Установка
Установите исходные файлы Sass и JavaScript для Bootstrap через npm, Composer или Meteor. Установки, управляемые пакетами, не включают в себя документацию или наши сценарии полной сборки. Вы также можете использовать репозиторий шаблонов npm, чтобы быстро создать проект Bootstrap через npm. Прочтите документацию по установке
npm install bootstrap
gem install bootstrap -v 5.0.0-alpha1
BootstrapCDN
Когда вам нужно только включить скомпилированный CSS или JS Bootstrap , вы можете использовать BootstrapCDN. Посмотрите, как это работает, с помощью нашего простого стартового шаблона, или посмотрите примеры, чтобы начать свой следующий проект. Изучить документацию
Впервые в истории Bootstrap появилась собственная библиотека значков SVG с открытым исходным кодом, предназначенная для наилучшей работы с нашими компонентами и документацией. Иконки Bootstrap лучше всего работают с компонентами Bootstrap, но они будут работать в любом проекте. Это SVG-файлы, поэтому они легко и быстро масштабируются, могут быть реализованы несколькими способами и стилизованы с помощью CSS. Получить Bootstrap иконки
Официальные темы
Поднимите Bootstrap на новый уровень с премиальными темами с официального магазина Bootstrap тем. Темы создаются на Bootstrap как собственные расширенные фреймворки, богатые новыми компонентами и плагинами, документацией и мощными инструментами сборки. Обзор тем
Разработан и построен с любовью к миру, командой Bootstrap и помощью наших участников.
В настоящее время v5.0.0-alpha1. Код под лицензией MIT, документы CC BY 3.0.
Bootstrap — это открытый и бесплатный HTML-, CSS- и JS-фреймворк, который используют веб-разработчики для быстрой верстки адаптивных дизайнов сайтов и веб-приложений. Включает в себя CSS- и HTML-шаблоны оформления для веб-форм, меток, типографики, кнопок, блоков навигации и других компонентов веб-интерфейса.
Освойте профессию «Frontend-разработчик»
Кто и когда использует Bootstrap
Фреймворк используют frontend-, fullstack-разработчики. Для работы с инструментом нужны минимальные знания верстки, поэтому он подходит новичкам.
Bootstrap используется, когда:
у сайта много страниц;
страницы собраны из простых базовых элементов — кнопок или таблиц;
не будет глобального редизайна;
шаблонность страниц окупается скоростью внедрения.
Профессия / 9 месяцев
Frontend-разработчик
Создавайте интерфейсы сервисов, которыми пользуются все
Из чего состоит Bootstrap
По сути, Bootstrap — это набор файлов. После их подключения к странице для верстки станет доступно большое количество готовых компонентов и классов. Они позволяют быстро и качественно создавать адаптивный дизайн сайта.
Классы в Bootstrap делятся на 3 большие группы:
для создания сетки — адаптивного макета страницы;
для стилизации контента — текста, изображений, кода, таблиц и прочей информации;
служебные — для решения популярных вспомогательных задач, таких как отображение и скрытие элементов, выравнивание текста на странице, настройка цвета фона, отступов и пр.
Кроме классов, в Bootstrap есть компоненты (готовые объекты интерфейса). Это хлебные крошки (путь от начального элемента до уровня иерархии, который сейчас просматривает пользователь), кнопки, выпадающие списки и подсказки, модальные окна, формы, навигационные меню, всплывающие панели и пр.
Особенности Bootstrap
Снижение количества времени на разработку
Фреймворк дает готовые решения, которые позволяют создавать макеты сайтов быстрее. Для быстрого запуска проектов есть множество примеров. Для верстки любых прототипов (альбомов, слайдеров, панели входа и т. д.) потребуются файлы index.html, которые находятся в каждой папке с примерами, и соответствующий CSS-файл. Например, carousel.css или cover.css. Изменять код можно по своему усмотрению, внося правки в текстовом редакторе. Bootstrap позволяет скопировать код из примера и вставить его в свой проект, к которому подключен фреймворк.
Адаптивность и кроссбраузерность
Сайт будет корректно отображаться в современных браузерах и на экранах устройств различных размеров, независимо от диагонали. Для этого не нужно вносить изменения в разметку. Вероятность непредвиденных ошибок в функционале и верстке сведена к минимуму.
Станьте Frontend-разработчиком и создавайте интерфейсы сервисов, которыми пользуются все
Легкость в использовании и открытость
Bootstrap очень простой для освоения и работы. Кроме того, к фреймворку есть множество уроков и инструкций. Открытый исходный код позволяет адаптировать Bootstrap под свои потребности.
Понятный код
С помощью Bootstrap можно писать простой и качественный код, который будет понятен другим разработчикам. Это облегчает работу в команде.
Единство стилей
Элементы фреймворка гармонично сочетаются друг с другом, что позволяет создавать сайты и страницы в едином стиле.
Шаблонность
Сайты, созданные с помощью Bootstrap, имеют одинаковую навигацию, структуру, кнопки. Чтобы решить проблему, можно изменять шаблон в зависимости от идей дизайнеров и пожеланий заказчика.
Отсутствие поддержки устаревших версий браузеров
Так как Bootstrap постоянно обновляется, сайты на Bootstrap могут некорректно отображаться в старых браузерах.
Как начать работу с Bootstrap
Чтобы начать работать с Bootstrap, нужен текстовый редактор для работы с кодом (Visual Studio Code, Atom, Sublime Text и т.п.) или IDE — интегрированная среда разработки, а также браузер, в котором можно отслеживать изменения. Он должен быть обновлен до версии, которую поддерживает последний вариант Bootstrap.
Существует несколько способов установки Bootstrap. Получить актуальную версию фреймворка можно на официальном сайте.
Подключение скомпилированных файлов через BootstrapCDN — общедоступную сеть доставки контента. Достаточно создать шаблон HTML и разместить внутри него ссылку на фреймворк.
Скачивание скомпилированных файлов CSS и JS с их подключением к проекту через ссылки.
Скачивание исходных файлов. Для работы потребуются компилятор CSS и автопрефиксатор.
Установка исходных файлов с помощью менеджеров пакетов yarn, npm, RubyGems, NuGet, Composer.
Frontend-разработчик
Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.
Статьи по теме:
Введение
Начните работу с Bootstrap, самым популярным в мире фреймворком для создания быстродействующих мобильных сайтов с загрузочным CDN и шаблонами стартовой страницы.
Быстрый старт
Хотите использовать Bootstrap в своем проекте? Bootstrap – библиотека шаблонов CSS, распространяемая свободно командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap? Посетите страницу загрузок.
CSS
Вставьте эту часть кода в , перед всеми прочими файлами CSS, для загрузки Bootstrap.
Многие из наших компонентов требуют использования JavaScript. Точнее — им требуются jQuery, Popper.js и наши собственные плагины. Для активации плагинов разместите следующий кусок кода в конце страниц, прямо перед закрывающим . Сперва jQuery , потом Popper.js, потом наши.
Мы используем мини-сборку jQuery, но и полную можно использовать.
Любопытно, какие компоненты явно требуют jQuery, наших JS и Popper.js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.
Уведомления отмены
Кнопки изменения состояний и чекбоксов/»радио»
Карусель для поведения «слайд», элементы контроля и индикаторы
Коллапс для изменения видимости содержимого
Выпадающие элементы для отображения и расположения (также требует Popper.js)
Модальные окна для отображения, расположения и создания поведения прокрутки
Навбар для расширения нашего плагина коллапса для придания отзывчивого поведения
Выплывающие подсказки и окна для отображения и расположения (также требует Popper.js)
Отслеживание прокрутки и обновления навигации
Начальный шаблон страницы
Удостоверьтесь, что ваши страницы сверстаны по новейшим стандартам. Они должны включать и использовать HTML5 doctype и viewport meta tag для правильного «отзывчивого» поведения страниц. Вот как должен выглядеть «верхний», коренной код страницы:
Это все, что вам нужно из общих требований к странице. Посетите Обзорный раздел или наши официальные примеры для создания контента и компонентов вашего сайта.
Важные глобальные атрибуты
Bootstrap включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.
HTML5 doctype
Bootstrap требует использования doctype «HTML5». Без него у вас возникнут некоторые проблемы со стилями.
lang="en"> .
«Отзывчивый» мета-тэг
Bootstrap разрабатывался как mobile first, т.е. его настройки прежде всего оптимизированы под мобильные устройства, а уж потом с помощью медиа-запросов мы подгоняем масштаб компонентов как нам необходимо на прочих устройствах. Вставьте этот кусок кода в :
Вы можете посмотреть пример этого в действии на странице starter template.
Размер ширины и высоты элемента
Для большей простоты масштабирования в CSS мы изменяем глобальное значение box-sizing с content-box на border-box . Это гарантирует, что padding не будет влиять на конечную вычисленную ширину элемента; однако может создать проблемы для сторонних приложений, таких как Google Maps или поисковой движок Google.
В том редком случае, когда вам надо преодолеть эти возможные баги, делайте так:
.selector-for-some-widgetbox-sizing:content-box;>
С использованием фрагмента кода, приведенного выше, вложенные элементы – включая сгенерированный через :before и :after контент – будут все наследовать заданный box-sizing для класса .selector-for-some-widget .
Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.
«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)
Для улучшенной кроссбраузерной визуализации мы применили «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.
Сообщество
Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:
@getbootstrap on Twitter.
The Official Bootstrap Blog.
Спрашивайте и изучайте наши обсуждения на GitHub.
Чат с камрадами по Bootstrap. Канал ##bootstrap на сервере irc.freenode.net .
Помощь в реализации Bootstrap 4 на Stackoverflow bootstrap-4 ).
При разработке через npm или аналогичные депозитарии, разработчикам следует использовать ключевое слово bootstrap в своих пакетах и библиотеках для максимальной видимости.
Вы также можете присоединиться @getbootstrap on Twitter для получения «свежайших» слухов и классных музыкальных клипов.
