Удобный онлайн инструмент поможет сделать (.card) для сайтов без необходимости написания кода вручную. Вы можете легко настроить внешний вид карточки, включая Card для Bootstrap 3, Bootstrap 4.x и 5.x.
Настройки
Предпросмотр
Bootstrap 3.3.7Модель карточки
Только текст
Заголовок + описание
Картинка сверху
Изображение над текстом
Картинка снизу
Изображение под текстом
Горизонтальная
Картинка сбоку
Header
С шапкой и подвалом
card-header + card-footer
Footer
Готовый код
Коллекция пуста
Настройте карточку слева и нажмите "Добавить в коллекцию"
Справка и описание функционала
Нажмите, чтобы свернуть/развернутьОсновные возможности
- 6 моделей макета: Только текст, картинка сверху/снизу, наложение (overlay), горизонтальная, с шапкой и подвалом.
- Медиа: Поддержка Drag-and-Drop загрузки изображений (до 5 МБ) или использование иконок Font Awesome.
- Гибкая стилизация: Настройка цветов (фон, текст, рамка), градиентов, теней (
box-shadow) и скругления углов. - Адаптивность: Автоматическая подстановка корректных классов для выбранной версии Bootstrap (например,
labelдля BS3 иbadgeдля BS4/BS5). - Коллекция: Вы можете создавать коллекции, нажмите "Добавить в коллекцию".
- Или иконка Font Awesome: Впишите класс (class) иконки. Соответствующий "Font Awesome 4.7.0". Он заменит изображение.
Описание полей настройки
- Заголовок / Подзаголовок: Основной и второстепенный текст карточки.
- Текст: Основное описание (лимит 800 символов).
- Теги / Бейджи: Введите названия через запятую (например: Новинка, Хит).
- Кнопка действия: Текст кнопки и её стиль (Primary, Danger, Outline и т.д.).
- Ссылка (href): Если заполнена, вся карточка или кнопка станут кликабельными.
Работа с коллекцией
- Добавить в коллекцию: Сохраняет текущий макет в вашем браузере.
- Экспорт коллекции: Генерирует готовый HTML файл со всеми вашими карточками и подключенным Bootstrap.
- JSON: Выгрузка настроек в формате JSON для резервного копирования или переноса на другое устройство.
Ещё генераторы
Версия: 03.08.26 | Просмотров: 621