Bootstrap + Django で、themeをMaterial ぽくする。
大まかな流れ
ベースになるbase.htmlページを作成する。
- base.htmlを作成する
- urls.pyを設定して、テストしてみる。
- css.htmlを作成する
- javascript.htmlを作成する
- base.htmlに読み込ませる
bootstrapのthemeを変える
- チューニングされている bootstrapファイルをダウンロードする
ベースになるbase.htmlページを作成する。
base.htmlを作成する
base.htmlに、bootstrapのページから適当にexamplesのソースコードをコピペして、そのまま貼り付ける。
bootstrapのdistのzipファイルをダウンロードする。
zipファイルの中身を、djangoのstaticフォルダ内に配置する。ファイル種別によって、フォルダ別にまとめてあるので、そのままstaticフォルダに配置する。
zipファイルの中に入っていなくて、配置が必要なcssファイルなどは、bootstrapのソースコードから直接ダウンロードしてくる。
必要なファイルをstaticファイルに配置したら、
{% static "" %}で、静的ファイルを読み込むように設定する。
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href='{% static "img/favicon.ico" %}'>
<title>TurnPike</title>
<!-- Bootstrap core CSS -->
<link href='{% static "css/bootstrap.min.css" %}' rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href='{% static "css/ie10-viewport-bug-workaround.css" %}' rel="stylesheet">
<!-- Custom styles for this template -->
<link href='{% static "css/navbar-fixed-top.css" %}' rel="stylesheet">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src='{% static "js/bootstrap.min.js" %}'></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src='{% static "js/ie10-viewport-bug-workaround.js" %}'></script>
</body>
</html>
- urls.pyで、適当にTemplateViewなどで、上記で作成したbase.htmlをレンダリングして表示させてみる。
from django.conf.urls import url, include from django.contrib import admin from django.views.generic.base import TemplateView urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^.*', TemplateView.as_view(template_name="base.html"), name='home'), ]
- 表示されたらとりあえず第一段階完了(^^)
css.htmlを作成する。
{% load staticfiles %}
<!-- Bootstrap core CSS -->
<link href='{% static "css/bootstrap.min.css" %}' rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href='{% static "css/ie10-viewport-bug-workaround.css" %}' rel="stylesheet">
<!-- Custom styles for this template -->
<link href='{% static "css/navbar-fixed-top.css" %}' rel="stylesheet">
javascript.htmlを作成する。
{% load staticfiles %}
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src='{% static "js/bootstrap.min.js" %}'></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src='{% static "js/ie10-viewport-bug-workaround.js" %}'></script>
base.htmlに、css.html, javascript.htmlをincludeする。
<head> {% include 'css.html' %} </head> <body> {% include 'javascript.html'%} </body>
bootstrapのthemeを変える
チューニング済みの、materialUIぽい、bootstrap.min.jsをダウンロードしてくる。
今回は以下のサイトから、paperというthemeをダウンロード！ http://bootswatch.com/
ダウンロードするときに、paper_bootstrap.min.css とか今回は本家のbootstrapとちょっとファイル名を変えて保存してみた。失敗したときにすぐ戻せるように。
css.htmlの、
bootstrap.min.cssの部分を、paper_bootstrap.min.cssに変更して、アクセスしてみる。。。。お〜かっこよくなった！(^^)
