Фреймворк бутстрап что это
Если вы хотите начать свою карьеру в веб-разработке, то изучение Bootstrap — это то, что вам нужно. Bootstrap — это фреймворк, используемый для разработки веб-приложений. Его библиотека интерфейсных компонентов широко используется для создания интерактивных и адаптивных веб-приложений и веб-сайтов, к которым мы привыкли сегодня.
Если вы еще не знаете, что такое адаптивные сайты, то вам должно быть это интересно. Проще говоря, отзывчивость веб-сайта означает, что при изменении размера экрана, на котором просматривается веб-сайт, макет веб-сайта реагирует на это и изменяется. Это позволяет веб-сайтам выглядеть хорошо независимо от того, на каком экране они просматриваются.
Как работает Bootstrap?
Есть два способа использования Bootstrap. Вы можете либо импортировать Bootstrap в свой код, либо загрузить пример проекта Bootstrap и построить на нем свой сайт.
Bootstrap использует 12-колоночную модель для отображения веб-сайта, которая называется сеткой Bootstrap. В этой сетке вы можете определить различные контрольные точки для размещения различных компонентов, таких как заголовки, абзацы и кнопки, чтобы сделать ваш сайт визуально привлекательным. Когда размер экрана уменьшается, компоненты в сетке изменяют макет, чтобы соответствовать меньшему экрану. Это означает, что просмотр одного и того же веб-сайта великолепно выглядит на экране обычного размера вашего ноутбука и на экране меньшего размера вашего смартфона.
Bootstrap стал сегодня одной из самых популярных сред разработки фронт-эндов. Если вы новичок, который хочет начать изучать Bootstrap, то вы на правильном блоге. Потому что вот лучшие 10 советов, чтобы и освоить Bootstrap
10 советов, с помощью которых вы сможете овладеть навыками Bootstrap
1. Проведите исследование по начальной загрузке
Это всегда отличный шаг для предварительного исследования того, что вы хотите использовать. Вы должны узнать о Bootstrap и о том, как он работает, прежде чем приступить к его использованию. Поймите, как его можно импортировать в написанный код или как создать пример проекта Bootstrap.
Вся информация относительно документации Bootstrap доступна на их сайте. Для большинства вещей в Bootstrap имеется заранее написанный код, который необходимо изучить, прежде чем приступить к написанию собственной версии.
2. Получите предварительные знания JavaScript, CSS и HTML
JavaScript, CSS и HTML — это языки интерфейса, используемые Bootstrap. Для использования среды Bootstrap важно, чтобы вы свободно владели этими языками и знали, какое программное обеспечение для разработки, например, IDE, использовать с ними.
Нетрудно освоить и JavaScript, CSS и HTML, и для этого есть ряд различных онлайн-ресурсов. Также доступны руководства по выбору лучших IDE для этих языков.
3. Установите последнюю версию Bootstrap для использования
С постоянно совершенствующейся игрой для веб-разработки также развивались фреймворк и инструменты. Bootstrap также выпускается с несколькими версиями, последней из которых является Bootstrap версии 4.3 со значительными обновлениями. К ним относятся 5-уровневая сеточная система, глобальный размер шрифта 16px, набор новых служебных классов и дополнительные функции для создания адаптивного дизайна. Поэтому убедитесь, что вы установили самую последнюю версию Bootstrap, чтобы использовать последние добавленные и обновленные функции.
4. Используйте онлайн-ресурсы для изучения Bootstrap
Интернет — ваш лучший друг, если вы хотите самостоятельно изучить Bootstrap. Есть ряд онлайн-курсов, учебных пособий, руководств, блогов и примеров для изучения. Существует два типа онлайн-курсов: бесплатные и платные. Это либо комплексные долгосрочные курсы, охватывающие все концепции и функции Bootstrap, либо краткие и быстрые учебные пособия по конкретным функциям и компонентам.
Еще один замечательный онлайн-ресурс для изучения Bootstrap — сообщество пользователей Bootstrap. Общайтесь и взаимодействуйте с людьми, которые уже используют платформу Bootstrap и учитесь на их опыте. Вы можете найти их в блогах Bootstrap или в сообществах веб-разработчиков в социальных сетях.
Начало онлайн-курса поможет ответить на все ваши вопросы, касающиеся Bootstrap, и поможет быстро стать профессионалом в использовании фреймворка. Итак, ищите полезные ресурсы и курсы и начинайте.
5. Практика делает тебя идеальным!
Еще один отличный совет, чтобы овладеть вашими навыками Bootstrap — практиковаться в его использовании как можно больше. Проведите тестирование фреймворка, экспериментируя с созданием реального веб-сайта, и учитесь по пути. Используя свои знания CSS, HTML и JavaScript, попробуйте создать веб-сайт из ничего, составив макет. Делая это, вы будете делать ошибки по пути, но вы также многому научитесь на них. Как только вы улучшите свои навыки создания базового макета сайта с помощью Bootstrap, вы можете настроить его так, чтобы он выглядел модным и продвинутым.
6. Обратитесь к справочным руководствам
Для каждого языка интерфейса, который использует Bootstrap, имеются справочные руководства, касающиеся синтаксиса, концепций и всей другой соответствующей информации. Языковые руководства для HTML, JavaScript и CSS можно легко найти в Интернете. Отличным примером этого являются руководства по разработке Mozilla. Они предоставляют каталог информации о свойствах, синтаксисе, элементах и их описании.
Справочные руководства окажут вам большую помощь, когда вы столкнетесь с такими проблемами в коде, как сложный синтаксис и т. д.
7. Плагины являются ключом к хорошему дизайну сайта
Включение плагинов на ваш сайт — это отличная методика разработки. Bootstrap предлагает несколько плагинов, написанных на JavaScript, которые вы можете легко использовать в дизайне своего сайта без написания ни единой строчки кода.
Существуют онлайн-библиотеки плагинов, которые вы можете найти в Интернете, некоторые из них являются официальными библиотеками плагинов Bootstrap, а некоторые являются неофициальными. В любом случае, использование плагинов для формы, меню и навигации, таблиц, кнопок и уведомлений может сделать ваш сайт выдающимся. Итак, изучите различные плагины и поэкспериментируйте с ними.
8. Сосредоточьте свой подход на компонентах
При разработке веб-приложения с использованием Bootstrap идеально использовать подход, ориентированный на компоненты, а не на страницы. Так что это значит? Это означает, что вместо того, чтобы фокусироваться на создании CSS и HTML для каждой страницы, вам следует больше думать о каждом компоненте на странице. Такое мышление поможет вам разработать повторно используемые компоненты, которые можно будет использовать на нескольких страницах, что сделает процесс кодирования более простым и эффективным.
Этот подход может быть особенно полезен при разработке большого веб-сайта, где использование компонентов на всех страницах может быть эффективным с точки зрения затрат времени и, прежде всего, может привести к согласованности общего дизайна веб-сайта.
9. Сосредоточьтесь на мобильности
При разработке веб-приложений распространена практика фокусировать ваш дизайн на мобильных устройствах. На самом деле, это является ключом к разработке адаптивных сайтов. Этот подход называется “Mobile First”.
Поскольку мобильный дизайн имеет больше ограничений, он всегда идеален. Поэтому лучше сначала начинать разрабатывать ваш сайт для мобильных устройств. Затем вы можете расширить его возможности для настольной версии обычного размера или версии планшета, которые имеют меньшие ограничения.
Итак, чтобы упростить использование Bootstrap, сначала создайте веб-сайты для мобильных устройств, а затем расширьте дизайн.
10. Расширение и настройка Bootstrap
Последний самый важный совет по использованию Bootstrap — понять, что использование только Bootstrap может быть недостаточно. Несмотря на то, что он предлагает широкий спектр решений, только их использование сделает ваш веб-сайт или приложение похожим на все другие веб-сайты. Итак, если вы хотите, чтобы ваш сайт выделялся среди остальных, то настройте его.
Вы можете использовать Bootstrap для создания базы для вашего веб-приложения и добавления дополнительных классов в соответствии с вашими требованиями. Вы также можете создать настроенную версию Bootstrap для своего сайта, чтобы он выглядел уникальным. Веб-сайт Bootstrap предлагает всю информацию о настройке и поддерживаемых параметрах. Так что проверьте это и не бойтесь настраивать.
Фреймворк Bootstrap используется по всему миру не только независимыми разработчиками, но иногда и целыми компаниями. На Bootstrap создано очень много различных сайтов, посмотреть их можно на странице Bootstrap Expo.
Основная область его применения – это фронтенд разработка сайтов и интерфейсов админок . Среди аналогичных систем (Foundation, UIkit, Semantic UI, InK и др.) фреймворк Bootstrap является самым популярным .
Почему Bootstrap так популярен? Это связано с тем, что он позволяет верстать сайты в несколько раз быстрее, чем на «чистом» CSS и JavaScript. А в нашем мире, время – это очень ценный ресурс. Ещё один его аспект – доступность . Она сводится к тому, что предоставляет возможность даже начинающему веб-разработчику (без глубоких знаний и достаточной практики) создавать достаточно качественные макеты .
Фреймворк Bootstrap – это набор набор CSS и JavaScript файлов . Чтобы его использовать эти файлы необходимо просто подключить к странице. После этого вам станут доступны инструменты данного фреймворка: колоночная система (сетка Bootstrap), классы и компоненты .
Как он работает? Например, чтобы создать кнопку на странице с помощью Bootstrap, достаточно к ссылке или элементу button добавить всего несколько классов.
Создание кнопки в Bootstrap 5:
Ну как? Сколько на это потребовалось времени? Да, всего несколько секунд.
А если, например, нужно создать вкладки . Для этого необходимо всего лишь скопировать готовый HTML фрагмент, и отредактировать его так, чтобы в нём остался код для определённого количества вкладок:
Всё, вкладки готовы. На это тоже ушли считанные секунды. Правда, потрясающая скорость. В этом сила Bootstrap.
Но, Bootstrap – это не просто набор готовых инструментов (HTML фрагментов, классов, компонентов и плагинов), а хорошо спроектированный фронтенд фреймворк, который довольно просто можно настроить под себя посредством редактирования Sass переменных и использования миксинов.
Из чего состоит Bootstrap
Bootstrap состоит из:
- инструментов для создания макета (обёрточных контейнеров, мощной системы сеток, гибких медиа-объектов, адаптивных утилитных классов);
- классов для стилизации базового контента: текста, изображений, кода, таблиц и figure ;
- готовых компонентов: кнопок, форм, горизонтальных и вертикальных навигационных панелей, слайдеров, выпадающих списков, аккордеонов, модальных окон, всплывающих подсказок и др.;
- утилитных классов для решения традиционных задач наиболее часто возникающими перед веб-разработчиками: выравнивание текста, отображение и скрытие элементов, задания цвета, фона, margin и padding отступов, и т.д.
С чего начать изучение Bootstrap
Первое, что нам необходимо — это скачать фреймворк и подключить его к странице . Как это выполнить детально описано в статье «Установка платформы Bootstrap».
После того как мы это сделаем обычно возникает следующий вопрос: «А что дальше? Как использовать Bootstrap?» . На самом деле тут нет ничего сложного, создавать страницы с использованием Bootstrap довольно просто.
Сначала необходимо изучить сетку и попрактиковаться на ней верстать макеты страниц и создавать разметку блоков. Изучить её можно тут (для тех, кто использует Bootstrap 3) или здесь (для Bootstrap 4).
К сведению, сетка в «Bootstrap 3.x» построена на float , а в «4.x» и «5.x» – на flexbox .
После того как разберётесь с сеткой нужно изучить компоненты Bootstrap (как они верстаются и настраиваются) и научиться их вставлять в нужные места страницы.
Это минимальные задачи, которые перед собой необходимо поставить, чтобы научиться верстать сайты и веб-приложения на Bootstrap.
Ну если ваша задача не просто использовать Bootstrap, а что-то в нём изменять, переделывать, то без хороших знаний CSS тут конечно уже не обойтись. Некоторые вещи, конечно, можно настроить через изменения SCSS переменных и применения миксинов, а другие – нет. И это касается любых фреймворков.
Преимущества и недостатки фреймворка Bootstrap
Преимущества Bootstrap при его использовании для frontend разработки сайтов и интерфейсов админок:
- высокая скорость создания качественной адаптивной вёрстки даже начинающими веб-разработчиками (достигается это благодаря использованию готовых классов и компонентов, созданных профессионалами);
- кроссбраузерность и кроссплатформеннось (корректное отображение и работа сайта во всех поддерживаемых этим фреймворком браузерах и операционных системах);
- наличие большого количество готовых хорошо продуманных компонентов , протестированных огромным сообществом веб-разработчиков на различных устройствах;
- возможность настройки под свой проект , достигается это посредством изменения SCSS переменных и использования миксинов (можно изменить количество колонок, цвета, радиус скруглений, отступы между колонками и т.д.);
- низкий порог вхождения ; для работы с фреймворком не обязательно иметь «глубокие» знания по HTML, CSS, JavaScript и jQuery (достаточно знать только основы этих технологий);
- однородность дизайна и его согласованность между различными компонентами (в Bootstrap все компоненты выполнены в едином стиле);
- наличие огромного количества сообществ и обучающих материалов ; при желании это поможет не только хорошо разобраться в фреймворке, но и найти ответы практически на любые возникающие у вас вопросы.
Фреймворк Bootstrap – это проект с открытым исходным кодом , доступным на Github. Он имеет лицензию MIT. Это означает, что его можно бесплатно использовать как в открытых, так и в коммерческих проектах.
Bootstrap, конечно, хороший инструмент, но на нём верстают далеко не всё . Его, например не имеет смысла использовать для:
- создания фронтендов проектов с уникальным дизайном;
- разработки проектов, в которых заказчик готов платить за проект на «чистом» CSS и JavaScript (в большинстве случаях такая разработка осуществляется в команде, в которой каждый её участник выполняет какой-то свой определенный набор функций);
- вёрстки личных проектов, если у вас есть достаточно количество времени и ваш уровень знаний по HTML, CSS и JavaScript является достаточным, чтобы это осуществить.
Bootstrap, как и большинство подобных фреймворков, имеет недостатки . Среди них можно отметить следующие:
- более большой размер конечных css и js-файлов проекта, чем они получились, если бы мы всё это создавали самостоятельно (это связано с тем, что стили фреймворка и его js-код содержат универсальный код (на все случаи жизни), а по факту для конкретного проекта из всего этого может потребоваться только часть);
- сложность использования Bootstrap для вёрстки сайтов с уникальным дизайном, т.к. разработка в этом случае будет сопровождаться значительным переписыванием его кода и простой настройкой Bootstrap переменных тут уже не обойтись.
Первый недостаток можно немного «сгладить», если выполнить самостоятельную сборку проекта из исходных кодов и включить в неё только те компоненты, которые нам нужны. В этом случае код этого фреймворка будет значительно меньше. Как это выполнить в Bootstrap 4 можно посмотреть здесь, а в Bootstrap 3 - тут.
Какую версию Bootstrap выбрать
Для разработки большинства веб-проектов лучше использовать последнюю версию Bootstrap в выбранной ветке .
На текущий момент:
- в v5 - это 5.1.3 (скачать);
- в v4 - это 4.6.1 (скачать);
- в v3 - это 3.4.1 (скачать).
Bootstrap 5 рекомендуется для проектов, которые будут использоваться только в современных браузерах (поддержка IE и других браузеров не нужна). В других случаях - Bootstrap 4.
Что нового в Bootstrap 5:
- нет зависимости от библиотеки jQuery, все плагины переписаны на чистом JavaScript;
- библиотека Popper обновлена до v2.x с v1.x;
- не поддерживаются Internet Explorer 10 и 11, Microsoft Edge <16, Firefox <60, Safari <10, iOS Safari <10, Chrome <60 и Android <6;
- добавлен новый брекпойнт в сетку ( xxl для 1400px и выше);
- новые классы .g-* , .gx-* и .gy-* для указания горизонтальных и вертикальных отступов между ячейками;
- добавлен новый компонент offcanvas;
- удален компонент Media, его реализацию предлагают выполнять с помощью утилитных классов Bootstrap;
- улучшен раздел по формам в документации, и добавлена возможность создания в input плавающего label .
Третью версию в основном имеет смысл использовать, если нужна поддержка «старых» браузеров (IE8 и IE9).
Основные отличия Bootstrap 4 от Bootstrap 3:
- не поддерживает IE8, IE9 и iOS6 (v4 теперь только IE10+ и iOS7+);
- сетка и другие компоненты построены на флексах, а не на float;
- исходный код стилей написан на Sass, а не на Less;
- размеры, указываются в rem и em, а не в px;
- размер шрифта увеличен с 14px до 16px;
- увеличено количество брекпойнтов в сетки (в v4 - 5, в v3 - 4);
- удалены компоненты Panels, Thumbnails и Wells, вместо них добавлен Cards;
- удалены иконочный шрифт Glyphicons и jQuery плагин Affix;
- обновлены почти все компоненты;
- работа всплывающих подсказок (Tooltips) и блоков с контентов (Popovers) построена на библиотеке Popper JS.
Компоненты Bootstrap 3 в IE8 и некоторых других версиях отображаются без градиентов, теней и закруглённых углов. Это связано с тем, что в них нет поддержки используемых для этих целей CSS3 свойств.
Bootstrap — бесплатный HTML/CSS/JavaScript фреймворк для быстрого создания адаптивного дизайна сайта. У разработчиков к нему неоднозначное отношение. С одной стороны, Bootstrap позволяет с минимальными знаниями создавать интерфейсы, которые работают во всех популярных браузерах и не ломаются при изменении разрешения экрана. С другой стороны, фреймворк тащит в проект кучу ненужного кода, который увеличивает вес сборки.
Что нужно знать о Bootstrap перед началом работы
У меня отношение к Bootstrap нейтральное. Он отлично подходит для прототипирования. Если нужно быстро проверить какую-то гипотезу или показать пример заказчику, то сборка во фреймворке — оптимальный вариант. Если вы делаете индивидуальный дизайн, то проще верстать с нуля, а не пытаться перебрать все стили и скрипты в Bootstrap.
Про плюсы и минусы фреймворка вы можете почитать в этой статье . За 2 года ничего не изменилось. Bootstrap правда очень помогает сэкономить время и при этом создать приличный шаблон, но тащит кучу лишнего кода и слабо подходит для нестандартных проектов. Все недостатки Bootstrap можно устранить перебором его исходных файлов, но это занимает столько времени, что любой опытный разработчик выберет верстку макета с нуля.
Какую версию Bootstrap выбрать?
Последняя стабильная версия — 4.5.0. Ее и стоит использовать. Сетка в ней построена на Flexbox, это достаточно распространенная технология. Сервис Can I Use показывает , что верстка на флексах поддерживается всеми современными версиями браузеров. Частичная поддержка есть в Internet Explorer 10 и 11.
В третьей версии Bootstrap сетка построена на Float. Это устаревшая технология, которая не дает такой гибкости, как Flexbox. Зато на флоатах можно верстать для старых браузеров, вплоть до Internet Explorer 6. Если вашему проекту нужна такая поддержка (вряд ли), то используйте Bootstrap 3.4.1.
В июне 2020 года появилась новость о выпуске Bootstrap 5 alpha. Когда из нее сделают стабильную версию — непонятно. Но есть несколько моментов, о которых нужно знать всем, кто работает или собирается работать с фреймворком.
- В пятой версии не будет поддержки Internet Explorer.
- Из Bootstrap пропадет библиотека jQuery, с помощью которой в предыдущих версиях реализовывалось большинство возможностей JavaScript.
Радует, что фреймворк развивается. Разработчики обещают, что в пятой версии будет более быстрый JavaScript, меньшее количество зависимостей, улучшенные API. Но пока она находится на стадии альфа-тестирования, мы будем пользоваться последней стабильной сборкой — Bootstrap 4.5.1.
Как установить Bootstrap
Установить Bootstrap можно несколькими способами:
Мы не будем подробно рассматривать все способы — они описаны в документации Bootstrap. Вот версия на русском языке . Она обновляется немного позже официальной инструкции на английском, но порядок установки не меняется годами, так что вся информация актуальна.
Посмотрим способы подключения, которые позволяют быстро получить работающий фреймворк и приступить к изучению его особенностей.
Самый простой метод установки — подключение через BootstrapCDN. Вам не нужно скачивать файлы в проект. Просто создайте шаблон HTML и разместите внутри него ссылку на фреймворк.
Код может быть таким:
Еще один простой способ установки — скачивание скомпилированных файлов. Внутри архива (его нужно распаковать) две папки: css и js.
В папке css — файлы стилей.
- bootstrap.css — стили фреймворка. Файл bootstrap.min.css — минифицированная версия.
- bootstrap-grid.css — сетка Bootstrap. Файл bootstrap-grid.min.css — минифицированная версия.
- bootstrap-reboot.css — нормализатор Bootstrap, устанавливающий базовые стили, чтобы во всех браузерах верстка смотрелась одинаково. Файл bootstrap-reboot .min. css — минифицированная версия.
В папке js — файлы для работы JavaScript.
- bootstrap.bundle.js — компилированные файлы JavaScript с Popper (плагином всплывающих подсказок). Файл bootstrap.bundle.min.js — минифицированая версия.
- bootstrap.js — компилированные файлы JavaScript без Popper. Файл bootstrap.js — минифицированая версия.
В четвертой версии Bootstrap для работы с JavaScript требуется библиотека JQuery. Она подключается перед Bootstrap JS.
Файл проекта index.html, к которому мы будем подключать Bootstrap, нужно разместить в той же директории, что и подключаемые файлы CSS и JavaScript.
Код шаблона может быть таким:
Обратите внимание — я подключил не минифицированные файлы (с суффиксом min), а обычные. Так удобнее работать со стилями и скриптами. Однако на рабочем проекте нужно использовать минифицированные версии — они меньше весят и обеспечивают более быструю загрузку страницы. После редактирования стилей вам нужно самостоятельно минифицировать файл, заменив шаблонную версию.
Начинаем верстать с помощью Bootstrap
Для работы с Bootstrap нужен текстовый редактор и браузер, в котором вы будете видеть результат верстки с помощью фреймворка.
Для удобства рекомендую скачать примеры. Они помогают понять возможности фреймворка. Примеры можно использовать для верстки прототипов, особенно в ситуации, когда макет нужно было сдать еще вчера.
Допустим, я хочу быстро собрать слайдер. В примерах есть карусель. Внутри папки — два файла: index.html и carousel.css. Я открываю их в редакторе и исправляю так, как мне нужно.
Например, в моей карусели будет не три карточки, а пять. Для этого достаточно в файле index.html добавить еще два компонента.
Изначально карусель выглядит вот так.
Находим в коде карусель. Вот она:
Добавляем в список с классом carousel-indicators два элемента с номерами 3 и 4. Они нужны для того, чтобы в карусели отображалось пять кнопок переключения между слайдами.
Далее находим блок слайда с классом carousel-item. Копируем все, что находится внутри, и вставляем в конце.
Дальше мы можем редактировать слайды так, как нравится: переписать заголовки и описания, добавить фоновое изображение или изменить цвет, настроить шрифт и отступы, изменить высоту контейнера. Все стили доступны в файле carousel.css.
Вся работа заняла пару минут. При этом компоненты имеют адаптивный дизайн. Вам не нужно настраивать даже медиа-запросы — они уже прописаны в исходных файлах Bootstrap. Такой подход позволяет значительно сэкономить время на верстку.
Конечно, редактирование шаблона — это не верстка. Но я могу взять код той же карусели и внедрить его в свой проект, к которому подключен Bootstrap. В этом главный плюс фреймворка.Bootstrap содержит огромное количество готовых компонентов. Разработчику нужно только выбрать то, что необходимо для решения его задачи. По сути, это как работа с конструктором сайтов, только намного более гибким. Именно поэтому Bootstrap так хорош для прототипирования и быстрой верстки, но становится неудобным при разработке проектов с индивидуальным дизайном.
Начните работу с Bootstrap, самым популярным в мире фреймворком для создания быстродействующих мобильных сайтов с BootstrapCDN и шаблонами стартовой страницы.
Быстрый старт
Хотите использовать Бутстрап в своем проекте? Bootstrap – библиотека шаблонов CSS, распространяемая свободно командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap? Посетите страницу загрузок.
Скопируйте и вставьте часть кода <link> в свой <head> перед всеми другими таблицами стилей, чтобы загрузить наш CSS.
Многие из наших компонентов требуют использования JavaScript. Точнее - им требуются jQuery, Popper.js и наши собственные плагины. Мы используем тонкую сборку jQuery, но также поддерживается полная версия.
Поместите дин из следующих тегов <script> в конце страниц, прямо перед закрывающим тегом </body> , чтобы включить их. Сначала должен быть jQuery, затем Popper.js, а затем наши плагины JavaScript.
В связке
Включите все необходимое в один скрипт с нашим пакетом. Наши bootstrap.bundle.js и bootstrap.bundle.min.js включают Popper, но не jQuery. Дополнительную информацию о том, что входит в Bootstrap, можно найти в нашем разделе Содержание.
Отдельно
Если вы решите использовать отдельное решение для сценариев, сначала должен быть Popper.js, а затем наши плагины JavaScript.
Компоненты
Любопытно, какие компоненты явно требуют jQuery, наших JS и Popper.js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.
- Уведомления отмены
- Кнопки изменения состояний и чекбоксов/"радио"
- Карусель для поведения "слайд", элементы контроля и индикаторы
- Коллапс для изменения видимости содержимого
- Выпадающие элементы для отображения и расположения (также требует Popper.js)
- Модальные окна для отображения, расположения и создания поведения прокрутки
- Навбар для расширения нашего плагина коллапса для придания отзывчивого поведения
- Выплывающие подсказки и окна для отображения и расположения (также требует Popper.js)
- Отслеживание прокрутки и обновления навигации
Начальный шаблон страницы
Удостоверьтесь, что ваши страницы сверстаны по новейшим стандартам. Они должны включать и использовать HTML5 doctype и viewport meta tag для правильного «отзывчивого» поведения страниц. Вот как должен выглядеть «верхний», коренной код страницы:
Это все, что вам нужно из общих требований к странице. Посетите Обзорный раздел или наши официальные примеры для создания контента и компонентов вашего сайта.
Важные глобальные атрибуты
Бутстрап включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.
HTML5 doctype
Bootstrap требует использования doctype «HTML5». Без него у вас возникнут некоторые проблемы со стилями.
«Отзывчивый» мета-тэг
Bootstrap разрабатывался как mobile first, т.е. его настройки прежде всего оптимизированы под мобильные устройства, а уж потом с помощью медиа-запросов мы подгоняем масштаб компонентов как нам необходимо на прочих устройствах. Вставьте этот кусок кода в <head> :
Вы можете посмотреть пример этого в действии на странице starter template.
Размер ширины и высоты элемента
Для большей простоты масштабирования в CSS мы изменяем глобальное значение box-sizing с content-box на border-box . Это гарантирует, что padding не будет влиять на конечную вычисленную ширину элемента; однако может создать проблемы для сторонних приложений, таких как Google Maps или поисковой движок Google.
В том редком случае, когда вам надо преодолеть эти возможные баги, делайте так:
С использованием фрагмента кода, приведенного выше, вложенные элементы – включая сгенерированный через :before и :after контент – будут все наследовать заданный box-sizing для класса .selector-for-some-widget .
Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.
«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)
Для улучшенной кроссбраузерной визуализации мы применили «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.
Сообщество
Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:
Вы также можете присоединиться @getbootstrap on Twitter для получения «свежайших» слухов и классных музыкальных клипов.
Читайте также: