Django開発~ショッピングカート構築編3~商品詳細ページの作成の続きです。
今日は、BootStrapの導入を試みます。
実は、base.htmlにBootStrapを使うためのCDNをすでに埋め込んでいるため、今回は、BootStrapのタグを埋め込んでいく作業になります。

BootStrapの基礎については、この記事を参考にしてください。
<目次>
学習履歴
base.htmlの修正
まずは、base.htmlを修正しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
app/shop/templates/base.html {% load staticfiles %} <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="description" content="{% block metadescription %}{% endblock %}"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>{% block title %}{% endblock %}</title> </head> <body> <div class="container"><!-- new --> {% include 'header.html' %} {% include 'navbar.html' %} {% block content %} {% endblock %} </div> {% include 'footer.html' %} <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html> |
BootStrapのcontainerタグを埋め込みました。
header.htmlの修正
続いて、ヘッダーを変更します。
1 2 3 4 5 6 7 8 9 |
app/shop/templates/header.html {% load staticfiles %} <header> <center> <a href="{% url 'shop:all_product' %}"><img src="{% static 'img/logo.png' %}" alt="Perfect Cushion Store" width="100" height="100" class="rounded-circle"></a> </center> </header> |
ヘッダーは、Topページへのリンクを貼りました。また、画像の高さと幅を小さくし、枠外を丸くしました。
navbar.html
続いて、ナビゲーションバーを修正しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
app/shop/templates/navbar.html <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown {% if 'shop' in request.path %}active{% endif %}"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Shop </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="{% url 'shop:all_product' %}">All Products</a> {% for product in products %} <a class="dropdown-item" href="{{product.get_url}}">{{product.name}}</a> {% endfor %} </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Your Cart()</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> |
画面を表示させるとナビゲーションバーにBootStrapが適用されていることがわかります。

しかし、すこし不格好なので、個別CSSを作成して修正しましょう。
1 2 3 |
mkdir app/static/css touch app/static/css/custom.css |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
app/static/css/custom.css .nav-item{ letter-spacing: .2em; font-size: 14px; text-transform: uppercase; } .dropdown-itme{ font-size: 14px; letter-spacing: .2em; text-transform: uppercase; } /* Google Font */ body { font-family: 'Roboto', sans-serif; } |
base.htmlにこのファイルへのリンクを張ります。また、GoogleFontも使いたいので、GoogleFontのCDNもついでに張っておきましょう。
1 2 3 4 5 |
<head> ... <link rel="stylesheet" href="{% static 'css/custom.css' %}"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> </head> |
画面をリロードしてヘッダーを確かめてください。

footer.htmlの修正
フッターも変更します。
1 2 3 4 5 |
app/shop/templates/footer.html <div class="footer navbar-fixed-bottom my_footer"> <p class="text-center">© ShoppingCart, With, Django</p> </div> |
custom.cssにもスタイルを追加しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 |
app/static/css/custom.css /* footer */ .my_footer{ background-color: #f8f9fa; height: 60px; } .my_footer p { padding-top: 20px; font-size: 14px; } |
pruduct_list.htmlの修正
product_list.htmlも修正します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
app/shop/templates/shop/product_list.html {% extends "base.html" %} {% load staticfiles %} {% block metadescription %} {% if category %} {{ category.description|truncatewords:155 }} {% else %} Welcome to the cushion store where you can buy comfy and awesome cushions. {% endif %} {% endblock %} {% block title %} {% if category %} {{ category.name }} - Perfect Cushion Store {% else %} See Our Cushion Collection - Perfect Cushion Store {% endif %} {% endblock %} {% block content %} <div class="row mx-auto my-2"> <div class="col-12"> <img src="{% static 'img/banner.jpg' %}" alt="Our Products Collection" class="img-fluid"> </div> </div> <br> <div class="row"> <div class="col-12"> <h1>Our Products Collection</h1> <p>Finding the perfect cushion for your room can instantly add to the levels of comfort and sense of style throughout your home.</p> </div> </div> <div class="row"> {% for product in products %} <div class="col-4"> <a href="{{product.get_url}}"><img src="{{product.image.url}}" alt="{{product.name}}" width="300" height="200"></a> <div> <h4>{{product.name}}</h4> <p>£{{product.price}}</p> </div> </div> {% endfor %} </div> {% endblock %} |
画面をリロードしてみましょう。尚、私は新たに、バナナとオレンジをデータとして追加しました。

product_detail.htmlの修正
商品詳細ページも修正しておきましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
app/shop/templates/shop/product_detail.html {% extends "base.html" %} {% load staticfiles %} {% block metadescription %} {{ product.description|truncatewords:155 }} {% endblock %} {% block title %} {{ product.name }} - Perfect Cushion Store {% endblock %} {% block content %} <div class="row my_prod_row_class"> <div class="mx-auto"> <p><a href="{% url 'shop:all_product' %}">Home</a>|<a href="{{ product.get_url }}">{{product.name}}</a></p> </div> <div class="container"> <br> <div class="row"> <div class="col-12 col-sm-12 col-md-12 col-lg-6 text-center"> <div style="min-width: 18rem"> <img src="{{product.image.url}}" alt="{{product.name}}"> </div> </div> <div class="col-12 col-sm-12 col-md-12 col-lg-6"> <div> <h1 class="my_prod_title">{{product.name}}</h1> <p>£{{product.price}}</p> <p class="my_title">Product Description</p> <p class="text-justify my_prod_text">{{product.description}}</p> {% if product.stock <= 0 %} <p class="text-justify my_prod_text"><b>Out of Stock</b></p> {% else %} <a class="btn btn-secondary" href="">Add to Cart</a> {% endif %} </div> </div> </div> </div> </div> |
custom.cssにも以下の設定を追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
app/static/css/custom.css /* Product Page */ .my_prod_row_class{ padding-top: 15px; padding-bottom: 20px; } .my_prod_row_class .mx-auto p{ color: #000; font-size: 12px; } .my_prod_row_class .mx-auto p a{ color: #000; font-size: 12px; text-decoration: none; } .my_prod_title{ font-size: 16px; text-transform: uppercase; letter-spacing: .2em; padding-top: 15px; padding-bottom: 10px; } .my_prod_text{ padding-right: 20px; } |
画面をリロードしてください。少しはまし?になりましたね。

FontAwosomeの導入
FontAwosomeを導入してみましょう。
base.htmlのheadタグ内にFontAwosomeのCDNを埋め込んでください。
1 2 3 4 5 6 7 8 |
app/shop/templates/base.html <head> ... <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script> </head> |
navbarの「Search」のbuttonタグを以下のhtmlと置き換えて下さい。
1 2 3 4 |
app/shop/templates/navbar.html <button class="btn btn-secondary my-2 my-sm-0" type="submit"><i class="fas fa-search"></i></button> |
同じくnavbarの「Your Cart()」を以下のhtmlに置き換えてください。
1 2 3 4 |
app/shop/templates/navbar.html <a class="nav-link" href="#"><i class="fas fa-shopping-cart"></i></a> |
画面をリロードしましょう。

これで一通り、デザイン変更は終了です。お疲れ様でした。
参考
次回
次回は、ページネーションを実装します。
コメントを残す
コメントを投稿するにはログインしてください。