プログラミング独学・スクール・就職(目次)
プログラミング独学・スクール・就職(目次)
おすすめのプログラミングスクール めざせ就職・年収アップ!
おすすめのプログラミングスクール めざせ就職・年収アップ!
SEの転職活動で使うべきサイト・エージェント 目指せ年収アップ
SEの転職活動で使うべきサイト・エージェント 目指せ年収アップ
メンズクリア2年通い放題入会! その後のヒゲ状況(不定期更新)
メンズクリア2年通い放題入会! その後のヒゲ状況(不定期更新)
ブログ開始3年が経った月収が1万超えてた!
ブログ開始3年が経った月収が1万超えてた!
7年目で初の転職活動 2カ月で内定獲得した記録
7年目で初の転職活動 2カ月で内定獲得した記録
面接で評価されたプログラミング未経験者の学習方法
面接で評価されたプログラミング未経験者の学習方法
previous arrowprevious arrow
next arrownext arrow
 
Shadow
Django

Django独学 Bootstrapでボタンやページを良い感じに表示

Djangoのユーザ管理アプリ作成の目次ページはこちらです。

 

今回は、Bootstrapを使って見栄えをええ感じに表示させたいと思います。

UdemyのDjangoの基礎をマスターして、3つのアプリを作ろう!を参考に勉強していています。

bootstrapを使うため、HTMLの基礎知識が必要です。

Udemy講座を載せておきます。

「BootstrapをCDNで利用する」だけであれば無料で見れます。

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

Bootstrapを使えばデザインを楽にかっこよくできる

本来だと、自分でCSSファイルを作って各ボタンやテーブルに当て込む必要があります。

でもBootstrapはすでにきれいな表示ができるCSSが用意されています。

それをそのまま読み込んで使うことで、楽にコーディングができます。

また、Bootstrapはダウンロードして、自分用にカスタマイズすることも可能です。

今回は特にカスタマイズしません。

共通テンプレートのbase.htmlにBootstrapを読み込むコードを書いています。

各htmlファイルはbase.htmlを継承しているので、Bootstrapを読み込むコードは出てきません。

users.htmlのテーブルにbootstrapを適用

ユーザ一覧のテーブルは特に装飾をしていません。

なので、シンプル過ぎて見栄えが良くないです。

現在の表示がこちらです。

ここで、テーブルにBootstrapのCSSを適用します。

ついでに、「名前」と「詳細」ボタンを付けます。

6行目でテーブルに2つのスタイルを適用しています。

table table-stripedは奇数行が灰色に変わります。

table table-borderedは枠線が付きます。

17、18行目で名前と詳細のリンクを1つのセルに入れるようにしています。

また、18行目でclass=”btn btn-outline-primary”を使って

リンクをボタンのように表示しています。

表示結果はこんな感じです。

detail.htmlのテーブルにbootstrapを適用

ユーザ詳細ページも特にCSSは適用していないので、とてもシンプルです。

テーブルと「ユーザ一覧へ」のリンクのスタイルを変更してみます。

テーブルは1列の中で「:」で区切られているのはダサいので、ついでに2列にします。

7行目のテーブルタグに対しては、先ほどと同じスタイルを適用しています。

10行目~33行目で2列にそれぞれの情報をセットさせるように変更しています。

37行目で「ユーザ一覧へ」のリンクに対して、ボタン表示になるよう設定をしています。

表示してみると、こちらもええ感じに表示されていました。

Bootstrapのスタイルは数多くあり、ググれば色々出てきます。

ボタンのスタイルはこちらを参考にしたので良ければ見てください。

とほほのBootstrap 4入門

ABOUT ME
LooseCarrot
LooseCarrot
ブログ運営をしているLooseCarrotです。 興味のあることにトライして発信していきます! プロフィール
関連している記事