《python编程从入门到实践》day42

Gandalf Wu

已于 2024-05-29 23:27:33 修改

阅读量467

点赞数 18

文章标签： python 开发语言

于 2024-05-29 23:27:09 首次发布

本文链接：https://blog.csdn.net/m0_37565294/article/details/139307076

版权

# 昨日知识点回顾

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

# 今日知识点学习

20.1.3 修改base.html

1.定义HTML头部

# base.html
{% load bootstrap4 %}

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,
		shrink-to-fit=no">
	<title>Learning Log</title>

	{% bootstrap_css %}
	{% bootstrap_javascript jquery='full' %}

</head>

2.定义导航栏

# base.html
---snip---
</head>
<body>

	<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border">

		<a class="navbar-brand" href="{% url 'learning_logs:index' %}">
				Learning Log</a>

		<button class="navbar-toggler" type="button" data-toggle="collapse"
				data-target="#navbarCollapse" aria-controls="navbarCollapse"
				aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span></button>
		<div class="collapse navbar-collapse" id="navbarCollapse">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item">
					<a class="nav-link" href="{% url 'learning_logs:topics'%}">
						Topics</a></li>
			</ul>
			<ul class="navbar-nav ml-auto">
				{% if user.is_authenticated %}
					<li class="nav-item">
						<span class="navbar-text">Hello, {{ user.username }}.</span>
					</li>
					<li class="nav=item">
						<a class="nav-link" href="{% url 'users:logout' %}">Log out</a>
					</li>
				{% else %}
					<li class="nav-item">
						<a class="nav-link" href="{% url 'users:register' %}">Register</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="{% url 'users:login' %}">Log in</a></li>
				{% endif %}
			</ul>
		</div>

	</nav>

3.定义页面的主要部分

# base.html
{% load bootstrap4 %}

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,
		shrink-to-fit=no">
	<title>Learning Log</title>

	{% bootstrap_css %}
	{% bootstrap_javascript jquery='full' %}

</head>
<body>

	<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border">

		<a class="navbar-brand" href="{% url 'learning_logs:index' %}">
				Learning Log</a>

		<button class="navbar-toggler" type="button" data-toggle="collapse"
				data-target="#navbarCollapse" aria-controls="navbarCollapse"
				aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span></button>
		<div class="collapse navbar-collapse" id="navbarCollapse">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item">
					<a class="nav-link" href="{% url 'learning_logs:topics'%}">
						Topics</a></li>
			</ul>
			<ul class="navbar-nav ml-auto">
				{% if user.is_authenticated %}
					<li class="nav-item">
						<span class="navbar-text">Hello, {{ user.username }}.</span>
					</li>
					<li class="nav=item">
						<a class="nav-link" href="{% url 'users:logout' %}">Log out</a>
					</li>
				{% else %}
					<li class="nav-item">
						<a class="nav-link" href="{% url 'users:register' %}">Register</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="{% url 'users:login' %}">Log in</a></li>
				{% endif %}
			</ul>
		</div>

	</nav>

	<main role="main" class="container">
		<div class="pb-2 mb-2 border-bottom">
			{% block page_header %}{% endblock page_header %}
		</div>
		<div>
			{% block content %}{% endblock content %}
		</div>
	</main>

</body>

</html>

主页效果：

20.1.4 使用jumbotron设置主页样式

# index.html
{% extends "learning_logs/base.html" %}

{% block page_header %}
	<div class="jumbotron">
		<h1 class="display-3">Track your Learning.</h1>

		<p class="lead>Make your own Learning Log, and keep a list of the
			topics you're learning about. Whenever you learn something new
			about a topic, make an entry summarizing what you've learned.</p>

		<a class="btn btn-lg btn-primary" href="{% url 'users:register' %}"
			role="button">Register &raquo:</a>
	</div>
{% endblock page_header %}

20.1.5 设置登录页面的样式

# login.html
{% extends "learning_logs/base.html" %}
{% load bootstrap4 %}

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

{% block content %}
	<form method="post" action="{% url 'users:login' %}" class="form">
		{% csrf_token %}
		{% bootstrap_form form %}
		{% buttons %}
			<button name="submit" class="btn btn-primary">Log in</button>
		{% endbuttons %}
	
		<input type="hidden" name="next"
			value="{% url 'learning_logs:index' %}" />		
	</form>

{% endblock content %}

主页效果：

20.1.6 设置显示所有主题的页面的样式

# topics.html
{% extends "learning_logs/base.html" %}

{% block page_header %}
	<h1>Topics</hi>
{% endblock page_header %}

{% block content %}

	<p>Topics</p>

	<ul>
		{% for topic in topics %}
			<li><h3>
				<a href =" {% url 'learning_logs:topic' topic.id %}">{{  topic  }}</a>
			</h3></li>
		{% empty %}
			<li><h3>No topics have been added yet.</h3></li>
		{% endfor %}
	</ul>

	<h3><a href="{% url 'learning_logs:new_topic' %}">Add a new topic</a></h3>

{% endblock content %}

20.1.7 设置单个主题的页面中的条目样式

Gandalf Wu

关注

18
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《python编程从入门到实践》day42

20.1.4 使用jumbotron设置主页样式。20.1.6 设置显示所有主题的页面的样式。使用Bootstrap设置项目“学习笔记”的样式。20.1.7 设置单个主题的页面中的条目样式。3.定义页面的主要部分。20.1.3 修改base.html。1.定义HTML头部。20.1.5 设置登录页面的样式。
复制链接

扫一扫