Django学习6-Bootstrap样式：导航栏、表单、card

最新推荐文章于 2024-06-12 14:29:42 发布

笑揖峰头月一轮

最新推荐文章于 2024-06-12 14:29:42 发布

阅读量1w

点赞数 3

分类专栏：学习笔记文章标签： Django Python Bootstrap

本文链接：https://blog.csdn.net/qq_19268039/article/details/83272949

版权

使用Bootstrap样式

Bootstrap
- Bootstrap的安装
- Bootstrap在Django中的使用
使用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元/天解锁文章

笑揖峰头月一轮

关注

3
点赞
踩
47

收藏

觉得还不错? 一键收藏
2
评论
Django学习6-Bootstrap样式：导航栏、表单、card

Bootstrap的安装pip install django-bootstrap4安装完成。可以在venv下的lib看到bootstrap4：然后在setting.py中添加bootstrap应用：INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.con...
复制链接

扫一扫