django学习入门系列之第四点《案例 博客案例》

最新推荐文章于 2024-10-02 06:15:56 发布
最新推荐文章于 2024-10-02 06:15:56 发布
阅读量1k 收藏 9
点赞数 5
分类专栏： django 文章标签： django 学习 python 经验分享 笔记 前端框架 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62548908/article/details/140189183
版权

文章目录

container

  • 堆叠到两边
<div class="container-fluid  clearfix">
    <div class="col-sm-9">1</div>
    <div class="col-sm-3">2</div>
</div>
  • 放在中间
<div class="container  clearfix">
    <div class="col-sm-9">1</div>
    <div class="col-sm-3">2</div>
</div>

面板

案例 博客案例

此案例需要BootStrap中的

  • 媒体对象
  • 面板
  • 分页
  • 栅格系统

最终效果图：
在这里插入图片描述

  • 栅格系统

最终效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发版本  -->
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">

    <!-- 生产版本（压缩版）   -->
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css">

</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">目录导航</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">城市 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">区域</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">下载 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>


<div class="container-fluid clearfix">
    <div class="col-sm-9">
        <div class="media">
      <div class="media-left">
        <a href="#">
          <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 64px; height: 64px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODgyYzc1MDk5OCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4ODJjNzUwOTk4Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNDEzOTc0NzYxOTYyODkiIHk9IjM2LjM1NjU4ODM2MzY0NzQ2Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
    </div>
    <div class="col-sm-3">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">最新推荐</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
</div>

<div>
    <nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
</div>


</body>
</html>

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】
11.【CSS基础样式介绍2】
12.【CSS基础样式介绍3】
13.【CSS基础样式介绍3】
14.【案例 小米商城头标】
15.【案例 小米商城头标总结】
16.【案例 小米商城二级菜单】
17.【案例 商品推荐部分】
18.【伪类简单了解】
19.【position】
20.【案例 小米商城中app图标代码】
21.【边框及总结】
22.【BootSrap初了解】
23.【BootSrap的目录栏】
24.【BootSrap的栅格系统】

铁匠匠匠
关注
专栏目录
django学习入门系列之第四点《案例 登录》
铁匠匠匠的博客
07-06 1371
(img-KWx34OSG-1720206079524)]先准备一个框，作为登录界面的容器。将里面输入登录样式内容（表单）
django学习入门系列之第四点《案例 动态数据》
铁匠匠匠的博客
07-25 826
/添加到id=city那个标签的里面。// 发送网络请求，获取数据（假设）//创建<li></li>//在li标签中写入内容。
django学习入门系列之第四点《案例 后台管理样例》
铁匠匠匠的博客
07-16 1281
文章目录往期回顾 前期准备： 导航 新建，按钮 表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 开发版本 --> <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist
django学习入门系列之第十点《案例 用户管理》
铁匠匠匠的博客
09-06 1230
因为在做http请求的时候，如果浏览器检测到你的地址完全没变，会从缓存里读取先前请求过的数据，不再发送请求。有些时候是页面资源的加载，有些时候是API的get请求，都有可能。加上这个，会让浏览器认为这是一个新的地址，从而保证重新获取资源。
django学习入门系列之第九点《案例：员工管理》
铁匠匠匠的博客
08-21 809
用python操作MySQL并发送指令。使用MySQL内置工具（命令）最终在数据库中返回的结果。
django学习入门系列之第十点《案例 用户登录》
铁匠匠匠的博客
08-30 829
​ 如果提交数据后，发现并没有跳转到自己想要的界面，是因为django比Flask多一层 ”安全机制“ 的东西。在他返回信息时后他会自带的。
django学习入门系列之第三点《案例 商品推荐部分》
铁匠匠匠的博客
06-27 1709
文章目录划分区域搭建骨架完整代码小结往期回顾 划分区域 搭建骨架 /*商品图片，父级设置*/ .slider .sd-img{ display: block; width: 1226px; height: 460px; } <!-- 商品推荐部分 --> <!--搭建出一个骨架--> <div class="slider"> <div class="container"> <
django学习入门系列之第五点《案例 动态表格》
铁匠匠匠的博客
07-27 1064
/很多时候，这些数据都是通过网页请求获取的。
django学习入门系列之第七点《案例 添加页面》
铁匠匠匠的博客
08-14 1452
【代码】django学习入门系列之第七点《案例 添加页面》
django从入门到深入WEB教程
03-20
第四章 Django的模板系统 第五章 和数据库打交道：数据建模 第六章 Django的管理界面 第七章 表单处理 第八章 高级视图和URL配置 第九章 通用视图 第十章 解读模板处理引擎 第十一章 输出非HTML的内容 第十二章 会话...
Django案例：图书管理系统
qq_61660527的博客
06-14 428
Django简单图书管理系统案列
Django项目案例之GitHub用户接口展示
2020-10-28
10-23 818
Django 项目mysite 在Terminal终端中运行命令python manage.py migrate (base) D:\PyCharm WorkSpace\mysite>python manage.py migrate Operations to perform: Apply all migrations: admin, auth, contenttypes, sessions Running migrations: Applying contenttypes.0001_ini
Django入门到实战
NiuXL的编程技术网络日志
07-10 4223
1. 初识web框架2. 初识django3. django程序目录4. 第一个django请求5. 静态文件以及模板的配置6. 创建程序步骤7. 用户登录示例8. request.GET与 request.POST9. django模板语言特殊标记(重点)10. 学生信息管理系统11. 初识cookie12. 基于cookie的登录验证13. django操作cookie14. 设置cookie的签名15. 三大web框架的区别与联系16. Django非主流操作到主流操作17. Djang
Django对接支付宝沙箱环境(2024年9月新测有效）
weixin_43631940的博客
09-29 687
django对接支付宝（沙箱环境），包括注册沙箱环境，安装支付宝SDK，使用SDK生成支付链接，同步验签，异步验签
Django Nginx+uwsgi 安装配置
最新发布
lly202406的博客
10-02 470
本文将详细介绍如何在Linux环境下安装和配置Django应用程序，使用Nginx作为Web服务器和uwsgi作为应用程序服务器。
计算机毕业设计 基于Python的摄影平台交流系统的设计与实现 Python+Django+Vue 前后端分离 附源码 讲解 文档
weixin_19164791635
10-01 1856
本文介绍了一款基于Python的摄影平台交流系统，该系统利用Python进行数据爬虫的处理和可视化展现两个部分。系统为管理员和用户提供了包括用户信息管理、摄影作品管理、摄影圈管理和系统管理等在内的功能模块，旨在促进摄影文化的传播，为摄影产业的数字化转型提供支持。
[含文档+PPT+源码等]精品大数据项目-基于Django实现的高校图书馆智能推送系统的设计与实现
weixin_41915110的博客
09-30 666
大数据项目——基于Django实现的高校图书馆智能推送系统的设计与实现背景，可以从以下几个方面进行详细阐述： 一、信息技术的发展背景 随着信息技术的飞速发展和互联网的广泛普及，大数据已经成为现代社会的重要资源。在大数据背景下，如何从海量数据中提取有价值的信息，并为用户提供个性化的服务，成为了当前信息技术领域的研究热点。Django作为一款高级的Python Web框架，以其高效、简洁和可扩展性等特点，在大数据项目开发中得到了广泛应用。 二、高校图书馆的管理需求 高校图书馆作为学术研究和知识传播的重要场所
Django 配置邮箱服务，实现发送信息到指定邮箱
qq_39962271的博客
09-27 689
Django 配置邮箱服务，实现发送信息到指定邮箱
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值