ローカルでも動くPython3+Djangoを使ったアップローダーなんかを作ってみる 3 jQueryとBootstrapを導入

Facebook にシェア
Pocket
LINEで送る
このエントリーを Google ブックマーク に追加

staticディレクトリを用意

sites/sites_project/staticディレクトリを作成し、その中にcss、js、imgディレクトリをそれぞれ作成する。

jQueryをjsディレクトリをjsファイルに設置

jQuery本体を公式ページからダウンロードし、static/jsディレクトリに設置する。

Bootstrapをstaticディレクトリに設置

Bootstrapを公式ページからダウンロードし、js、cssの中身をstatic/js、cssにそれぞれ入れ、fontsディレクトリをstatic直下に入れる。

ディレクトリ階層は以下のようになる。

スクリーンショット 2015-08-20 18.10.59

 

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]

スクリーンショット 2015-08-21 2.37.01

 
bootstrapのテーブルのストライプがうまく動いている。

Related posts

コメントを残す