Django初学者笔记系列（九）：设置项目的样式

最新推荐文章于 2024-03-08 00:04:01 发布

何变量

最新推荐文章于 2024-03-08 00:04:01 发布

阅读量291

点赞数 1

文章标签： django python

本文链接：https://blog.csdn.net/qq_39453977/article/details/103243206

版权

本文介绍了如何在Django项目中使用django-bootstrap3应用集成Bootstrap，通过设置INSTALLED_APPS和包含jQuery，简化样式设置。遵循步骤，可以使用Bootstrap的Static top navbar模板改造base.html，包括定义HTML头部、创建导航栏和主要内容区域，实现响应式布局。

摘要由CSDN通过智能技术生成

应用程序django-bootstrap3

我们将使用django-bootstrap3来将Bootstrap继承到项目中。这个应用程序下载必要的Bootstrap文件，将它们放到项目的合适位置，让你能够在项目的模板中使用样式设置指令。

为安装django-bootstrap3，在活动的虚拟环境中执行如下命令：

pip3 install django-bootstrap3

接下来，需要在settings.py的INSTALLED_APPS 中添加如下代码，在项目中包含应用程序django-boostrap3：

--snip--
INSTALLED_APPS = (
	--snip--
	'django.contrib.staticfiles',
	# 第三方应用程序
	'bootstrap3',
	# 我的应用程序
	'learning_logs',
	'users',
)
--snip--

我们需要让django-bootstrap3包含jQuery，这是一个JavaScript库，让你能够使用Bootstrap模板提供的一些交互式元素。请在settings.py的末尾添加如下代码：

# 我的设置
LOGIN_URL = '/users/login/'
# django-bootstrap3的设置
BOOTSTRAP3 = {
   
	'include_jquery': True,
}

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

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

要查看Bootstrap提供的模板，可访问http://getbootstrap.com/，单击Getting Started，再向下滚动到Examples部分，并找到Navbars in action。我们将使用模板Static top navbar，它提供了简单的顶部导航条、页面标题和用于放置页面内容的容器。