六、七天入门Django开发 - 使用Bootstrap实现博客页面渲染

前言

Bootstrap 是很受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

官网地址：
https://v3.bootcss.com/


Bootstrap 有很多常用的框架，直接拿过来，稍微做一下修改就可以用了。
HTML CSS 以及 JS 这些基础内容后面再做统一学习，再慢慢优化页面。



使用 Bootsrap 实现博客静态页面

在myblogs 项目下新建模板文件夹 templates

  • index.html --- 博客页面
  • detail.html --- 博客详情页面



index.html --- 博客页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Django Web框架</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

</head>
<body>
<div class="container page-header">
    <h1>入门Django Web框架
        <small>--- by wwh</small>

    </h1>

</div>>
<div class="container page-body">
    <div class="col-md-9" role="main">
        <div class="body-main">
            <div>
                <h2>文章标题1</h2>
                <p>
                    二分查找又称折半查找，优点是比较次数少，查找速度快，平均性能好。

                    其缺点是要求待查表为有序表,折半查找方法适用于不经常变动而查找频繁的有序列表。

                    二分查找在我们生活中也经常出现，比如猜数游戏,最快的方法就是：先说中间的数字，直接把答案范围缩短一半。
                </p>
            </div>

            <div>
                <h2>文章标题2</h2>
                <p>
                    二分查找又称折半查找，优点是比较次数少，查找速度快，平均性能好。

                    其缺点是要求待查表为有序表,折半查找方法适用于不经常变动而查找频繁的有序列表。

                    二分查找在我们生活中也经常出现，比如猜数游戏,最快的方法就是：先说中间的数字，直接把答案范围缩短一半。
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-3" role="complementary">
        <div>
            <h2>最新文章</h2>
            <h4><a href="#">最新文章1</a></h4>
            <h4><a href="#">最新文章2</a></h4>
            <h4><a href="#">最新文章3</a></h4>
            <h4><a href="#">最新文章4</a></h4>
            <h4><a href="#">最新文章5</a></h4>
        </div>
    </div>
</div>
</body>
</html>

使用谷歌浏览器打开



detail.html --- 博客详情页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Django Web框架</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

</head>
<body>
<div class="container page-header">
    <h1>文章标题

    </h1>

</div>>
<div class="container body-main">
            <div>
                <p>
                    二分查找又称折半查找，优点是比较次数少，查找速度快，平均性能好。

                    其缺点是要求待查表为有序表,折半查找方法适用于不经常变动而查找频繁的有序列表。

                    二分查找在我们生活中也经常出现，比如猜数游戏,最快的方法就是：先说中间的数字，直接把答案范围缩短一半。
                </p>
            </div>
</div>
</body>
</html>

页面打开效果

posted @ 2021-12-11 11:30  西瓜_皮  阅读(500)  评论(0)  编辑  收藏  举报