Django初学者笔记系列（十）： 使用jumbotron设置主页的样式

使用jumbotron设置主页的样式

下面来使用新定义的header 块及另一个名为jumbotron的Bootstrap元素修改主页。jumbotron元素是一个大框，相比于页面的其他部分显得鹤立鸡群，你想在其中包含什么东西都可以；它通常用于在主页中呈现项目的简要描述。我们还可以修改主页显示的消息。index.html的代码如下：

{
   % extends "learning_logs/base.html" %}
  {
   % block header %} 
    <div class='jumbotron'>
	  <h1>Track your learning.</h1>
    </div>
{
   % endblock header %}

{
   % block content %} 
  <h2>
    <a href="{% url 'users:register' %}">Register an account</a> to make your own Learning Log, and list the topics you're learning about.
  </h2>
  <h2>
   Whenever you learn something new about a topic, make an entry
summarizing what you've learned.
  </h2>
{
   % endblock content %}

设置登录页面的样式

我们改进了登录页面的整体外观，但还未改进登录表单，下面来让表单与页面的其他部分一致：

login.html:

{
   % extends 'learning_logs/base.html' %}

{
   % load bootstrap3 %}

{
   % block header %}
  <h2>Log in to your account.</h2>
{
   % endblock header