[Python #11] [Django #4] 听说 Bootstrap 可以很容易给网页穿样式？

june0620

Published: 10 Aug 2020 › Updated: 10 Aug 2020 [Python #11] [Django #4] 听说 Bootstrap 可以很容易给网页穿样式？

[Python #11] [Django #4] 听说 Bootstrap 可以很容易给网页穿样式？

pixabay

本期介绍如何用 Bootstrap 给上期制作的网页穿上衣服。像我这样的 html, css 小菜鸟， Bootstrap最好不过了。

创建 html 文件及设置

👇 同上期，在 templates 文件夹创建 album.html和 base.html，之后修改 views.py 里的 template_name 改为 album.html。

$ touch templates/base.html
$ touch templates/album.html

👇 如其名，base.html 是一个基文件。在当前情况其实也不需要这文件，直接写在album.html 文件下也可，但为了以后的维护还是准守规则吧。
在文件内写入 django 的命令和 bootstrap 的css路径。

# templates/base.html

{% load static %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

{% spaceless %}
{% endspaceless %}

{% block content %}
{% endblock content %}

👇 album.html 需要继承 base.html，在此文件内写入详细的 html 代码。
首先让我们看下如何使用 django 命令。有个继承 base.html 的代码，意味着继承 Bootstrap 的 css。
{% block content %}与 {% endblock content %}之间写入详细的 html 代码即可，这些代码也可以用 Bootstrap 的模板。不需要的部分便从模板删除后用 {% for post in all_posts_list %}, {% endfor %}命令给网页循环映射 STEEM 列表。
_{📝 Bootstrap 模板可以在官方例句的 album 获取代码。}

# templates/album.html

{% extends 'base.html' %}

{% block content %}

{% for post in all_posts_list %}
{% endfor %}

{% endblock content %}

👇 整体代码如下，比较简单。运行服务器后，访问可以看到穿好衣服的 STEEM 目录，还支持手机版。

{% extends 'base.html' %}
{% load post_extras %}

{% block content %}

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Steem Blog</title>
  </head>
  <body>
      <header>
          <div class="navbar navbar-dark bg-dark shadow-sm">
              <div class="container d-flex justify-content-between">
                  <a href="#" class="navbar-brand d-flex align-items-center">
                      <svg xmlns="https://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false">
                          <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
                          <circle cx="12" cy="13" r="4"/>
                      </svg>
                      <strong>Steem Blog</strong>
                  </a>
              </div>
          </div>
      </header>
      <main role="main">
          <div class="album py-5 bg-light">
              <div class="container">
                  <div class="row">
                      {% for post in all_posts %}
                      <div class="col-md-4 d-flex pb-3">
                          <div class="card mb-4 shadow-sm">
                              {% with post.comment.json_metadata|str_to_dict as extras %}
                              <a href="https://www.steemit.com/@{{post.comment.author}}/{{ post.comment.permlink }}" target="_blank">
                                  <img src="{{ extras.image.0 }}" class="card-img-top" alt="" height="220" width="512">
                              </a>
                              {% endwith %}
                              <div class="card-body">
                                  <p class="card-text">{{ post.comment.root_title }}</p>
                                  <div class="d-flex justify-content-between align-items-center">
                                      <div class="btn-group">
                                      </div>
                                      <small class="text-muted">댓글 {{ post.comment.children }} </small>
                                      <small class="text-muted">보팅 {{ post.comment.active_votes|length }} </small>
                                      <small class="text-muted">보상 {{ post.comment.pending_payout_value }} </small>
                                  </div>
                              </div>
                          </div>
                      </div>
                      {% endfor %}
                  </div>
              </div>
          </div>
      </main>
    </body>
</html>
{% endblock content %}

.
.
.
.
[Cookie 😅]
Python 3.7.4
Django 2.2.4
steem-python 1.0.1
goorm IDE 1.3

Leave [Python #11] [Django #4] 听说 Bootstrap 可以很容易给网页穿样式？ to:

Written by ETHAN

Best Posts From ETHAN

We have not curated any of june0620's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

[Python #11] [Django #4] 听说 Bootstrap 可以很容易给网页穿样式？