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

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

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

[amazonjs asin=”B00VV5C40C” locale=”JP” title=”これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装”]

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

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

[html title=”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 %}
[/html]

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

[html title=”base.htmlのbase.htmlの内容”] <body>
{% include ‘./header.html’ %}
<div class="container">
{% block content %}
{{ content }}
{% endblock %}
</div>
</body>
[/html]

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

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

 

メイン部分を作る

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

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

[html] <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>
[/html]

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

[css title=”main.cssの内容”] .main {
border-radius: 10px;
/* Safari,Chrome */
-webkit-border-radius: 10px;
/* Firefox */
-moz-border-radius: 10px;
padding: 10px;
background-color: #EEEEEE;

}
[/css]

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

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

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

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

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

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

 

角丸になった。

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

Related posts

コメントを残す