django笔记（六）bootstrap添加样式

setting文件添加
installapp:'bootstrap4',

{% load bootstrap4 %}

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

就可以使用bootstrap的样式了，不过这样会去网上下载加载样式，导致网页展示会比较慢

因此可以先下载bootstarp，将文件解压到static文件夹

模板文件base.html修改
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/static/bootstrap/js/bootstrap.min.js"></script>

然后就可以直接使用bootstrap的样式了

如

<button type="submit" class="btn btn-primary">搜索</button>

登录

<form method="post" action="{% url 'users:login' %}">

{% csrf_token %}

<!--{{ form.as_p }}-->

<div class="mb-3">

<label for="formGroupExampleInput" class="form-label">用户名</label>

<input type="text" class="form-control" id="formGroupExampleInput" name="username" placeholder="Example input placeholder">

</div>

<div class="mb-3">

<label for="formGroupExampleInput2" class="form-label">密码</label>

<input type="password" class="form-control" id="formGroupExampleInput2" name="password" placeholder="Another input placeholder">

</div>

<button name="submit" class="btn btn-primary">Log in</button>

<input type="hidden" name="next" value="{% url 'myapp:index' %}" />

<input type="hidden" name="next" value={{next}} />

</form>

image.png image.png

现在最新版本是5了，用了几天，
使用下拉菜单时，官网说是要用到poper.min.js,bootstrap.bundle.min.js/bootstrap.bundle.js，其中包含了Popper.js，但是就是出来不了效果，最后还是决定先用bootstrap4了
需要分别下载jquery.min.js以及poper.min.js,网上很好找，或者找到url引用的，访问url直接另存为js文件就行
而且引用时，也是有顺序，jquery>poper.js>bootstrp.js

 <script src="/static/bootstra43/js/jquery.min.js"></script>
      <link href="/static/bootstra43/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/bootstra43/js/popper.min.js"></script>

     <script src="/static/bootstra43/js/bootstrap.min.js"></script>

可以参考https://www.orchome.com/9406，查看更多bootstrap5的内容