本文详细介绍了如何在Django项目中集成和使用Bootstrap，包括Bootstrap的安装、在Django中的应用，以及如何设置导航栏、表单样式和Bootstrap卡片（card）设计。通过实例展示了如何利用Bootstrap实现响应式布局，如在登录界面、new_topic页面和topic页面中应用Bootstrap样式，提升项目视觉效果。
使用Bootstrap样式
Bootstrap
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它有以下几个优点：
- 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
- 浏览器支持：所有的主流浏览器都支持 Bootstrap。
- 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
- 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
Bootstrap的安装
pip install django-bootstrap4安装完成。可以在venv下的lib看到bootstrap4：
然后在setting.py中添加bootstrap应用：
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
# 创建的应用
'learning_logs',
'users',
'bootstrap4',
]
Bootstrap在Django中的使用
Bootstrap安装后在，模板html文件中导入bootstrap4包，然后在HTML标签前加bootstrap_*前缀，例如在 login.html 中使用Bootstrap样式的表单
{% load bootstrap4 %}
{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}
...
<form class="form" action="{% url 'users:login' %} " method="post">
{% csrf_token %}
{% bootstrap_form form %}
<input type="submit" value="Login"/>
<a href="{% url 'users:register' %}">register</a>
<input type="hidden" name='next' value="{% url 'learning_logs:index' %}"/>
</form>
使用Bootstrap创建的登录表单：
使用Bootstrap设置项目样式
在Bootstrap的官网上可以找到各种模板，包括框架、相簿、表单和导航等例子。
修改base基模板
{% load bootstrap4 %}
{% load static %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="{% static 'img/dj.ico' %}">
<title>{% block title %}My amazing site{% endblock %}</title>
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
</head>
<body>
...
{% load bootstrap4 %}加载了django-bootstrap4中的模板标签集，{% bootstrap_css %}和{% bootstrap_javascript jquery='full' %}是其自定义的模板标签，它让Django包含所有的Bootstrap样式文件。接着使用一对<nav></nav>标签，创建导航栏。
添加导航栏
导航栏在应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。根据官方提供的导航栏例子，创建一个带有下拉列表和提供搜索的表单的导航栏。导航栏需要使用.navbar包装，使用.navbar-expand-{-sm|-md|-lg|-xl}来决定响应式折叠设计。
导航栏支持添加的内容：
navbar-brand：可以用来显示项目、产品等一些名称；.navbar-nav：提供轻量级的导航栏；.navbar-toggler：提供可折叠的插件；.form-inline：在导航栏提供内置的表单；.navbar-text： 添加垂直居住的文本；.collapse.navbar-collapse：对导航栏内容进行分组和隐藏；
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Blog</a>
<button class="
最低0.47元/天 解锁文章
扫一扫
4935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
