srcminiBootstrap是一个框架, 用于在Web应用程序中创建用户界面。它提供css, js和其他工具来帮助创建所需的界面。
在Django中, 我们可以使用引导程序来创建更多用户友好的应用程序。
要实现引导, 我们需要遵循以下步骤。
1.下载引导程序
访问官方网站https://getbootstrap.com以在本地计算机上下载引导程序。这是一个zip文件, 将其解压缩并看到它包含两个文件夹。
2.创建目录
在创建的应用程序内创建一个名称为static的目录, 并将css和jss文件夹放入其中。这些文件夹包含许多文件, 请参见屏幕截图。
3.创建一个模板
首先在应用程序内部创建一个模板文件夹, 然后创建一个index.htm文件以实现（链接）引导css和js文件。
4.加载Boostrap
将引导文件加载到静态文件夹中。使用以下代码。
{% load staticfiles %}并通过提供文件位置（源）链接文件。请参阅index.html文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load staticfiles %}
<link href="{% static 'css/bootstrap.min.css' %}" >
<script src="{% static 'bootstrap.min.js' %}"></script>
<script>alert();</script>
</head>
<body>
</body>
</html>在此模板中, 我们链接两个文件, 一个是bootstrap.min.css, 另一个是bootstrap.min.js。让我们看看如何在应用程序中使用它们。
假设, 如果我们不使用引导程序, 则我们的html登录看起来像这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
</head>
<body>
<form action="/save" method="post">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
</html>输出：
加载引导文件之后。我们的代码如下所示：
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
{% load staticfiles %}
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body>
<form action="/save" method="post">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
</html>输出：
现在, 我们的登录表单好多了。这是引导的优势。
最后, 项目结构看起来像这样。
评论前必须登录！
注册