Глава 17. Стилизация с помощью Bootstrap (Часть II)

Страница списков — Bootstrap

Откройте all_listings.html и отредактируйте код, как показано.

#listings/templates/listings/all_listings.html
{% extends "listings/base.html" %}
{%block content%} 
  <div class="container text-center p-3 " style="width: 500px;">
    <h1 class="text-dark">Listings</h1>
    <div class="form-group">
      <div class="card card-body bg-light text-dark rounded">
        <form method="get">
          <p><b>Condition:</b>{{ my_Filter.form.condition }}</p>
          <p><b>State:</b>{{ my_Filter.form.state }}</p>
          <p><b>City:</b>{{ my_Filter.form.city }}</p>
          <button class="btn btn-warning border-dark" type="submit">Search
          </button>
        </form>
      </div>
    </div>
  </div> 
                         
<div class="container">
  <div class="card card-body bg-light text-dark text-center p-3 ">                 
    {% for listing in all_listings %}                  
      <p>
        <img class="card-img-right img-thumbnail"  src="{{ listing.main_photo.url }}" 
        width=300px height=200px style="max-height:200px" alt="connect">
        <img class="card-img-right img-thumbnail" src="{{ listing.photo_1.url }}" 
        width=300px height=200px style="max-height:200px" alt="connect">
      </p>
      <p><b>Title:</b> {{ listing.title }}</p>
      <p><b>Condition:</b> {{ listing.condition }}</p>
      <p><b>Sale Type:</b> {{ listing.sale_type }}</p>
      <p><b>Price:</b> $ {{ listing.price|floatformat:2 }}</p>
      <p><b>Location:</b> {{ listing.city }}, {{ listing.state }}</p>
      <p><b>Post Date:</b> {{ listing.list_date }}</p>             
      <ul><a class="btn btn-warning border-dark" 
          href="{% url 'cards:detail' listing.id %}">View Listing
      </a></ul>
      <hr>                 
    {% endfor %}                  
    </div>
</div>
                  
{%endblock content%}

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

Страница подробного списка — Bootstrap

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

#listings/templates/listings/detail.html
{% extends "listings/base.html" %}
{%block content%} 
<div class="container">
    <div class="row p-5">
      <div class="col">
        <h3 class="text-dark mb-4">LISTING:</h3>
        <p><b>Title:</b> {{ detail.title }}</p>
          <p><b>Condition:</b> {{ detail.condition }}</p>
          <p><b>Product Type:</b> {{ detail.product_type }}</p>
          <p><b>Sale Type:</b> {{ detail.sale_type }}</p>
          <p><b>Price: $</b> {{ detail.price }}</p>
          <p><b>Location:</b> {{ detail.city }}, {{ detail.state }}</p>
          <p><b>Contact Email:</b> {{ detail.contact_email }}</p>
          <p><b>Post Date:</b> {{ detail.list_date }}</p>
      </div>
      <div class="col-4 mt-4">
        <img class = "card mb-3 " src="{{ detail.main_photo.url }}" 
              width= 350px height=300px style= "max-width: 100%; 
              max-height: 100%;" />
        {% if detail.photo_2%}
        <img class = "card " src="{{ detail.photo_2.url }}" 
              width= 350px height=300px style= "max-width: 100%; 
              max-height: 100%;"/>
        {% endif %}
      </div>
      <div class="col-4 mt-4">
        <img class = "card " src="{{ detail.photo_1.url }}" 
              width= 350px height=300px style= "max-width: 100%; 
              max-height: 100%;" />
      </div>
    </div>
</div>
              
{%endblock content%}

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

Сохраните изменения и перейдите на страницу подробного списка.

Страница моих объявлений — Bootstrap

Мы закончим эту главу, настроив мою страницу с объявлениями.

Откройте my_listings.html и обновите код, как показано.

#listings/templates/listings/my_listings.html
{% extends "listings/base.html" %}
        
{% block content %}
                          
<h2 class="text-center mb-3">MY LISTINGS:</h2>
        
<div class="row">
  <div class="col">
    <div class="container text-center p-3">
      <table class="table text-center">
        <tr>
        <th>Product</th>
        <th>Date Listed</th>
        <th></th>
        <th></th>
        <th></th>
        </tr>
        {% for my_listing in my_listings %}
        <tr>
        <td>{{ my_listing.title }}</td>
        <td>{{ my_listing.list_date }}</td>
        <td><a class="btn btn-warning"  
          href="{% url 'listings:detail' my_listing.id %}">View
        </a></td>
        <td><a class="btn btn-warning"  
          href="{% url 'listings:edit_listing' my_listing.id %}">Edit
        </a></td>
        <td><a class="btn btn-warning"  
          href="{% url 'listings:delete_listing' my_listing.id %}">Delete
        </a></td>
        </tr>
        {% endfor %}
      </table>
      <div class="container text-center">
      <a class="btn btn-warning"  
          href="{% url 'listings:new_listing'%}">New Listing
      </a>
      </div>
    </div>
  </div>
</div>     
        
{% endblock content %}

На этой странице нет существенных изменений. Мы просто добавили немного стиля, чтобы он выглядел лучше.

Сохраните изменения, введите команду python manage.py runserver и перейдите на страницу моих объявлений.

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

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

Твиттер: balt1794