More than 5 years have passed since last update.

Djangoでウェブアプリ - bootstrapを使ってみる

tigergate472

Last updated at 2018-09-26Posted at 2018-09-05

Djangoを使ってウェブアプリを作ります
bootstrapを使ってみます

このページで作成されたDjango環境はここからダウンロード可能です

#1. htmlを用意します

penguinフォルダのurls.pyに以下を追加します

penguin/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('bstest', views.bstest, name='bstest'),
    path('', views.index, name='index'),
]

penguinフォルダのviews.pyに以下を追加します

from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

def bstest(request):
    return render(request, 'bstest.html')

penguinフォルダのtemplatesサブフォルダに以下のようなhtmlを追加します

penguin/templates/base.html

{% load static %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/bootstrap/css/bootstrap-grid.min.css' %}" rel="stylesheet">
<link href="{% static 'moomin.css' %}" rel="stylesheet">
<script src="{% static 'vendor/jquery/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
{% block extrahead %}{% endblock %}
</head>
<body>
  <!-- ヘッダー -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="margin-bottom: 1rem;">
    <a class="navbar-brand" href="/">Djangoサンプル</a>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <!-- 同音異義語 -->
        <li class="nav-item {% if app_label == 'moomin' %}active{% endif %}">
          <a class="nav-link" href="/moomin/">メニュー</a>
        </li>
      </ul>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>

  <div class="container">
    {% block content %}
      {{ content }}
    {% endblock %}
  </div>
</body>
</html>

penguin/templates/bstest.html

{% extends "base.html" %}

{% block title %}DjangoでBootstrapの練習{% endblock title %}

{% block extrahead %}{% endblock %}

{% block content %}

<div class="basic">
  <div class="row">
    <div class="col-sm-24 col-md-12">
      <div class="a1">
        <h3>col-md-12</h3>
        <p>幅いっぱいの内容を書く</p>
      </div>
    </div>
  </div>

  <hr />

  <div class="row">
    <div class="col-sm-12 col-md-6">
      <div class="b1">
        <h3>col-md-6</h3>
        <p>左半分の内容を書く</p>
      </div>
    </div>
    <div class="col-sm-12 col-md-6">
      <div class="b2">
        <h3>col-md-6</h3>
        <p>右半分の内容を書く</p>
      </div>
    </div>
  </div>

  <hr />

  <div class="row">
    <div class="col-sm-8 col-md-4">
      <div class="c1">
        <h3>col-md-4</h3>
        <p>左三分の一の内容を書く</p>
      </div>
    </div>
    <div class="col-sm-8 col-md-4">
      <div class="c2">
        <h3>col-md-4</h3>
        <p>中央三分の一の内容を書く</p>
      </div>
    </div>
    <div class="col-sm-8 col-md-4">
      <div class="c3">
        <h3>col-md-4</h3>
        <p>右三分の一の内容を書く</p>
      </div>
    </div>
  </div>

  <hr />

  <div class="row">
    <div class="col-sm-6 col-md-3">
      <div class="d1">
        <h3>col-md-3</h3>
        <p>左四分の一の内容を書く</p>
    </div>
    </div>
    <div class="col-sm-12 col-md-6">
      <div class="d2">
        <h3>col-md-6</h3>
        <p>中央の部分を書く</p>
    </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="d4">
        <h3>col-md-3</h3>
        <p>右四分の一の内容を書く</p>
    </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-24 col-md-12">
      <div class="z1">
        <p>copyrightとか。</p>
      </div>
    </div>
  </div>

</div>

{% endblock %}

staticフォルダに以下のcssを追加します

static/moomin.css

.basic {
  font-family: Meiryo;
}

.a1 {
  background-color:  #98d98e;
  height: 120px;
  text-align:center;
  font-size: 18pt;
  padding: 20px;
}
.b1 {
  background-color:  #e4de8a;
  height: 200px;
  text-align:left;
  font-size: 18pt;
  padding: 20px;
}
.b2 {
  background-color:  #cee4ae;
  height: 200px;
  text-align:left;
  font-size: 18pt;
  padding: 20px;
}
.c1 {
  background-color:  #bcbcff;
  height: 200px;
  padding: 20px;
}
.c2 {
  background-color:  #bcddff;
  height: 200px;
  padding: 20px;
}

.c3 {
  background-color: #6c9bd2;
  height: 200px;
  padding: 20px;
}
.d1 {
  clear: both;
  height: 200px;
  background-color:  #c1d8ac;
  padding: 20px;
}
.d2 {
  height: 200px;
  background-color:  #b9d08b;
  padding: 20px;
}
.d3 {
  height: 200px;
  background-color:  #badcad;
  padding: 20px;
}
.d4 {
  height: 200px;
  background-color:  #badcad;
  padding: 20px;
}

.e1 {
  clear: both;
  float: left;
  height: 400px;
  background-color:  #c1d8ac;
}
.e2 {
  float: left;
  height: 400px;
  background-color:  #b9d08b;
}
.e3 {
  float: left;
  height: 400px;
  background-color:  #badcad;
}

.f1 {
  clear: both;
  float: left;
  height: 400px;
  background-color:  #c1d8ac;
}
.f2 {
  float: left;
  height: 400px;
  background-color:  #b9d08b;
}
.f3 {
  float: left;
  height: 400px;
  background-color:  #badcad;
}

.g1 {
  clear: both;
  float: left;
  height: 400px;
  background-color:  #c1d8ac;
}
.g2 {
  float: left;
  height: 400px;
  background-color:  #b9d08b;
}
.g3 {
  float: left;
  height: 400px;
  background-color:  #badcad;
}

.v1 {
  clear: both;
  height: 100px;
  background-color:  #aacf53;
}
.x1 {
  height: 100px;
  background-color:  #c1d8ac;
}

.y1 {
  background-color: #e4dc8a;
  padding-left: 10px;
  height: 250px;
}
.z1 {
  height: 30px;
  background-color: #8f8667;
  font-size: 20px;
  text-align: center;
}

#2. 稼働を確認します

ブラウザを開き、localhost:8000/bstestへアクセスしてbootstrapが使用されることを確認します

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up