Bootstrap - Прайс-демо
Что такое прайс?
Прежде чем мы погрузимся в создание прайс-демо с использованием Bootstrap, давайте на минутку разберемся, что же такое прайс в контексте веб-дизайна и бизнеса.
Прайсинг - это важный элемент любого предложения продукта или услуги. Это способ, с помощью которого компании передают ценность своих предложений потенциальным клиентам. В веб-дизайне раздел прайсинга или страница - это место, где вы представляете различные планы или пакеты, обычно в ясной, сравнительной форме.
Представьте это как меню в ресторане. Вы хотите, чтобы клиенты могли легко увидеть, что доступно и по какой цене, чтобы они могли принять обоснованное решение. Именно это мы и создадим с помощью Bootstrap!
Why Use Bootstrap for Pricing? (Почему использовать Bootstrap для прайсинга?)
Bootstrap - это мощный фронтенд-фреймворк, который делает создание адаптивных, профессионально выглядящих веб-сайтов breeze. Он особенно полезен для разделов прайсинга, потому что:
- Он предлагает预先 разработанные компоненты, которые идеально подходят для отображения информации о прайсинге.
- Он адаптивен "из коробки", то есть ваш раздел прайсинга будет хорошо выглядеть на всех устройствах.
- Он قابل для customize, позволяя вам соответствовать стилю и feel вашего бренда.
Теперь, давайте наденем рукавицы и начнем создавать нашу прайс-демо!
Настройка среды Bootstrap
В первую очередь, нам нужно настроить нашу среду Bootstrap. Не волнуйтесь, если это звучит сложно - это на самом деле quite simple!
Создайте новый HTML-файл и вставьте следующий код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Pricing Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Your content will go here -->
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Этот код создает базовую структуру HTML и включает CSS и JavaScript файлы Bootstrap из CDN (Content Delivery Network). Это как laying the foundation для нашего дома - теперь мы готовы начать строительство!
Создание раздела прайсинга
Теперь, давайте создадим наш раздел прайсинга. Мы будем использовать компонент card Bootstrap, чтобы создать три уровня прайсинга: Basic, Pro и Enterprise.
Добавьте следующий код внутри тегов <body>:
<div class="container py-5">
<h1 class="text-center mb-5">Our Pricing Plans</h1>
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Basic</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$0<small class="text-muted fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>10 users included</li>
<li>2 GB of storage</li>
<li>Email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button>
</div>
</div>
</div>
<!-- Repeat this structure for Pro and Enterprise plans -->
</div>
</div>Давайте разберем это:
- Мы используем контейнер, чтобы centrify是我们的 контент и добавить немного отступа.
- Классы
rowиcolсоздают адаптивную сетку. - Каждый уровень прайсинга представлен компонентом
card. - Мы используем утилитарные классы Bootstrap, такие как
text-center,mb-4и т.д., чтобы стилизовать наши элементы, не.write custom CSS.
Настройка внешнего вида
Bootstrap великолепен "из коробки", но давайте добавим немного индивидуальности, чтобы наша прайс-демо сияла!
Добавьте этот тег <style> в раздел <head>:
<style>
.pricing-card-title {
font-size: 2.5rem;
}
.card-header {
background-color: #f8f9fa;
}
.btn-outline-primary:hover {
background-color: #007bff;
color: white;
}
</style>Этот custom CSS будет:
- Увеличивать размер цены
- Давать заголовку карты легкий фон
- Менять цвет кнопки при наведении
Добавление интерактивности
Давайте добавим немного интерактивности в нашу прайс-демо. Мы сделаем, чтобы план "Pro" выделялся при наведении курсора.
Добавьте этот JavaScript в конце вашего тега <body>:
<script>
document.addEventListener('DOMContentLoaded', function() {
const proCard = document.querySelectorAll('.card')[1];
proCard.addEventListener('mouseover', function() {
this.style.transform = 'scale(1.05)';
this.style.transition = 'transform 0.3s ease';
});
proCard.addEventListener('mouseout', function() {
this.style.transform = 'scale(1)';
});
});
</script>Этот скрипт slightly enlarge план "Pro" при наведении мыши на него, создавая subtile но engaging эффект.
Адаптивный дизайн
Одна из лучших вещей в Bootstrap - это его встроенная адаптивность. Наша прайс-демо автоматически будет adjust чтобы выглядеть прекрасно на всех размерах экранов. Однако, мы можем улучшить это еще больше.
Добавьте эти классы к вашему div row:
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center g-4">Класс g-4 добавляет отступы между нашими столбцами, а row-cols-1 row-cols-md-3 ensures что на маленьких экранах наши карты stack вертикать, а на средних и более крупных экранах они display в три столбца.
Заключение
Поздравления! Вы только что создали профессионально выглядящую прайс-демо с использованием Bootstrap. Давайте подведем итог, что мы узнали:
- Мы настроили среду Bootstrap.
- Мы создали адаптивный раздел прайсинга с использованием grid и компонентов card Bootstrap.
- Мы настроили внешний вид с помощью simple CSS.
- Мы добавили интерактивность с помощью JavaScript.
- Мы ensured наш дизайн адаптивен и выглядит прекрасно на всех устройствах.
Помните, практика делает perfect. Попробуйте modify этот демо - измените цвета, добавьте больше уровней или включите другие функции. Чем больше вы играете с Bootstrap, тем комфортнее вы станете с его мощными возможностями.
Счастливого кодирования, и пусть ваши прайс-демо всегда конвертируются!
Credits: Image by storyset