python编程：从入门到实践学习笔记-基于Django框架的Web开发-设计样式和部署（一）

第二十章 设计样式和部署（一）

设置项目“学习笔记”的样式

应用程序django-bootstrap3

bootstrap是一组用于为Web应用程序设置样式的工具。

首先在活动的虚拟环境中执行。安装完成之后，我们需要在settings.py的添加如下代码，在项目中包含应用程序django-bootstrap3

接着让django-bootstrap3包含jQuery，这是一个JavaScript库，让你能够使用bootstrap模板提供的交互元素。在settings.py的末尾添加如下代码。

这些代码让你无需手工下载jQuery并将其放到正确的地方。

使用Bootstrap来设置项目“学习笔记的样式”

bootstrap基本上就是一个大型的样式设置工具集，它还提供了大量的模板。如果要查看bootstrap提供的模板，可以访问http://getbootstrap.com/，单击Getting Started，再向下滚动到Examples部分，并找到Navbars in action。我们将使用模板Static top navbar，他提供了简单的顶部导航条、页面标题和同于放置页面内容的容器。

修改base.html

这部分我们来修改base.html，先把他分成几部分进行修改。

1.定义HTML头部

第一个修改时在这个文件中定义HTML头部，使得显示“学习笔记”的每个页面时，浏览器标题栏都显示这个网站的名称。删除 base.html 的全部代码，并输入下面的代码：

首先加载django-bootstrap3中的模板标签集。接着将这个文件声明为使用英语编写的HTML文档。head部分不包含任何内容，只是将正确显示页面所需的内容告诉浏览器。

在title标签下面，我们使用了django-bootstrap3的一个自定义模板标签，它让django包含所有的boostsrap样式文件。接下来的标签启用你可能在页面中使用的所有交互式行为，如何折叠的导航栏。

2.定义导航栏

定义页面顶部的导航栏

首先是元素，其表示页面的导航链接部分。对于这个元素内的所有内容，都将根据选择器(selector)navbar、navbar-default和navbar-static-top定义的boostsrap样式规则来设置样式。选择器决定了特定样式规则将应用于页面上的哪些元素。

定义了一个按钮，在浏览器窗口变窄时、无法水平显示完整的导航栏时显示出来。如果单击他将会出现下拉列表，其中包含所有的导航元素。当用户缩小窗口时，会使导航栏折叠起来。接着我们在导航栏的最左边显示项目名，并设置了到主页的超链接。

在A处，我们定义了导航的链接。导航栏其实是一个以开头的列表，其中每个链接都是一个列表项。

在B处，我们添加了第二个导航链接列表，这里使用了选择器为navbar-right来设置一组链接的样式，使其出现在导航栏的右边——登录、注册。在这里，已登录就显示问候语和注销；未登录就显示注册和登录。

3.定义页面的主要部分

使用jumbotron设置主页的样式

下面使用新定义的header块和一个名为jumbotron的Boostsrap元素修改主页。jumbotron元素是一个大框，他通常用于在主页中呈现项目的简要描述。修改index.html

设置登录页面的样式

这里我们改进一下登录的表单，修改login.html

注意我们从这个模板删除了代码块，因为django-bootstrap3会自动管理表单错误。

模板标签用来显示表单，其将bootstrap样式规则应用于各个表单元素。接下来的是将bootstrap应用于按钮。

设置new_topic页面的样式

修改new_topic.html

设置topics页面的样式

修改topics.html

设置topic页面中条目的样式

我们将使用bootstrap面板（panel）来突出每个条目。面板是一个带预定义样式的div，适合用于显示主题的条目。修改topic.html

设置register页面的样式

修改register.html

设置new_entry页面的样式

修改new_entry.html

设置edit_topic页面的样式

修改edit_topic.html