使用Bootstrap样式

  • Bootstrap
    • Bootstrap的安装
    • Bootstrap在Django中的使用
  • 使用Bootstrap设置项目样式
    • 修改base基模板
      • 添加导航栏
      • Bootstrap 元素的间距控制
      • 页面主题内容
    • 主页样式
    • 设置登录界面样式
    • 设置new_topic页面样式
    • topic页面Bootstrap card样式
      • Bootstrap 颜色

Bootstrap

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它有以下几个优点：

  • 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
  • 浏览器支持：所有的主流浏览器都支持 Bootstrap。
  • 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
  • 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

Bootstrap的安装

pip install django-bootstrap4安装完成。可以在venv下的lib看到bootstrap4：

然后在setting.py中添加bootstrap应用：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # 创建的应用
    'learning_logs',
    'users',
    'bootstrap4',
]

Bootstrap在Django中的使用

Bootstrap安装后在，模板html文件中导入bootstrap4包，然后在HTML标签前加bootstrap_*前缀，例如在 login.html 中使用Bootstrap样式的表单

{% load bootstrap4 %}

{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}
...
  <form class="form" action="{% url 'users:login' %} " method="post">
    {% csrf_token %}
    {% bootstrap_form form %}
    <input type="submit" value="Login"/>
    <a href="{% url 'users:register' %}">register</a>
    <input type="hidden" name='next' value="{% url 'learning_logs:index' %}"/>
  </form>

使用Bootstrap创建的登录表单：

使用Bootstrap设置项目样式

在Bootstrap的官网上可以找到各种模板，包括框架、相簿、表单和导航等例子。

修改base基模板

{% load bootstrap4 %}
{% load static %}
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="{% static 'img/dj.ico' %}">
    <title>{% block title %}My amazing site{% endblock %}</title>
    {% bootstrap_css %}
    {% bootstrap_javascript jquery='full' %}
  </head>

<body>
...

{% load bootstrap4 %}加载了django-bootstrap4中的模板标签集，{% bootstrap_css %}和{% bootstrap_javascript jquery='full' %}是其自定义的模板标签，它让Django包含所有的Bootstrap样式文件。接着使用一对<nav></nav>标签，创建导航栏。

添加导航栏

导航栏在应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。根据官方提供的导航栏例子，创建一个带有下拉列表和提供搜索的表单的导航栏。导航栏需要使用.navbar包装，使用.navbar-expand-{-sm|-md|-lg|-xl}来决定响应式折叠设计。
导航栏支持添加的内容：

  • navbar-brand ：可以用来显示项目、产品等一些名称；
  • .navbar-nav ：提供轻量级的导航栏；
  • .navbar-toggler ：提供可折叠的插件；
  • .form-inline ：在导航栏提供内置的表单；
  • .navbar-text： 添加垂直居住的文本；
  • .collapse.navbar-collapse ：对导航栏内容进行分组和隐藏；
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Blog</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link active" href="{% url 'learning_logs:index' %}">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="{% url 'learning_logs:topics' %}">博客</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <div>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>

      <ul class="nav navbar-nav navbar-right">
        {% if user.is_authenticated %}
          <li class="nav-item dropdown">

            <a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              {{ user.username }}<b class="caret"></b>
            </a>
            <div class="dropdown-menu" role="menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">我的文章</a>
              <a class="dropdown-item" href="{% url 'learning_logs:new_topic' %}">创建博客</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="{% url 'users:logout' %}">退出</a>
            </div>
          </li>
        {% else %}
          <li class="nav-item">
            <a class='nav-link' href="{% url 'users:login' %}">登录</a>
          </li>
        {% endif %}
      </ul>
    </div>
  </nav>

导航元素的所有内容，都会根据选择器navbar ，navbar-expand-md ，navbar-dark和 bg-dark定义的Bootstrap样式规则来设置样式。navbar-expand-md（长度middle）设置当浏览器窗口太窄、无法水平显示全部的导航栏时，显示出折叠按钮（属性navbar-toggler的<botton>），点击时会显示导航栏的所有元素。
折叠时
点击
navbar-light bg-light设置导航栏的主题颜色。
接下来通过.collapse navbar-collapse类属性添加一个导航元素列表<ul class="navbar-nav mr-auto">，里面是一系列导航链接.nav-link，每一个链接都包裹在一个列表项内<li class="nav-item">，使用.active表明活动状态，表明当前的导航链接可用。
使用.nav-item dropdown来创建一个下拉式的菜单（Dropdowns），在点击时会弹出对应的菜单<div class="dropdown-menu">，菜单内是链接<a class="dropdown-item" href=""，最后导航栏内添加了一个供搜索用输入的表单<form class="form-inline my-2 my-lg-0">，包含一个输入框和一个按钮。

Bootstrap 元素的间距控制

Bootstrap包含了各种控制填充和边距的类，可用于修改元素的外观。
使用的形式为：

  • {property}{sides}-{size}：适用大小xs（extreme small）
  • {property}{sides}-{breakpoint}-{size}：使用大小sm, md, lg, 和 xl（从small到extreme large）

其中property代表：

  • m- 设置外边距margin
  • p - 设置内边距padding

sides设置元素的侧边：

  • t - 设置margin-top 或 padding-top顶部距离
  • b - 设置margin-bottom或 padding-bottom底部距离
  • l- 设置margin-left 或 padding-left左侧距离
  • r - 设置margin-right或padding-right右侧距离
  • x- 同时设置*-left和 *-right左右侧距离
  • y - 同时设置*-top 和 *-bottom上下端距离
  • 空白- 同时设置四个侧边的距离

size设置距离的大小：

  • 0：设置margin或padding内外间距为0，即消除间距；
  • 1~5：设置间距从$spacer * .25到$spacer * 3；
  • auto：设置margin外边距为自动填充模式；

在导航栏设置中<ul class="navbar-nav mr-auto">代表每个导航元素右侧的边距都使用自动设置。

页面主题内容

网页的主体部分分为2块，其中header块内容告诉用户页面包含那些信息以及用户可在页面上执行那些操作，其class属性值page-header将一系列样式应用于这个块。content为一个独立的div，存放页面的主要内容。

    <div class="container">
      <div class="page-header">
        {% block header %}{% endblock %}
      </div>
      <div>
        {% block content %}{% endblock %}
      </div>
    </div><!--endof container-->

主页样式

在主页的header块添加一个jumbotron超大屏幕的Bootstrap元素。jumbotron是一个大框，相比页面的其他元素更为显眼。

{% block header %}
  <div class="jumbotron">
    <h1>Track your learning.</h1>
  </div>
{% endblock %}

设置登录界面样式

{% extends 'base.html' %}
{% load bootstrap4 %}
{% block title %}Login{% endblock %}
{% block header %}
  <h2>请用户登录</h2>
{% endblock %}

{% block content %}
  <form class="form" action="{% url 'users:login' %} " method="post">
    {% csrf_token %}
    {% bootstrap_form form %}
    <input type="submit" value="Login"/>
    <input type="hidden" name='next' value="{% url 'learning_logs:index' %}"/>
  </form>
  <p>没有账户，<a href="{% url 'users:register' %}">请注册</a></p>
{% endblock %}

在 login.html 中也加载bootstrap的模板标签， 使用bootstrap样式的表单，只需在form加上bootstrap_form标签即可。而且django-bootstrap4会自动管理表单错误，也不需要{% if form.error %}代码块了。
而且错误提示的风格也一致。

设置new_topic页面样式

同样加载bootstrap4模板标签，使用{% bootstrap_form form %}来代替{{ form.as_p }}

{% extends "base.html" %}
{% load bootstrap4 %}
{% block title %}New Topic{% endblock %}
{% block header %}
  <h2>Add a new topic:</h2>
{% endblock %}
{% block content%}

<form class="form" action="{% url 'learning_logs:new_topic' %}" method="post">
  {% csrf_token %}
  {% bootstrap_form form %}
  <input type="submit" value="Submit"/>
</form>
{% endblock %}

页面效果

topic页面Bootstrap card样式

在topic页面下，要显示当前topic的名字和其下的post的创建日期与具体内容，使用Bootstrap4的card卡片（原Bootstrap3的panel）代替原来的无序列表（ul）来显示post。创建一个基本的面板，只需要向 <div>元素添加 class .card 即可：

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

.card-body内为card的主题内容，使用 .card-title 向卡片添加标题，.btn btn-primary添加一个按钮。

{% extends "base.html" %}

{% block title %}{{ id }}{% endblock %}

{% block header %}
  <h2>{{ topic }}</h2>
{% endblock %}

{% block content %}
  <p><a href="{% url 'learning_logs:new_post' id %}">Add new post:</a></p>
  {% for post in posts %}
    <div class="card text-white bg-dark mb-3">
      <div class="card-body">
        <h3 class="card-title">{{ post.date_added|date:'M d, Y H:i' }}</h3>
        <p class="card-text">{{ post.text|linebreaks }}</p>
        <a class="btn btn-primary" href="{% url 'learning_logs:edit_post' post.id %}">edit post</a>
      </div>
    </div>
  {% empty %}
    <p>Waiting to add...</p>
  {% endfor %}
{% endblock %}

将topic界面的card设置成主题为黑色，设置其与下一个卡片的边距为mb-3，按钮添加到edit_post的链接。
效果

Bootstrap 颜色

Bootstrap 通过class.text-*color来设置文本和链接的颜色，使用class.bg-*color和背景的颜色。

更多推荐

Django学习6-Bootstrap样式：导航栏、表单、card