Django学习笔记(bootstrap的运用)-04

Django学习笔记(bootstrap的运用)-04

一、在html中加载所需要的bootstrap文件(css、js)
1、加载css文件
2、加载js文件
二、django在html中常用的占位符语法
1、变量占位符、注释占位符 :变量占位符用于在 HTML 模板中显示视图函数传递过来的变量值。注释占位符用于在模板中添加注释,这些注释不会在渲染后的 HTML 页面中显示,仅用于模板开发者对代码进行说明和解释。
html 复制代码
<!--变量占位符-->
{{ variable }}
<!--注释占位符-->
{# 这是注释内容 #}
2、子模板继承父模板:可以减少模板中的重复代码,提高代码的复用性和可维护性。通过继承父模板,可以将页面的通用结构(如头部、尾部、导航栏等)放在父模板中,子模板只需要专注于不同页面的独特部分。
html 复制代码
{% extends "xxx.html" %}
3、自定义模板 :可以根据项目的需求,自定义模板标签
html 复制代码
{% block title %}
    Custom Title
{% endblock %}

{% block content %}
    <p>This is custom content.</p>
{% endblock %}
4、模板加载静态文件 :用于在模板中引用静态文件,如 CSS 文件、JavaScript 文件、图片等,使静态文件的路径处理更加方便和灵活。
html 复制代码
{% load static %}
<img src="{% static 'images/logo.png' %}" alt="Logo">
5、if、for、with语句:用于在模板中执行一些逻辑操作或引入其他功能
html 复制代码
<!--if判断语句-->
{% if condition %}
    <p>条件为真时显示</p>
{% else %}
    <p>条件为假时显示</p>
{% endif %}
html 复制代码
<!--for循环语句-->
<ul>
    {% for item in item_list %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>
html 复制代码
<!--with语句-->
{% with new_variable=old_variable %}
    {{ new_variable }}
{% endwith %}
6、{% csrf_token %}: 是 Django 中保障表单提交安全的重要机制,有助于防止 CSRF 攻击,提高 Web 应用的安全性。
html 复制代码
<form method="post">
    {% csrf_token %}
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
</form>
7、还有很多其它占位符语法,需要运用时网上查找即可。
三、bootstrap更多样式布局可查看官方文档:bootstrap官方文档
四、学习总结
1、在html文件中引用bootstrap样式、布局等。
2、django在html中常用的占位符的运用。
3、根据自己项目的需求,灵活运用bootstrap、django占位符可以提高项目开发效率。
相关推荐
青山是哪个青山42 分钟前
LangChain 学习笔记(四):Message 与提示词模板
笔记·学习·langchain
小白勇闯网安圈1 小时前
Django 响应对象、文件上传与类视图
数据库·django·sqlite
hsjiasb2 小时前
FreeRTOS学习(二十六)——动态内存管理heap_1到heap_5
stm32·单片机·学习·学习笔记·freertos
崇子嵘2 小时前
基于zynqMP15eg的linux驱动学习
学习
知识分享小能手4 小时前
线性代数学习教程,从入门到精通,向量组的线性相关性 — 完整知识点梳理(7)
学习·线性代数·机器学习
Shell运维手记4 小时前
Linux 常用基础命令学习笔记
linux·运维·笔记·学习·算法·github
FakeOccupational5 小时前
【电路笔记 STM32】Cortex-M7 内核上的数据缓存(D-Cache)结构+MPU+DMA&Cache+STM32CubeMX配置
笔记·stm32·缓存
动词ing5 小时前
【学习笔记】C语言(数组指针与指针数组+字符数组+函数+参数传递+字符串作为形参+递归函数+指针函数+回调函数+结构体嵌套+内存动态分配函数)
c语言·笔记·学习
z落落7 小时前
C# Modbus-ASCII 超详细完整笔记(协议原理+LRC算法+读写源码全拆解)
笔记
小O的算法实验室7 小时前
IEEE TII,学习为多目标深度学习生成偏好
人工智能·深度学习·学习