Различия
Показаны различия между двумя версиями страницы.
Предыдущая версия | |||
— | bootstrap [2025/07/06 12:38] (текущий) – внешнее изменение 127.0.0.1 | ||
---|---|---|---|
Строка 1: | Строка 1: | ||
+ | ====== Bootstrap — фреймворк для быстрой вёрстки адаптивных сайтов ====== | ||
+ | ~~Title: Адаптивная вёрстка с Bootstrap: основные компоненты и примеры ~~ | ||
+ | {{htmlmetatags> | ||
+ | metatag-description=(Первоначальная настройка Bootstrap. Статья раскрывает возможности Bootstrap для быстрой вёрстки адаптивных сайтов. Приведены примеры готовых шаблонов, | ||
+ | }} | ||
+ | |||
+ | [[https:// | ||
+ | |||
+ | Установить и подключить Bootstrap можно разными [[https:// | ||
+ | |||
+ | <file bash> | ||
+ | $ npm install bootstrap | ||
+ | </ | ||
+ | Установка при помощи npm создать папку node_modules содержащую пакеты bootstrap: | ||
+ | <file bash> | ||
+ | $ tree node_modules | ||
+ | node_modules/ | ||
+ | ├── bootstrap | ||
+ | │ ├── dist | ||
+ | │ │ ├── css | ||
+ | │ │ │ ├── bootstrap.css | ||
+ | ... | ||
+ | </ | ||
+ | |||
+ | Основные инструменты Bootstrap: | ||
+ | |||
+ | Сетки — заранее заданные размеры колонок, | ||
+ | * **Шаблоны** — фиксированный или резиновый шаблон документа. | ||
+ | * **Типографика** ([[https:// | ||
+ | * **Медиа** — представляет некоторое управление изображениями и видео. | ||
+ | * **Таблицы** — средства оформления таблиц, | ||
+ | * **Формы** — классы для оформления форм и некоторых событий, | ||
+ | * **Навигация** — классы оформления для табов, вкладок, | ||
+ | * **Алерты** — оформление диалоговых окон, подсказок и всплывающих окон. | ||
+ | {{ :: | ||
+ | ===== Начальный шаблон страницы Bootstrap ===== | ||
+ | |||
+ | Начальный [[https:// | ||
+ | |||
+ | <file html> | ||
+ | < | ||
+ | <html lang=" | ||
+ | < | ||
+ | |||
+ | < | ||
+ | <meta charset=" | ||
+ | <meta name=" | ||
+ | |||
+ | <script src=" | ||
+ | <script src=" | ||
+ | |||
+ | < | ||
+ | <link rel=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | <section id=" | ||
+ | |||
+ | <div class=" | ||
+ | <div class=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | <section id=" | ||
+ | <section id=" | ||
+ | <section id=" | ||
+ | <section id=" | ||
+ | <section id=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | **Возьмите за правило** разделять уровни контента с помощью тега < | ||
+ | |||
+ | ===== Контейнеры (хранилища) ===== | ||
+ | |||
+ | Bootstrap требует div для обертывания всего содержимого сайта и размещения сетки. Можно выбрать один из двух контейнеров. | ||
+ | |||
+ | Используйте класс .container для адаптивного контейнера с фиксированной шириной. Стили, задающие цвет и высоты, | ||
+ | <div class=" | ||
+ | ... | ||
+ | </ | ||
+ | </ | ||
+ | Див с классом .container-fluid использует для всей ширины контейнера, | ||
+ | <div class=" | ||
+ | ... | ||
+ | </ | ||
+ | </ | ||
+ | ===== Grid System приставки класса ===== | ||
+ | |||
+ | {{ :: | ||
+ | |||
+ | < | ||
+ | < | ||
+ | <col sm=" | ||
+ | <col sm=" | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | <col xs=" | ||
+ | <col xs=" | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | ===== Использование Badges Bootstrap ===== | ||
+ | **Очень удобно для создания кнопок отзывов: | ||
+ | |||
+ | Отзывы < | ||
+ | |||
+ | <btn type=" | ||
+ | |||
+ | **Пример использования Badges List Group:** | ||
+ | < | ||
+ | * Cras justo odio < | ||
+ | * Dapibus ac facilisis in < | ||
+ | * Morbi leo risus < | ||
+ | </ | ||
+ | |||
+ | ===== Buttons Bootstrap ===== | ||
+ | <file html> | ||
+ | <btn type=" | ||
+ | </ | ||
+ | <btn type=" | ||
+ | |||
+ | <btn type=" | ||
+ | <btn type=" | ||
+ | <btn type=" | ||
+ | <btn type=" | ||
+ | <btn type=" | ||
+ | <btn type=" | ||
+ | <btn type=" | ||
+ | ===== Использование Jumbotron Bootstrap ===== | ||
+ | В Jumbotron используется всего 2 атрибута: | ||
+ | < | ||
+ | Attribute Description | ||
+ | background Background URL or DokuWiki Media link (eg : | ||
+ | color Color name or HEX (eg. #ffffff) of text | ||
+ | </ | ||
+ | |||
+ | |||
+ | <file html> | ||
+ | < | ||
+ | **Круто!** | ||
+ | |||
+ | Lorem ipsum dolor sit amet, [...] | ||
+ | <btn type=" | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | **Круто!** | ||
+ | |||
+ | Lorem ipsum dolor sit amet, [...] | ||
+ | |||
+ | |||
+ | |||
+ | <btn type=" | ||
+ | </ | ||
+ | |||
+ | ===== Внешние иконки Bootstrap Глификонс (Glyphicons), | ||
+ | Глификонс можно использовать в тексте, | ||
+ | |||
+ | <file html> | ||
+ | <alert type=" | ||
+ | </ | ||
+ | <alert type=" | ||
+ | |||
+ | Глификоны не поддерживаются в Bootstrap 4, вместо них следует использовать внешние иконки, | ||
+ | |||
+ | < | ||
+ | <button class=" | ||
+ | <button class=" | ||
+ | </ | ||
📌 Удобный подбор VPS по параметрам доступен на DIEGfinder.com - официальном инструменте проекта DIEG. Это часть единой экосистемы, созданной для того, чтобы помочь быстро найти подходящий VPS/VDS сервер для любых задач хостинга.
📌 Для тестирования скриптов, установщиков VPN и Python-ботов рекомендуем использовать надежные VPS на короткий срок. Подробнее о быстрой аренде VPS для экспериментов - читайте здесь.
💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!7 Самых Популярных Статей
- Как запустить скрипты и веб-приложения на Python
- Что такое страны TIER 1,2,3
- 7 способов сравнения файлов по содержимому в Windows или Linux
- Установка и тестирование веб-панели HestiaCP
- Nginx простые примеры конфигурации
- top, htop, atop определение загрузки ОС (Load average, LA)
- Использование rsync в примерах
7 Самых Популярных Обзоров
- Хостинг для Python-скриптов и приложений
- ТОП 4 лучших антидетект браузеров (Бесплатные & Платные)
- Подборка купонов (промокоды) на хостинг, антидетект браузеры
- Обзор THE.Hosting (PQ Hosting): надежный хостинг с профессиональной поддержкой
- Хостинг в России
- Хостинг в Европе
- Обзор браузера Dolphin {anty} для мультиаккаунтинга