Django開発~ショッピングカート構築編4~BootStrap導入

django

Django開発~ショッピングカート構築編3~商品詳細ページの作成の続きです。

今日は、BootStrapの導入を試みます。

実は、base.htmlにBootStrapを使うためのCDNをすでに埋め込んでいるため、今回は、BootStrapのタグを埋め込んでいく作業になります。

KOUKI
KOUKI

BootStrapの基礎については、この記事を参考にしてください。

学習履歴

base.htmlの修正

まずは、base.htmlを修正しましょう。

BootStrapのcontainerタグを埋め込みました。

header.htmlの修正

続いて、ヘッダーを変更します。

ヘッダーは、Topページへのリンクを貼りました。また、画像の高さと幅を小さくし、枠外を丸くしました。

navbar.html

続いて、ナビゲーションバーを修正しましょう。

画面を表示させるとナビゲーションバーにBootStrapが適用されていることがわかります。

しかし、すこし不格好なので、個別CSSを作成して修正しましょう。

base.htmlにこのファイルへのリンクを張ります。また、GoogleFontも使いたいので、GoogleFontのCDNもついでに張っておきましょう。

画面をリロードしてヘッダーを確かめてください。

footer.htmlの修正

フッターも変更します。

custom.cssにもスタイルを追加しましょう。

pruduct_list.htmlの修正

product_list.htmlも修正します。

画面をリロードしてみましょう。尚、私は新たに、バナナとオレンジをデータとして追加しました。

product_detail.htmlの修正

商品詳細ページも修正しておきましょう。

custom.cssにも以下の設定を追加します。

画面をリロードしてください。少しはまし?になりましたね。

FontAwosomeの導入

FontAwosomeを導入してみましょう。

base.htmlのheadタグ内にFontAwosomeのCDNを埋め込んでください。

navbarの「Search」のbuttonタグを以下のhtmlと置き換えて下さい。

同じくnavbarの「Your Cart()」を以下のhtmlに置き換えてください。

画面をリロードしましょう。

これで一通り、デザイン変更は終了です。お疲れ様でした。

参考

次回

次回は、ページネーションを実装します。

コメントを残す