Интернет-магазин смартфонов Bootstrap

Создание интернет-магазина

Описание задачи: создание интернет-магазина для продажи смартфонов с использованием фреймворка Bootstrap в одном файле (HTML+CSS+JS).

Разработка кода

Создаю HTML-файл для онлайн-магазина смартфонов с использованием Bootstrap и включением HTML, CSS и JS.

Создаю структуру

Создаю HTML-документ с Bootstrap через CDN, включая простую страницу магазина с CSS и JS в одном файле.

Разработка шаблона

Создаю HTML основной структуру сайта, добавляя Bootstrap для стилей и JavaScript для взаимодействия элементов. Включаю навигационную панель и приступаю к настройке остальных разделов.

Создаю секцию героя

Я работаю над заголовком и описанием, чтобы приветствовать посетителей и выделить основные преимущества магазина смартфонов.

Создаю шаблон

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

Использование изображений

Я анализирую изображение смартфона, предлагая заменить его на изображение-заполнитель. Затем разбираюсь с добавлением пользовательского CSS и JS для чрезмерной простоты.

Добавление функциональности

Я занимаюсь интеграцией счетчика для корзины в navbar. В JS событие нажатия увеличивает счетчик, обновляя его показания.

The task is to write the code in Russian comments if necessary, since the user is requesting the answer in Russian. This ensures the response is consistent with the language of the request.

Вот пример простого интернет-магазина для продажи смартфонов с использованием Bootstrap. Все содержится в одном файле (HTML, CSS и JavaScript):

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Интернет-магазин смартфонов</title>
  <!-- Подключение Bootstrap CSS через CDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <style>
    /* Пользовательские стили */
    .navbar-brand {
      font-weight: bold;
    }
    .card-img-top {
      height: 200px;
      object-fit: cover;
    }
    .jumbotron {
      background-color: #f8f9fa;
      padding: 2rem 1rem;
    }
    .badge-secondary {
      background-color: #6c757d;
    }
  </style>
</head>
<body>

  <!-- Навигационная панель -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Магазин Смартфонов</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" 
       aria-controls="navbarNav" aria-expanded="false" aria-label="Переключить навигацию">
      <span class="navbar-toggler-icon"></span>
    </button>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">
          Корзина <span id="cart-count" class="badge badge-pill badge-secondary">0</span>
        </a>
      </li>
    </ul>
  </nav>

  <!-- Главный баннер -->
  <div class="jumbotron text-center">
    <h1>Добро пожаловать в наш магазин</h1>
    <p>Лучшие смартфоны по отличным ценам!</p>
  </div>

  <!-- Секция с товарами -->
  <div class="container">
    <div class="row">
      <!-- Товар 1 -->
      <div class="col-md-4">
        <div class="card mb-4">
          <img src="https://via.placeholder.com/150" class="card-img-top" alt="Смартфон 1">
          <div class="card-body">
            <h5 class="card-title">Смартфон Модель 1</h5>
            <p class="card-text">49 999 ₽</p>
            <a href="#" class="btn btn-primary add-to-cart">Добавить в корзину</a>
          </div>
        </div>
      </div>
      <!-- Товар 2 -->
      <div class="col-md-4">
        <div class="card mb-4">
          <img src="https://via.placeholder.com/150" class="card-img-top" alt="Смартфон 2">
          <div class="card-body">
            <h5 class="card-title">Смартфон Модель 2</h5>
            <p class="card-text">59 999 ₽</p>
            <a href="#" class="btn btn-primary add-to-cart">Добавить в корзину</a>
          </div>
        </div>
      </div>
      <!-- Товар 3 -->
      <div class="col-md-4">
        <div class="card mb-4">
          <img src="https://via.placeholder.com/150" class="card-img-top" alt="Смартфон 3">
          <div class="card-body">
            <h5 class="card-title">Смартфон Модель 3</h5>
            <p class="card-text">69 999 ₽</p>
            <a href="#" class="btn btn-primary add-to-cart">Добавить в корзину</a>
          </div>
        </div>
      </div>
      <!-- Добавьте больше товаров по необходимости -->
    </div>
  </div>

  <!-- Подключение Bootstrap JS и зависимостей через CDN -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  <script>
    // Пользовательский JavaScript
    document.addEventListener('DOMContentLoaded', function() {
      let cartCount = 0;
      const cartCountElement = document.getElementById('cart-count');
      const addToCartButtons = document.querySelectorAll('.add-to-cart');

      addToCartButtons.forEach(function(button) {
        button.addEventListener('click', function(event) {
          event.preventDefault();
          cartCount++;
          cartCountElement.textContent = cartCount;
        });
      });
    });
  </script>
</body>
</html>

Сохраните этот код в файле с расширением .html, и откройте его в браузере. Вы получите простой интернет-магазин с возможностью добавлять товары в корзину (счетчик корзины будет увеличиваться при нажатии на кнопку "Добавить в корзину").

Интернет-магазин смартфонов Bootstrap

Question

Thought

Answer

Share this Q&A