Pycharm上Django的使用 Day13

时间 2019-11-11

标签 pycharm django 使用 day13 day 栏目 Python 繁體版

原文原文链接

设置应用程序的样式html

为设置样式，咱们将使用Bootstrap库web

1.应用程序django-bootstrap3django

1>安装django-bootstrap3bootstrap

在活动的虚拟环境中执行命令:pip install django-bootstrap3 来进行安装浏览器

2>在settings.py的INSTALLED_APPS中添加以下代码，在项目中包含应用程序django-bootstrap3app

3>让django-bootstrap3包含jQuery，这是一个JavaScript库，让你可以使用Bootstrap模板提供的一些交互式元素网站

2.使用Bootstrap来设置项目web_app的样式，并修改base.html3d

1>定义HTML头部orm

删除base.html的所有代码，并从新编写htm

1处加载了django-bootstrap3中的模板标签集

接下来，咱们将这个文件声明为使用英语(3处)编写的HTML文件(2处)

HTML文件分为两个主要部分:头部(head)和主体(body)；在这个文件中，头部始于4处。HTML文件的头部不包含任何内容:它只是将正确显示页面所需的信息告诉浏览器

5处表示咱们定义的一个标题栏

6处咱们使用了django-bootstrap3的一个自定义模板标签，它让Django包含全部的Bootstrap样式文件，接下来的标签启用你可能在页面中使用的全部交互式行为，如可折叠的导航栏

7处为结束标签</head>

2>定义导航栏

第一个元素为起始标签<body>。HTML文件的主体包含用户将在页面上看到的内容。

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

2处定义了一个按钮，它将在浏览器窗口太窄、没法水平显示整个导航栏时显示出来。若是用户单击这个按钮，将出现一个下拉列表，其中包含全部的导航元素。在用户缩小浏览器窗口或在屏幕较小的移动设备上显示网站时，collapse会使导航栏折叠起来

在3处，在导航栏的最左边显示项目名，并将其设置为到主页的连接，由于它将出如今这个项目的每一个页面中

在4处，定义了一组让用户可以在网站中导航的连接。导航栏其实就是一个以<ul>打头的列表(5处)，其中每一个连接都是一个列表项(<li>)

在7处，添加了第二个导航连接列表，这里使用的选择器为navbar-right。选择器navbar-right设置一组连接的样式，使其出如今导航栏右边--登陆连接和注册连接一般出如今这里

8处表示结束包含导航栏的元素

3>定义页面的主要部分

1处是一个<div>起始标签，其class属性为container。

div是网页的一部分，可用于任何目的，并可经过边框、元素周围的空间、内容和边框之间的间距、背景色和其余样式规则来设置其样式。

这个div是一个容器，其中包含两个元素：一个新增的名为header的块(2处)，以及content块(3处)

其class属性值page-header将一系列样式应用于这个块，content块是一个独立的div，未使用class属性指定样式

3.设置主页样式

1处告诉Django，咱们要定义header块包含的内容。

在一个jumbotron元素中(2处)，放置了一条简短的标语，让首次访问者大体知道这个app是干什么用的

3处，添加了一些文本，作了更详细的说明

4.设置登陆页面样式

1处表示在这个模板中加载了bootstrap3模板标签

2处定义了header块，描述了这个页面是作什么用的，咱们从以前模板中删除了{% if forms.errors %}，觉得django-bootstrap3会自动管理表单错误

3处添加了属性class = "form"，并在4处使用模板标签{% bootstrap_form %}来显示表单，这个标签替换了咱们以前使用的标签{{ form.as_p }}

模板标签{% bootstrap_form %}将Bootstrap样式规则应用于各个表单元素

5处将Bootstrap样式应用于按钮

5.运行manage.py

能够看到主页和登陆界面都发生了变化

调整至小窗口后，导航栏将变成一个按钮