基于How To Tango With Django 1.9的重新实践（12）——Bootstrapping Rango

来源：互联网发布：长虹大数据公司编辑：程序博客网时间：2024/06/06 20:58

在本章中，我们将使用Twitter Bootstrap 4 Alpha工具包对Rango进行样式化。Bootstrap是最流行的HTML，CSS，JS Framework，我们可以用它来设计我们的应用程序。该工具包允许您设计和设计响应式Web应用程序，并且在熟悉它后很容易使用。

现在看看Bootstrap 4.0网站 - 它提供了样本代码和不同组件的示例，以及如何通过添加在适当的样式标签等样式。在Bootstrap网站上，他们提供了一些示例布局，我们可以基于我们的设计。

为了风格Rango，我们已经确定仪表板样式或多或少符合我们在Rango布局方面的需求，即它在顶部有一个菜单栏，一个侧栏（我们将用来显示类别）和一个主要内容窗格。

下载并将Dashboard布局的HTML源保存到调用的文件，base_bootstrap.html并将其保存到您的templates/rango目录。

在我们可以使用模板之前，我们需要修改HTML，以便我们可以在我们的应用程序中使用它。我们执行的更改以及更新的HTML列在下面（所以你不必去麻烦）。

把所有的../../改成http://getbootstrap.com
修改dashboard.css为绝对路径http://getbootstrap.com/examples/dashboard/dashboard.css
起初顶部导航栏的搜索表单
把所有没有必要的内容删除并用{% block body_block %}{% endblock %}替换.
设置标题元素为<title>Rango - {% block title %}How to Tango with Django!{% endblock %}</title>
把项目的名字改为Rango
为顶部导航的主页,登录,注册添加链接.
添加侧边块,例如{% block side_block %}{% endblock %}

12.1 新的基础模板

<!doctype html><html lang="en">{% load staticfiles %}{% load rango_template_tags %}<head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <!-- 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 'images/favicon.ico' %}">    <title>        Rango -        {% block title %}            How to Tango with Django!        {% endblock %}    </title>    <!-- Bootstrap core CSS -->    <link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">    <!-- Custom styles for this template -->    <link href="http://v4-alpha.getbootstrap.com/examples/dashboard/dashboard.css" rel="stylesheet"></head><body><nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">    <button class="navbar-toggler navbar-toggler-right hidden-lg-up"            type="button"            data-toggle="collapse"            data-target="#navbar"            aria-controls="navbar"            aria-expanded="false"            aria-label="Togglenavigation">        <span class="navbar-toggler-icon"></span>    </button>    <a class="navbar-brand" href="{% url 'index' %}">Rango</a>    <div class="collapse navbar-collapse" id="navbar">        <ul class="navbar-nav mr-auto">            <li class="nav-item active">                <a href="{% url 'index' %}" class="nav-link">                    Home                </a>            </li>            <li class="nav-item">                <a href="{% url 'about' %}" class="nav-link">                    About                </a>            </li>            {% if user.is_authenticated %}            <li class="nav-item">                <a href="{% url 'restricted' %}" class="nav-link">                    Restricted Page                </a>            </li>            <li class="nav-item">                <a href="{% url 'add_category' %}" class="nav-link">                    Add a New Catagory                </a>            </li>            <li class="nav-item">                <a href="{% url 'auth_logout' %}?next=/rango/" class="nav-link">                    Logout                </a>            </li>            <li class="nav-item">                <a href="{% url 'registration_register' %}" class="nav-link">                    Register Here                </a>            </li>            <li class="nav-item">                <a href="{% url 'auth_login' %}" class="nav-link">                    Login                </a>            </li>            {% endif %}        </ul>    </div></nav><div class="container-fluid">    <div class="row">        <div class="col-sm-3 col-md-2 sidebar">            {% block sidebar_block %}                {% get_category_list category %}            {% endblock %}        </div>        <div class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 main">            {% block body_block %}            {% endblock %}        </div>    </div></div><!-- Bootstrap core JavaScript    ================================================== -->    <!-- Placed at the end of the document so the pages load faster -->    <script      src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">    </script>    <script      src="http://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js">    </script>    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->    <script      src=    "http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js">    </script></body></html>

如果仔细看dashboard的html源代码,会发现许多结构都是通过<div>标签创建的.页面被分为两部分 - 顶部导航栏和主面板,都被<div class="container-fluid">包含.在导航栏区域,我们加入我们网站的链接.在主面板区域有两列专栏,一个是side_block,另一个是body_block.

12.2 快速更改样式

为了给Rango一个非常需要的改造，我们可以用base.htmlHTML模板代码替换现有的内容base_bootstrap.html。您可能需要先注释掉现有代码base.html，然后在代码中复制base_bootstrap.html。

现在重新加载您的应用程序。很不错！

你应该注意到你的应用程序已经好了一百倍。下面我们有一些关于页面的屏幕截图显示前后。

翻阅不同的页面。因为他们都继承了基地，他们都会看起来不错，但不完美！在本章的剩余部分，我们将对模板进行一些更改，并使用各种Bootstrap类来改善Rango的外观和感觉。

这里写图片描述

12.2.1 首页

因为我们只封装了标题和页面,例如<div class="page-header">,我们还没有真正利用Bootstrap给我们提供的样式.所以我们采用列流页面并使用它们容纳顶级目录和顶级页面.因为原来的页面有4个列,我们使用两个并把它们的尺寸调大.修改index.html模板:

index.html:

<!DOCTYPE html>{% extends 'rango/base.html' %}{% load staticfiles %}{% block title_block %}    Index{% endblock %}{% block body_block %}<div class="jumbotron">    <h1 class="display-3">Rango says...</h1>    {% comment %}    我们已经使用Django的模板语言来检查用户是否经过身份验证{% if user.is_authenticated %}。    如果用户已登录，那么Django会让我们访问该user对象。我们可以从这个对象判断用户是否登录（认证）。    如果他或她已登录，我们还可以获得有关他或她的详细信息。    {% endcomment %}    {% if user.is_authenticated %}        <p class="lead">hey there {{ user.username }}!</p>    {% else %}        <p class="lead">hey there partner!</p>    {% endif %}</div><div class="row marketing">    <div class="col-lg-6">        <h4>Most Liked Categories</h4>        <p>            {#如果categories数量不为0#}            {% if categories %}                <ul>                    {#使用category遍历categories#}                    {% for category in categories %}                    {# 取出每个category的name，以无序列表的形式表现出来 #}                    <li><a href="{% url 'show_category' category.slug %}">{{ category.name }}</a></li>                    {% endfor %}                </ul>                {# 当categories数量为0的时候 #}            {% else %}                <strong>There is no categories persent.</strong>            {% endif %}        </p>    </div>    <div class="col-lg-6">        <h4>Most Viewed Paes</h4>        <p>        {% if pages %}        <ul>            {% for page in pages %}            <li><a href="{{ page.url }}">{{ page.title }}</a></li>            {% endfor %}        </ul>        {% else %}            <strong>There is no pages persent.</strong>        {% endif %}        </p>    </div></div>    <img src="{% static "images/rango.png" %}" alt="Picture of Rango" />{% endblock %}

这里写图片描述

页面将会变得更漂亮了.但是列表的样式比较恶心.让我们使用Bootstrap的列表组样式 http://getbootstrap.com/components/#list-group .修改<ul>元素为<ul class="list-group">,修改<li>为<li class="list-group-item">

<!DOCTYPE html>{% extends 'rango/base.html' %}{% load staticfiles %}{% block title_block %}    Index{% endblock %}{% block body_block %}<div class="jumbotron">    <h1 class="display-3">Rango says...</h1>    {% comment %}    我们已经使用Django的模板语言来检查用户是否经过身份验证{% if user.is_authenticated %}。    如果用户已登录，那么Django会让我们访问该user对象。我们可以从这个对象判断用户是否登录（认证）。    如果他或她已登录，我们还可以获得有关他或她的详细信息。    {% endcomment %}    {% if user.is_authenticated %}        <p class="lead">hey there {{ user.username }}!</p>    {% else %}        <p class="lead">hey there partner!</p>    {% endif %}</div><div class="row marketing">    <div class="col-lg-6">        <h4>Most Liked Categories</h4>        <p>            {#如果categories数量不为0#}            {% if categories %}                <ul class="list-group">                    {#使用category遍历categories#}                    {% for category in categories %}                    {# 取出每个category的name，以无序列表的形式表现出来 #}                        <li class="list-group-item">                            <a href="{% url 'show_category' category.slug %}">{{ category.name }}</a>                        </li>                    {% endfor %}                </ul>                {# 当categories数量为0的时候 #}            {% else %}                <strong>There is no categories persent.</strong>            {% endif %}        </p>    </div>    <div class="col-lg-6">        <h4>Most Viewed Paes</h4>        <p>        {% if pages %}            <ul class="list-group">                {% for page in pages %}                    <li class="list-group-item">                        <a href="{{ page.url }}">{{ page.title }}</a>                    </li>                {% endfor %}            </ul>        {% else %}            <strong>There is no pages persent.</strong>        {% endif %}        </p>    </div></div>    <img src="{% static "images/rango.png" %}" alt="Picture of Rango" />{% endblock %}

这里写图片描述

12.3 登录页面

让我们将注意力转移到登录页面.在Bootstrap网站我们已经看到漂亮的登录表单,查看 http://getbootstrap.com/examples/signin/ .如果查看源代码,你会发现我们需要在基础登录表单上加入许多类.修改login.html模板如下:

{% extends 'rango/base.html' %}{% block title_block %}    Login{% endblock %}{% block body_block %}    <link href="http://v4-alpha.getbootstrap.com/examples/signin/signin.css" rel="stylesheet">    <div class="jumbotron">        <h1 class="diaplay-3">Login</h1>    </div>    <form class="form-signin" role="form" method="post" action=".">        {% csrf_token %}        <h2 class="form-signin-heading">Please sign in</h2>        <label for="inputUsername" class="sr-only">Username</label>        <input type="text" id="id_username" class="form-control" name="username" placeholder="Username" required autofocus>        <label for="inputPassword" class="sr-only">Password</label>        <input type="password" id="id_password" class="form-control" name="password" placeholder="Password" required>        <button class="btn btn-lg btn-primary btn-primary btn-block" type="submit" value="Submit">Sign in</button>        <input type="hidden" name="next" value="{{ next }}">    </form>    <p>Not a mumber?<a href="{% url 'registration_register' %}">Register!</a></p>{% endblock %}

这里写图片描述

0 0