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が使用されることを確認します
