Django----初识视图与模板
1、使用Bootstrap（一个优秀的前端框架，是基于html,css基础上进行开发，快速，便捷，提供非常多的空间并且都是附带源码）实现静态博客页面
bootstrap中文官网：www.bootcss.com
①、页面布局设计（博客首页、文章详情页）
②、bootstrap中的栅格系统，把页面均分为十二等分
>>>>首页
代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Djanjo</title>
#这些在中文官网--起步中可以招到，直接黏贴即可
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container page-header">
<h1>文章列表
<small>by zhonghuihong </small></h1> </div>
<div class="container page-body">
<div class="col-md-9" role="main">
<div class="body-main">
<div>
<h2>文章标题1</h2>
<p>这是文章1的内容</p>
</div>
<div>
<h2>文章标题2</h2>
<p>这是文章2的内容</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>
<h4><a href="#">最新文章6</a></h4>
<h4><a href="#">最新文章7</a></h4>
</div>
</div>
</div> </body>
</html>
>>>>文章详情页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Djanjo</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container page-header">
<h1>文章标题
</h1> </div>
<div class="container page-body"> <div>
<p>这是文章1的内容</p>
</div> </div> </body>
</html>
Django----初识视图与模板的更多相关文章
- 五、Django之视图和模板-Part 3
一.概述 一个视图就是一个页面,通常提供特定的功能,使用特定的模版.列如:在一个博客应用中,你可能会看到下列视图: 博客主页:显示最新发布的一些内容 每篇博客的详细页面:博客的永久链接 基于年的博客页 ...
- Django之视图与模板以及在模板中使用bootstrap
从url中也可以传递参数给后台进行处理.比如http://127.0.0.1:8001/add/?a=4&b=5. 这个链接传入a=4,b=5.后台将进行a+b的处理 新增处理函数 def a ...
- Part 3：视图和模板--Django从入门到精通系列教程
该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...
- Django 的路由层 视图层 模板层
--------------------------------------------------------------通过苦难,走向欢乐.——贝多芬 Django-2的路由层(URLconf) ...
- Django学习---路由url,视图，模板，orm操作
Django请求周期 url -> 路由系统 ->函数或者类 -> 返回字符串 或者 模板语言 Form表单提交: 点击提交 -> 进入url系统 -> 执行函数 ...
- 【python】-- Django路由系统（网址关系映射）、视图、模板
Django路由系统(网址关系映射).视图.模板 一.路由系统(网址关系映射) 1.单一路由对应: 一个url对应一个视图函数(类) urls.py: url(r'^test', views.test ...
- 【7】Django网页视图模板处理
天下难事必作於易.天下大事必作於细.是以圣人终不为大,故能成其大 --老子<道德经> 本节内容 HTML页面的渲染 使用页面模板 异常处理 超链接路径处理 路由命名空间 1. HTML页面 ...
- Django 基础篇(二)视图与模板
视图 在django中,视图对WEB请求进行回应 视图接收reqeust对象作为第一个参数,包含了请求的信息 视图就是一个Python函数,被定义在views.py中 #coding:utf- fro ...
- Django整理(二) - 视图和模板的初步使用
Django中的视图 · Django使用视图来编写web应用的业务逻辑 · Django的视图也就是一个函数,可称为视图函数 · 视图定义在应用的view.py文件中 · 视图需要绑定一个URL地址 ...
- Django视图与模板（6）
前面记到数据库与模型(models)有联系,现在记录一下视图与模板,他们两个也有联系. 个人理解:视图就好像一个cpu,比较核心,就是用来处理问题的,又叫业务逻辑处理,他把处理完的结果插入到模板里面, ...
随机推荐
- 关于std::cin阻塞事件循环以及控制台命令输入功能的方案；
如果将std::cin建立在主线程,将阻塞主线程的所有事件循环,因而要保证事件循环不受影响,需要将std::cin放到 子线程中.同时,如果要实现能够强制终止std::cin阻塞, 可以通过强制终止线 ...
- Linux 配置代理
在我们账号的home那有一个.bashrc文件,用来设置一些开机运行的bash命令 cd ~ ls -a vi .bashrc 我们可以在这里添加代理 export http_proxy=" ...
- 分布式协调服务Zookeeper集群之ACL篇
分布式协调服务Zookeeper集群之ACL篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.zookeeper ACL相关知识概览 1>.zookeeper官方文档(h ...
- Kubernetes之调度器和调度过程
scheduler 当Scheduler通过API server 的watch接口监听到新建Pod副本的信息后,它会检查所有符合该Pod要求的Node列表,开始执行Pod调度逻辑.调度成功后将Pod绑 ...
- python小练习： 给定一个数组 按重复次数 降序排列输出 数组非空且为正整数
假设有个列表 a=[1,1,1,2,2,4,5,5,5,5] (非空且为正整数) 那么根据要求 最终输出的形式为 5,1,2,4 (按重复次数 降序排列输出) 代码实现及解释: a=[1,1,1 ...
- jQuery 条件搜索查询 实时取值 升降序排序
一.鼠标点击获取搜索条件中的被选中的值 创建方法 getAttrValue() 方法,每次的 .click 都要调用 function getAttrValue(){} 例如,把选中的值给到属性 ...
- 非阻塞读和写：str_cli函数
void str_cli(FILE *fp, int sockfd) { int maxfdp1, val, stdineof; ssize_t n, nwritten; fd_set rset, w ...
- java基于redis事务的秒杀实现
package com.vian.user.service; import org.junit.Test; import org.springframework.util.CollectionUtil ...
- Arduino常用的数据类型以及转换
常用的数据类型有布尔类型.字符型.字节型.整型.无符号整型.长整型.无符号长整型.浮点型.双精度浮点型等 布尔类型bollean: 布尔值是一种逻辑值,其结果只能为真(true)或者假(false). ...
- Mac终端命令自动补全
在这里我们首先说一下mac终端执行命令的时候,不会像在windows系统中安装的linux一样支持自动补全,需要自己去调试 步骤如下: (1)打开终端输入nano .inputrc(这里一定要注意na ...