Перейти до основного вмісту
Є новіша версія Bootstrap 4!

Приклади

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

Завантажити вихідний код

Спеціальні компоненти

Абсолютно нові компоненти та шаблони, які допоможуть людям швидко розпочати роботу з Bootstrap і продемонструють найкращі методи додавання до фреймворку.

Скріншот альбому
Альбом

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

Скріншот ціноутворення
Ціноутворення

Приклад сторінки з цінами, створеної за допомогою карток із спеціальними верхнім і нижнім колонтитулами.

Скріншот перевірки
Перевірити

Спеціальна форма оформлення замовлення, яка показує наші компоненти форми та їх функції перевірки.

Скріншот продукту
Продукт

Економна маркетингова сторінка, орієнтована на продукт, із великою сіткою та зображеннями.

Скріншот обкладинки
Обкладинка

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

Скріншот каруселі
Карусель

Налаштуйте навігаційну панель і карусель, а потім додайте кілька нових компонентів.

Скріншот блогу
Блог

Шаблон блогу, схожий на журнал, із заголовком, навігацією, рекомендованим вмістом.

Скріншот приладової панелі
Панель приладів

Базова оболонка інформаційної панелі адміністратора з фіксованою бічною та навігаційною панелями.

Скріншот входу
Увійти

Спеціальний макет форми та дизайн для простої форми входу.

Скріншот липкого нижнього колонтитула
Клейкий колонтитул

Прикріпіть нижній колонтитул до нижньої частини вікна перегляду, якщо вміст сторінки короткий.

Знімок навігаційної панелі липкого нижнього колонтитула
Навігаційна панель нижнього колонтитула

Прикріпіть нижній колонтитул до нижньої частини вікна перегляду з фіксованою верхньою панеллю навігації.

Каркас

Приклади, які зосереджені на реалізації використання вбудованих компонентів, надані Bootstrap.

Скріншот стартового шаблону
Початковий шаблон

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

Скріншот сітки
Сітка

Кілька прикладів макетів сітки з усіма чотирма рівнями, гніздуванням тощо.

Скріншот Jumbotron
Джамботрон

Побудуйте навколо jumbotron за допомогою навігаційної панелі та кількох базових стовпців сітки.

Взяти компонент навігаційної панелі за замовчуванням і показати, як його можна перемістити, розмістити та розширити.

Скріншот Navbars
Панелі навігації

Демонстрація всіх адаптивних і контейнерних параметрів для навігаційної панелі.

Статичний скріншот панелі навігації
Навігаційна панель статична

Один приклад навігаційної панелі статичної верхньої навігаційної панелі разом із додатковим вмістом.

Виправлений знімок екрана Navbar
Навігаційна панель виправлена

Приклад однієї навігаційної панелі з фіксованою верхньою навігаційною панеллю разом із додатковим вмістом.

Нижній знімок панелі навігації
Навігаційна панель внизу

Приклад однієї навігаційної панелі з нижньою навігаційною панеллю разом із додатковим вмістом.

Експерименти

Приклади, які зосереджуються на функціях або техніках, які сприятимуть майбутньому.

Знімок екрана з плаваючими мітками
Плаваючі етикетки

Чудові прості форми з плаваючими мітками над введеними даними.

Знімок екрана Offcanvas
Offcanvas

Перетворіть панель навігації, що розширюється, на ковзаюче меню.