ローカルでも動く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を追記する。

<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>

 

試しにbootstrapを利用する

sites/sites_project/uploader/templates/uploader/top_page.htmlでBootstrapを利用してみる。
top_page.html の content ブロックに以下のように追記する。

{% 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 %}

以下を実行してブラウザでhttp://localhost:8082/uploader/top/にアクセスする。

(sites) $ cd ~/sites
(sites) $ python manage.py runserver localhost:8082

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

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

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です