ローカルでも動くPython3+Djangoを使ったアップローダーなんかを作ってみる 4

Share on Facebook
Pocket
LINEで送る
Bookmark this on Google Bookmarks

ローカルでも動くPython3+Djangoを使ったアップローダーなんかを作ってみる 3 jQueryとBootstrapを導入 の続き。
サイトの表示部分を作っていく。

とりあえずbootstrapっぽくナビゲーションバーを設置してみる

sites_project/uploader/templatesディレクトリにheader.htmlファイルを作成した。

{% block content %}
<!-- ナビゲーションバー -->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- ヘッダ情報 -->
        <div class="navbar-header">
            <a class="navbar-brand">アプロダ</a>
        </div>
        <!-- リストの配置 -->
        <ul class="nav navbar-nav">
            <li class="active">
              <a href="#">リスト1
              </a>
            </li>
            <li>
              <a href="#">
                リスト2
              </a>
            </li>
            <li>
              <a href="#">
                リスト3
              </a>
            </li>
        </ul>
          <!-- ボタン -->
        <div class="pull-right">
          <button type="button" class="btn btn-success navbar-btn">
              <span class="glyphicon glyphicon-envelope">
                お問い合わせ
              </span>
          </button>
        </div>
    </div>
</nav>
{% endblock content %}

sites_project/uploader/templates/base.html ファイルで読み込む。
読み込む方法に関してはこちら

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

http://localhost:8082/uploader/top/ にアクセスしてみる。

スクリーンショット 2015-08-24 18.15.21

 

メイン部分を作る

bootstrapのoffsetを使って、メイン部分をセンタリングする。

classにcontainerがあるdivのclassを追加した。mainクラスは次のCSSのため。

<body>
  {% include './header.html' %}
    <div class="row">
        <div class="col-md-8 col-md-offset-2 container main">
            {% block content %}
                {{ content }}
            {% endblock %}
        </div>
    </div>
</body>

メイン部分の背景を灰色にして角を丸くするために、sites/sites_project/static/cssにmain.cssを作成して次のように記述。

.main {  
    border-radius: 10px;  
    /* Safari,Chrome */
    -webkit-border-radius: 10px;
    /* Firefox */
    -moz-border-radius: 10px;
    padding: 10px;
    background-color: #EEEEEE;

} 

base.htmlでmain.cssを読み込む。

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

    <!-- オリジナルcss -->
    <link rel="stylesheet" href="{% static 'css/main.css' %}" />

    {# 各ページごとにヘッダ情報を入れたい場合用 #}
    {% block header %}
        {{ header }}
    {% endblock %}
</head> 

ブラウザで表示してみる。

スクリーンショット 2015-08-26 3.47.14

 

角丸になった。

次回、アップロード部分。

Follow me!

コメントを残す

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