ローカルでも動くPython3+Djangoを使ったアップローダーなんかを作ってみる 3 jQueryとBootstrapを導入
staticディレクトリを用意
sites/sites_project/staticディレクトリを作成し、その中にcss、js、imgディレクトリをそれぞれ作成する。
jQueryをjsディレクトリをjsファイルに設置
jQuery本体を公式ページからダウンロードし、static/jsディレクトリに設置する。
Bootstrapをstaticディレクトリに設置
Bootstrapを公式ページからダウンロードし、js、cssの中身をstatic/js、cssにそれぞれ入れ、fontsディレクトリをstatic直下に入れる。
ディレクトリ階層は以下のようになる。
jQueryとBootstrapをテンプレートでインクルードする
sites/sites_project/uploader/templates/base.html のhead部分に、以下のBootstrapをjQueryを追記する。
[html title="base.htmlのheadタグ"]
<head>
<meta charset="utf-8">
{# 各ページごとにタイトルを入れたい場合用 #}
<title>アプロダ {% block title %}{{ title }}{% endblock %}</title>
<link rel="stylesheet" href="">
<!– Bootstrap –>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js’ %} "></script>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css’ %}" />
<link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css’ %}" />
<!– jQuery –>
<script type="text/javascript" src="{% static 'js/jquery-2.1.4.min.js’ %} "></script>
{# 各ページごとにヘッダ情報を入れたい場合用 #}
{% block header %}
{{ header }}
{% endblock %}
</head>
[/html]
試しにbootstrapを利用する
sites/sites_project/uploader/templates/uploader/top_page.htmlでBootstrapを利用してみる。
top_page.html の content ブロックに以下のように追記する。
[html]
{% block content %}
<table class="table table-striped">
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
</tr>
<tr>
<td>data2</td>
</tr>
<tr>
<td>data3</td>
</tr>
</tbody>
</table>
{% endblock content %}
[/html]
以下を実行してブラウザでhttps://localhost:8082/uploader/top/にアクセスする。
[shell]
(sites) $ cd ~/sites
(sites) $ python manage.py runserver localhost:8082
[/shell]
bootstrapのテーブルのストライプがうまく動いている。