Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

django備忘録8 Adding Bootstrap to Django

Adding Bootstrap to Django

getbootstrap.com

参照サイト

try-django-1.8 というjustinさんのサイトを参考に学習を進めています。 https://www.youtube.com/watch?v=KsLHt3D_jsE

markdown記法の備忘録用のリンク Markdown記法 チートシート - Qiita

大まかな流れ　〜　examplesと同じような表示にする。

gettingstart →examples から好きなサイトを選ぶ →好きなexamplesを開いて、macの上のbarの、「表示→開発/管理→ソースを表示」 →ソースを全部選択して、base.html(無ければ作成して）コピペする →views.pyで、base.html を表示させてみて、確認してみる。 →このままだと、css,jsなどのファイルが読み取られていないため、装飾がまったくないサイトが出てくる →bootstrapのgettingstart の、Getting started · Bootstrap　のCDNの箇所をコピー →の最後の方に、それを挿入してみる。

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  </head>

みたいな感じ。 これで一旦、base.htmlが、exampleと同じような感じで表示される。

→ただこれは一時的な処理なので、上記のコードは削除して、元のプレーンな感じに戻す。

大まかな流れ2

  • もう一度、examplesを開いて、macの上のbarの、「表示→開発/管理→ソースを表示」
  • 以下のような感じになっているところに注目する。
    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
  • "../../dist/css/bootstrap.min.css" のリンクを開く→それをダウンロードする。これが、bootstrapに必要なCSSファイルになる。
  • CSSファイルは、static_fileのため、localのstaticfileに置く。置くときは、css　などと、ファイル種別ごとにフォルダ分けして保存する。 例えば、static_in_pro/our_static/css/bootstrap.min.css　とかいう感じになるように設定する。
  • そんな感じで、全部リンクになっているファイルをゲットして、localのstaticファイル保存用フォルダに、保存する
  • staticfile の設定の、{% load staticfiles %}を利用して、localのstaticファイルをhtmlから、参照できるようにする。django1.10だと、{% load staticfiles %}ぽい。

静的ファイル (画像、JavaScript、CSS など) の管理 | Django documentation | Django

  • 参照用に、
    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- <img src="{% static "my_app/example.jpg" %}" alt="My image"/> -->

こんな感じで、テンプレをコメントとして、表示しておいて、編集するとわかりやすいかも。 * settings.py に、STATICFILES_DIRS　を設定してあるので、それを利用できる。

    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">

こんな感じ。 * リンクを全部変えたら、runserverしてみる。 * 表示されるのを確認したら、collectstaticしておく。 * collectstaticすると、STATIC_ROOTの方に、staticfileがcollectされる。 * 再度、base.html にアクセス。

エラーとか調べ物

[23/Sep/2016 22:44:34]"GET /static/css/bootstrap.min.css.map HTTP/1.1" 　このエラーがよくわからんので、調べておく。