CSSを楽に整備したい時に役立つ。DjangoプロジェクトにBootstrapのCSSを適用する手順

▼この記事をSNSでシェアする▼

スポンサーリンク

スポンサーリンク

ど初心者ですが、この間BootstrapをDjangoのプロジェクトに適用してみたので、その手順を備忘録として残しておきます。

とりあえず標準のCSSを読み込むところまでの手順をまとめました。

カスタムする際は、読み込んだ標準のCSSを編集しましょう。

前提

おさらいしておきましょう。

Mac OS High Sierra10.13.6に下記のものを利用しています。

  • Atom(テキストエディタ+ターミナル付き)
  • Homebrew(パッケージマネージャ)
  • Python3(version 3.7.0)と主要なライブラリ(numpy,matplotlib,scipy,pandas)
  • 制作中の人狼村の構成検索アプリにCSSを適用する
  • インストールするBootstrapのバージョン:4.1.1

Bootstrapの以前のバージョンではFontもパッケージされていたみたいですが、4.1.1ではCSSとJSがパッケージングされています。

手順

Bootstrapのダウンロード

下記URLのBootstrapのホームページにアクセス

https://getbootstrap.com/

[Download]ボタンをクリック

[Download]ボタンをクリック

BootstrapのCSSとJSの圧縮ファイルがダウンロードディレクトリに保存されると思います。

settings.pyの設定

staticのファイル読み込みに必要な設定をします。

staticのディレクトリを指定します。

staticフォルダに格納

アプリのフォルダの直下にstaticファイルを作り、そこにbootstrapファイルを解凍します。

解凍するとCSSとJSのファイルが展開されます。

CSSの直下にbootstrap.cssという読み込む対象のファイルがあることを確認します。

HTMLファイルヘッダーの記述

  1. staticfilesのロードの指定
  2. bootstrapのCSSの指定

staticのフォルダの中のCSSフォルダにbootstrapのCSSを格納しているので、それを指定します。

色々ファイルはありますが、bootstrap.cssを基本的に指定すればいいです。

bootstrap.min.cssでもいいですが、それを拡張したbootstrap.cssの方が使えるクラスが多いです。

HTMLクラス指定

ここからは任意のHTMLタグにCSSのクラスを指定していきます。

今回は簡素すぎるこの詳細ページの表にストライプの塗りつぶし(table-borderd)と縦線(table-striped)を実装していきます。

bootstrap.css適用前

bootstrap.css適用後

テーブルだけでなく見出しも標準のCSSが適用され、みやすくなります!

ソースコード

12行目に注目です。そこだけみてくれればいいです笑

tableクラスの子クラスであるtable-stripedとtable-borderedを指定するので「table (子クラス)」という形で指定します。

table-stripedを用いるのでヘッダーとボディの区別が必要です。theadとtbodyの要素の指定をして、tbodyの行に交互にいるが塗りつぶされます。

Djangoへのbootstrapの導入の先

標準のbootstrap.cssを使ってみました。

ただ自分で全くカスタマイズしておらず、bootstrap臭ぷんぷんのUIとなっております。

bootstrapはいれて簡単な設定をするだけで標準の要素を整えてくれます。

CSSを一から書くのは非常に面倒なのでとりまつかうのおすすめですね。Djangoに限らずWeb周りは・・・

こっからレベルアップするために、CSSのクラスとかを追加したり、導入したbootstrapを編集してオリジナルのUIを構築していくことを目指していきたいと思います。(Java Scriptの活用も含めて)

スポンサーリンク

▼この記事をSNSでシェアする▼

フォローする

メニュー・主な記事カテゴリ

おすすめ特集!




「ゆとり鳥日記」について
ITを中心に関心の赴くままに好きなように書いていく雑記ブログ!管理人が二人います。
◆フクロウ(19卒就活生)
◆トンビ(社会人1年目SE)

詳しいプロフィール
お仕事の依頼・ご要望

ゆとり鳥日記をBTCで応援する