目录
一、下载
（一）中文官网
（二）bootstrap v3 依赖 jQuery 插件
二、解压并安装
（一）解压
1. 压缩包解压
2. 简化文件
（二）安装
三、配置
（一）base.html中放置文件
（二）放置顺序
四、应用：三秒消息弹框
（一）参考资源
（二）设定
1. base.html 内容
2. test.html 内容
3. js 内容
4. base.css 内容
以下内容均以 bootstrap v3 为例
一、下载
（一）中文官网
https://www.bootcss.com/
（二）bootstrap v3 依赖 jQuery 插件
若 bootstrap 版本是 v3，则依赖 jQuery 插件，需要下载 jquery-3.1.1.min.js 文件。
若 bootstrap 版本是 v4, v5，则不依赖 jQuery 插件。
二、解压并安装
（一）解压
1. 压缩包解压
2. 简化文件
若只要求实现 boostrap 的基础功能，则选取以下文件即可：
bootstrap.css、bootstrap.min.css、bootstrap.js、bootstrap.min.js
（二）安装
解压后的 css、js 文件分别放置在项目 static 的 css、js 文件夹中。
三、配置
（一）base.html中放置文件
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}"/>
<script type="text/javascript" src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/dataTables.bootstrap.min.js' %}"></script>
</head>（二）放置顺序
jquery-3.1.1.min.js 需要放在 bootstrap.min.js 的前面。
四、应用：三秒消息弹框
（一）参考资源
消息弹窗设定：https://getbootstrap.com/docs/4.0/components/alerts/
图标获取： https://icons.bootcss.com/
（二）设定
1. base.html 内容
<body id="body">
. . .
<div>{% block content %} {% endblock %}</div>
<div id="msg_box" class="msg_box"></div> <!-- 消息弹窗 -->
</body>2. test.html 内容
{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% block content %}
<div id="main">
<h1>测试弹窗的界面<h1>
<button id="btn_alert">点击测试</button>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#btn_alert').click(function () {
sys_alert('warning', 'bi bi-exclamation-circle', '展示警告的消息弹窗');//信息弹窗提示
})
});
</script>
{% endblock %}3. js 内容
// 自动关闭弹窗
function close_div(idx, show_time) {
setTimeout(function () {
$('.alert_item_' + idx).remove();
}, show_time * 1000); // 2秒
}
// 弹窗功能，其中，alert_idx 当前弹窗下标； alert_type 弹窗类型（boostrap有success、warning等），alert_icon 弹窗类型图标（在bootstrap icons图标库中查找），alert_msg 提示信息
var alert_idx = 0;
function sys_alert(alert_type, alert_icon, alert_msg) {
// 组装单个弹窗
let str = `<div class="item_css alert_item_` + alert_idx + `">
<div class="alert_cont alert-` + alert_type + ` alert-dismissible">
<div class="cont_center">
<h4><i class="` + alert_icon + `"></i> ` + alert_msg + `</h4>
<button type="button" class="close alert_off " close_item="` + alert_idx + `">
<i class="bi bi-x"></i>
</button>
</div>
</div>
</div>`;
// 将所有弹窗放进base.html中规定的总大盒子里
$('#msg_box').append(str);
// 动态显示消息弹窗
$('.alert_item_' + alert_idx).slideDown(200, 'linear', function () {
$(this).delay(2 * 1000).slideUp(200, 'linear'); // 2秒
close_div(alert_idx, 2); // 2秒后自动关闭
});
// 关闭消息弹窗
$(".alert_off").off().on('click', function () {
close_div($(this).attr('close_item'), 0); // 马上关闭
})
alert_idx++;
}4. base.css 内容
/* 装多个弹窗的大盒子 的显示范围 */
.msg_box {
position: absolute;
top: 0;
width: 100%;
display: block;
text-align: center;
}
/* 单个弹窗的 对外布局 */
.msg_box .item_css{
display: none;
margin: 10px 0 0 0;
}
/* 单个弹窗的 内容布局-适应文字长度 */
.item_css>.alert_cont{
display: inline-block;
overflow: hidden;
padding: 5px;
opacity: .9; /* 完全透明是 0 */
}
/* 单个弹窗的 内容布局-设置内容水平垂直居中 */
.item_css .cont_center{
display: flex;
align-items: center; /* 垂直居中 */
justify-content: space-between;
}
/* 单个弹窗的 关闭按钮位置 */
.item_css .alert-dismissible .close{
padding: 0 0 0 10px !important;
position: inherit;
}
