Стартовые наборы
Функциональные примеры использования Bootstrap в распространенных средах JS, таких как Webpack, Parcel, Vite и других, которые вы можете редактировать на StackBlitz.
Стартер CDN
Мгновенно включайте скомпилированные CSS и JavaScript Bootstrap через CDN jsDelivr.
Sass и JS
Используйте npm для импорта и компиляции Bootstrap Sass с Autoprefixer и Stylelint, а также наш встроенный JavaScript.
Sass и ESM JS
Импортируйте и скомпилируйте Sass Bootstrap с помощью Autoprefixer и Stylelint, а также скомпилируйте исходный код JavaScript с прокладкой ESM.
Webpack
Импорт и объединение исходного кода Bootstrap Sass и JavaScript с помощью Webpack.
Parcel
Импорт и объединение исходного кода Bootstrap Sass и JavaScript с помощью Parcel.
Vite
Импорт и объединение исходного кода Bootstrap Sass и JavaScript с помощью Vite.
Bootstrap Иконки
Импортируйте и скомпилируйте Sass Bootstrap с помощью Stylelint, PurgeCSS и веб-шрифта Bootstrap Icons.
Фрагменты
Общие шаблоны для создания сайтов и приложений, основанных на существующих компонентах и утилитах с настраиваемым CSS и т.д.
![Заголовки](/docs/5.3/assets/img/examples/headers.png)
Заголовки
Отобразите свой брендинг, навигацию, поиск и многое другое с помощью этих компонентов заголовка.
![Герои](/docs/5.3/assets/img/examples/heroes.png)
Герои
Создайте сцену на своей домашней странице с помощью героев с четкими призывами к действию.
![Функции](/docs/5.3/assets/img/examples/features.png)
Функции
Объясните особенности, преимущества или другие детали Вашего маркетингового контента.
![Боковые панели](/docs/5.3/assets/img/examples/sidebars.png)
Боковые панели
Общие шаблоны навигации идеально подходят для макетов вне холста или нескольких столбцов.
![Футеры](/docs/5.3/assets/img/examples/footers.png)
Футеры
Завершите каждую страницу потрясающим нижним колонтитулом, большим или маленьким.
![Выпадающие списки](/docs/5.3/assets/img/examples/dropdowns.png)
Выпадающие списки
Расширьте свои раскрывающиеся списки с помощью фильтров, иконок, настраиваемых стилей и многого другого.
![Список групп](/docs/5.3/assets/img/examples/list-groups.png)
Список групп
Расширяйте группы списков с помощью утилит и настраиваемых стилей для любого контента.
![Модальные окна](/docs/5.3/assets/img/examples/modals.png)
Модальные окна
Преобразуйте модальные окна для любых целей, от обзоров функций до диалогов.
![Значки](/docs/5.3/assets/img/examples/badges.png)
Значки
Заставьте значки работать с пользовательским внутренним HTML и новым внешним видом.
![Хлебные крошки](/docs/5.3/assets/img/examples/breadcrumbs.png)
Хлебные крошки
Интегрируйте пользовательские иконки и создавайте степперные компоненты.
![Кнопки](/docs/5.3/assets/img/examples/buttons.png)
Кнопки
Создавайте настраиваемые кнопки практически для любого варианта использования с помощью утилит.
![Джамботроны](/docs/5.3/assets/img/examples/jumbotrons.png)
Джамботроны
Создавайте модернизированные версии классического компонента Bootstrap.
Пользовательские компоненты
Совершенно новые компоненты и шаблоны, которые помогут людям быстро начать работу с Bootstrap и продемонстрируют передовой опыт добавления в платформу.
![Альбом](/docs/5.3/assets/img/examples/album.png)
Альбом
Простой одностраничный шаблон для фотогалереи, портфолио и т.д.
![Прайс-лист](/docs/5.3/assets/img/examples/pricing.png)
Прайс-лист
Пример страницы с ценами, созданной с помощью карточек, с настраиваемым верхним и нижним колонтитулами.
![Оформление заказа](/docs/5.3/assets/img/examples/checkout.png)
Оформление заказа
Пользовательская форма оформления заказа, показывающая наши компоненты формы и их функции проверки.
![Продукт](/docs/5.3/assets/img/examples/product.png)
Продукт
Экономичная маркетинговая страница, ориентированная на продукт, с обширной сеткой и изображениями.
![Обложка](/docs/5.3/assets/img/examples/cover.png)
Обложка
Одностраничный шаблон для создания простых и красивых домашних страниц.
![Карусель](/docs/5.3/assets/img/examples/carousel.png)
Карусель
Настройте панель навигации и карусель, а затем добавьте новые компоненты.
![Блог](/docs/5.3/assets/img/examples/blog.png)
Блог
Журнал как шаблон блога с заголовком, навигацией, избранным контентом.
![Панель](/docs/5.3/assets/img/examples/dashboard.png)
Панель
Базовая оболочка панели администратора с фиксированной боковой панелью и навигационной панелью.
![Форма входа](/docs/5.3/assets/img/examples/sign-in.png)
Форма входа
Индивидуальный макет и дизайн формы для простой формы входа.
![Закрепленный футер](/docs/5.3/assets/img/examples/sticky-footer.png)
Закрепленный футер
Прикрепленный нижний колонтитул к нижней части области просмотра, когда содержимое страницы мало.
![Закрепленный футер и панель навигации](/docs/5.3/assets/img/examples/sticky-footer-navbar.png)
Закрепленный футер и панель навигации
Прикрепленный нижний колонтитул к нижней части области просмотра с помощью фиксированной верхней панели навигации.
![жамботрон](/docs/5.3/assets/img/examples/jumbotron.png)
Джамботрон
Используйте утилиты для воссоздания и улучшения jumbotron Bootstrap 4.
Фреймворк
Примеры, которые сосредоточены на реализации использования встроенных компонентов, предоставляемых Bootstrap.
![Стартовый шаблон](/docs/5.3/assets/img/examples/starter-template.png)
Стартовый шаблон
Ничего, кроме простоты: скомпилированный CSS и JavaScript.
![Сетка](/docs/5.3/assets/img/examples/grid.png)
Сетка
Несколько примеров макетов сетки со всеми четырьмя уровнями, вложенностью и т.д.
![Шпаргалка](/docs/5.3/assets/img/examples/cheatsheet.png)
Шпаргалка
Шпаргалка Bootstrap компонентов.
![Шпаргалка RTL](/docs/5.3/assets/img/examples/cheatsheet-rtl.png)
Шпаргалка RTL
Шпаргалка Bootstrap компонентов, RTL.
Панели навигации
Взять компонент панели навигации по умолчанию и показать, как его можно перемещать, размещать и расширять.
![Панели навигации](/docs/5.3/assets/img/examples/navbars.png)
Панели навигации
Демонстрация всех адаптивных и контейнерных опций для навигационной панели.
![Панели навигации с offcanvas](/docs/5.3/assets/img/examples/navbars-offcanvas.png)
Панели навигации с offcanvas
То же, что и в примере с панелями навигации, но с нашим компонентом offcanvas.
![Статичная панель навигации](/docs/5.3/assets/img/examples/navbar-static.png)
Статичная панель навигации
Пример статической верхней панели навигации с одним дополнительным контентом.
![Фиксированная панель навигации](/docs/5.3/assets/img/examples/navbar-fixed.png)
Фиксированная панель навигации
Пример единой панели навигации с фиксированной верхней панелью навигации и некоторым дополнительным контентом.
![Нижняя панель навигации](/docs/5.3/assets/img/examples/navbar-bottom.png)
Нижняя панель навигации
Пример единой панели навигации с нижней панелью навигации и дополнительным контентом.
![Панель навигации вне холста](/docs/5.3/assets/img/examples/offcanvas-navbar.png)
Панель навигации вне холста
Превратите расширяемую панель навигации в скользящее меню вне холста (не использует наш компонент вне холста).
RTL
Посмотрите, как работает RTL-версия Bootstrap с этими модифицированными примерами пользовательских компонентов.
RTL все еще находится в экспериментальной стадии и будет развиваться с учетом обратной связи. Заметили что-то или хотите предложить улучшение?
![Альбом RTL](/docs/5.3/assets/img/examples/album-rtl.png)
Альбом RTL
Простой одностраничный шаблон для фотогалерей, портфолио и т.д.
![Оформление заказа RTL](/docs/5.3/assets/img/examples/checkout-rtl.png)
Оформление заказа RTL
Пользовательская форма оформления заказа, показывающая наши компоненты формы и их функции проверки.
![Карусель RTL](/docs/5.3/assets/img/examples/carousel-rtl.png)
Карусель RTL
Настройте панель навигации и карусель, а затем добавьте новые компоненты.
![Блог RTL](/docs/5.3/assets/img/examples/blog-rtl.png)
Блог RTL
Журнал как шаблон блога с заголовком, навигацией, избранным контентом.
![Панель RTL](/docs/5.3/assets/img/examples/dashboard-rtl.png)
Панель RTL
Базовая оболочка панели администратора с фиксированной боковой панелью и навигационной панелью.
Интеграции
Интеграции с внешними библиотеками.
![Masonry](/docs/5.3/assets/img/examples/masonry.png)
Masonry
Объедините возможности сетки Bootstrap и макета Masonry.