Django学习教程（十二）使用Bootstrap搭建静态博客页面

前言
1.Bootstrap介绍
2.引入Bootstrap
3.创建静态页面
4.页面结构说明
5.总结

前言

上一篇我们学习了怎样把博客文章数据返回到页面中，但是使用的是字符串拼接的方式，页面效果比较简单。

这一篇我们先使用Bootstrap搭建一个静态博客页面，后面再结合Django模板系统，把数据库中的文章数据渲染到页面中。

1.Bootstrap介绍

Bootstrap是一个前端框架，可以帮助我们快速搭建页面。

它提供了很多现成的样式，比如按钮、导航栏、卡片、分页等。

对于后端开发来说，使用Bootstrap可以快速做出一个简单美观的页面。

2.引入Bootstrap

可以通过CDN方式引入Bootstrap。

代码：

复制代码

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

3.创建静态页面

先准备一个简单的博客列表页面。

代码：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Django博客</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
    <h2 class="mb-4">Django博客</h2>

    <div class="card mb-3">
        <div class="card-body">
            <h5 class="card-title">第一篇博客文章</h5>
            <p class="card-text">这是第一篇博客文章的内容。</p>
            <a href="#" class="btn btn-primary">查看详情</a>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-body">
            <h5 class="card-title">第二篇博客文章</h5>
            <p class="card-text">这是第二篇博客文章的内容。</p>
            <a href="#" class="btn btn-primary">查看详情</a>
        </div>
    </div>
</div>
</body>
</html>

4.页面结构说明

这个页面主要分为几部分：

container容器
标题
card文章卡片
查看详情按钮

每一篇文章都可以使用一个card来展示。

5.总结

这一篇我们使用Bootstrap搭建了一个简单的静态博客列表页面。现在页面中的文章是写死的，还没有从数据库中查询。

下一篇我们会学习Django模板系统，把这个静态页面放到Django项目中使用。如果对你有帮助，点赞加关注，下篇见。