Bootstrap — это набор кода CSS и JavaScript/jquery, используемый для создания адаптивных веб-сайтов.

В следующих главах основное внимание будет уделено стилю веб-сайта. Мы будем использовать Bootstrap 5 для этого сайта.

Существует несколько способов реализации Bootstrap. До этого момента мы использовали pip install для всех пакетов, поэтому на этот раз мы сделаем что-то другое и реализуем Bootstrap 5, получив необходимые ссылки и вставив их в шаблон base.html.

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

Bootstrap5

Кроме того, мы добавим в шаблон ссылку для импорта значков Bootstrap, которую можно найти внизу страницы ниже.

Значки начальной загрузки

Панель навигации — Bootstrap

Откройте base.html, вставьте начальный шаблон и расположите код, как показано.

#listings/templates/listings/base.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link 
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
  rel="stylesheet" 
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
  crossorigin="anonymous">
  <link rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <title>BikeFinder</title>
</head>
      
<body>    
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" 
          href="{% url 'listings:index' %}"><h3 class="text-warning">BikeFinder</h3>
      </a>
      <button class="navbar-toggler" 
        type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"   
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="{% url 'listings:all_listings' %}">Listings</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
      {% if user.is_authenticated %} 
        <li class="nav-item">
          <a class="nav-link" href="{% url 'listings:my_listings' %}">My Listings</a>
        </li>
      {% else %}
        <li class="nav-item">
          <a class="nav-link" href="{% url 'users:register' %}">Register</a> 
        </li>
          {% endif %}
      </ul>
    </div>
    {% if user.is_authenticated %}
        <p class="text-white mt-3 px-4">{{ user.username }}</p>
        <button class="btn btn-sm btn-warning" type="submit"> 
        <a class="nav-link text-dark" 
              href="{% url 'users:log_out' %}"><strong>Logout</strong>
        </a></button>
    {% else %}
        <button class="btn btn-sm btn-warning" type="submit"> 
          <a class="nav-link text-dark" 
                href="{% url 'users:login' %}"><strong>Login</strong>
          </a></button>
    {% endif %}
    </div>
  </nav>
        
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
  integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
  crossorigin="anonymous">
 </script>
      
</body>
</html>               
      
{%block content%}
      
{%endblock content%}

В приведенном выше коде происходит много всего, поэтому я рекомендую открывать файлы исходного кода в редакторе кода, таком как Visual Studio Code, чтобы лучше его визуализировать.

Код для панели навигации был обновлен для использования Bootstrap 5 и помещен в начальный шаблон.

Проверьте раздел панели навигации, чтобы увидеть объяснение всех стилей и элементов, используемых в коде.

Панель навигации — Bootstrap 5

Сохраните изменения и введите команду python manage.py runserver.

Перейдите на домашнюю страницу, чтобы увидеть новую панель навигации.

Домашняя страница — Bootstrap

Откройте index.html и внесите в шаблон следующие изменения.

#listings/templates/listings/index.html
{% extends "listings/base.html" %}
{%block content%}
<main>
  <div class="container py-4">
   
    <div class="p-5 mb-4 bg-warning rounded-3">
      <div class="container-fluid py-5">
        <h1 class="display-5 fw-bold">BIKE FINDER</h1>
        <p class="col-md-8 fs-4">Find the latest bikes,
             parts, accessories, and more.</p>
        <button class="btn btn-dark btn-lg" 
              type="button"><a class="text-light" 
              href="{% url 'listings:all_listings' %}">Explore </a>
        </button>
      </div>
    </div>
    <div class="row align-items-md-stretch">
      <div class="col-md-6">
        <div class="h-100 p-5 text-white bg-dark rounded-3">
          <h2>Sell and Buy Faster</h2>
          <p>Find people nearby, connect, 
               strike a deal, get paid, done.</p>
        </div>
      </div>
      <div class="col-md-6">
        <div class="h-100 p-5 text-white bg-dark border rounded-3">
          <h2>Unlimited Listings</h2>
          <p>Create an account and start listing immediately.
               No limits! No fees!</p>
        </div>
      </div>
    </div>
    <footer class="pt-3 mt-4 text-muted border-top">
      © BikeFinder 2021
    </footer>
  </div>
</main>
{%endblock content%}

Сохраните изменения и введите команду python manage.py runserver, чтобы увидеть новую домашнюю страницу.

Если вам нравится сериал, следите за мной в Twitter и на Youtube, чтобы узнать больше.

Youtube: Брайам Лоайза

Твиттер: balt1794