潭州课堂25班:Ph201805201 tornado 项目 第七课 界面美化和静态文件处理(课堂笔记)
tornado 相关说明
可以在 bootCDN 这里找 jquery ,poppe.js 文件
美化项目
twittel 的开源项目,
在 static 目录下,创建两个文件夹 ,css, js
把下载好的文件解包,放入:
bootstrap.css
bootstrap.js
jquery.js 连接:https://cdn.bootcss.com/jquery/3.3.1/core.js
poppe.js 连接:https://cdn.bootcss.com/popper.js/1.14.7/umd/popper-utils.js
预先配置 -- HTML 模板
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Width=device-width => 表示页面宽度是设备屏幕的宽度;确保网页能被不同屏幕分辨率的设备正确呈现;
user-scalable=no => 是否可以调整缩放比例(yes/no);
initial-scale=1.0 => 表示初始的缩放比例 ,以 1:1 的比例呈现,不会有任何的缩放;minimum-scale=0.5:最小允许的缩放比例;
maximum-scale=2.0:最大允许的缩放比例;
如果maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。 这样设置后,图片或元素也设置style=”width:100%”,那么图片看起来也是全屏的了。
示例代码 -- 引入文件
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<!-- jQuery文件 -->
<script src="/scripts/jquery.min.js"></script>
<!-- Popper文件 -->
<script src="/scripts/popper.min.js"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="/scripts/bootstrap.min.js"></script>
示例代码 -- 栅格布局
<div class="container">
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-8 col-sm-6 col-lg-4"></div>
</div>
</div>
处理静态文件
模板配置 extra block
CDN 加速
相关资源
Bootswatch - 免费的 Bootstrap 主题包
BootCDN 开源项目免费 CDN 服务
作业
潭州课堂25班:Ph201805201 tornado 项目 第七课 界面美化和静态文件处理(课堂笔记)的更多相关文章
- 潭州课堂25班:Ph201805201 tornado 项目 第五课 增加用户系统-用户中心(课堂笔记)
tornado 相关说明 在 users 表中创建记录,做测试 在项目根目录下创建 test.py # -*- coding: utf-8 -*- # 斌彬电脑 # @Time : 2019/2/27 ...
- 潭州课堂25班:Ph201805201 tornado 项目 第八课 增加喜欢功能(课堂笔记)
tornado 相关说明 新增一个页面,用来做图片收藏, 还要在 account.py 创建一个数据库表,记录用户喜欢的图片,哪些图片用户疯狂传奇 cd 到 项目目录下,执行数据库更新 alembic ...
- 潭州课堂25班:Ph201805201 tornado 项目 第四课 增加用户注册登录(课堂笔记)
tornado 相关说明 在 handlers 中创建个 auth.py 用来做用户登录,在这文件中创建个类,并逐步完善 在 tornado 中创建 login.html 文件,是个登录页面 {% e ...
- 潭州课堂25班:Ph201805201 tornado 项目 第十一课 项目改进和优化(课堂笔记)
使用 Bootstrap 前端框架 可以在 bootCDN 这里找 jquery ,poppe.js 文件 当聊天室发来一第图片链接时,自动保存图片到服务器,并保存相关信息到数据库,系统向该用户发出 ...
- 潭州课堂25班:Ph201805201 tornado 项目 第十课 深入应用异步和协程(课堂笔记)
tornado 相关说明 需求: 增加 /save 的 handler,实现异步保存指定 URL 图片的功能 从网页上得到一张图片地址,由这个地址将图片保存到服务器,并将相关数据保存到数据库 impo ...
- 潭州课堂25班:Ph201805201 tornado 项目 第六课 用户和图片分享的集成(课堂笔记)
tornado 相关说明 改善图片上传功能 ,生成唯一的 ID ,与路径拼接,生成 URL, 这里引用 uuid 的 python 库 在 photo.py 中创建个类,用来 辅助用户上传的图片,生 ...
- 潭州课堂25班:Ph201805201 tornado 项目 第三课 项目 图片上传,展示 (课堂笔记)
tornado 相关说明 f增加图片上传功能, 在 main.py ,文件中创建个 UploadHandler 类,用来处理图片上传 上传图片之前,要先渲染这个页面,所以定个 get 方法,把这个页 ...
- 潭州课堂25班:Ph201805201 django 项目 第二十一课 文章主页 新闻列表页面功能 (课堂笔记)
新闻列表页功能 1.分析 业务处理流程: 判断前端传的标签分类id是否为空,是否为整数.是否超过范围 判断前端传的当前文章页数是否为空,是否为整数.是否超过范围 请求方法:GET url定义:/new ...
- 潭州课堂25班:Ph201805201 django 项目 第十三课 短信验证码后台的实现 (课堂笔记)
d 发送短信验证码之前,后台要得到三个参数 : 1,用户手机吗,, 2,用户输入的图片验证文本, 3,前台的 uuid , 在60秒内是否有发送短信的记录 只有用户输入的手机号,文本信息与 uudi ...
随机推荐
- Linux基本命令总结(四)
接上篇: 16,locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就只需查询这个数据库,而不必实际深入档案系统之中了 ...
- Dubbo2.6.5+Nacos注册中心(代替Zookeeper)
在上一节的小栗子的基础上,只需要更改两个地方 第一个:父工程的pom依赖增加 <!-- Dubbo Nacos registry dependency --> <dependency ...
- 你可能不知道的 Mac 技巧 - 文本操作
找不到 Mac 上的 Home,End,PageUp?想截图还得打开 QQ?不知道 Mac 如何剪切文件?找不到全屏窗口的按钮?找不到隐藏文件夹?不知道如何向后删除?想少用鼠标,多用键盘?…… 希望我 ...
- SMB(Server Message Block) Protocal Research
catalogue . 什么是SMB . 基础SMB协议 . SMB Clients and Servers 1. 什么是SMB 全世界有很多的客户端和服务端软件实现了SMB协议,全部windows工 ...
- 调用腾讯、百度翻译API,实现游戏机翻通用程序
最近玩了款steam独立游戏,没中文,只能自己汉化了,用腾讯跟百度的API实现了一个通用的机翻程序(只需要导入JSON文本), 同样,比较懒,还没写,先占坑
- luogu 2154 离散化+杨辉三角+树状数组
将纵向固定,每次在横向找两个点,计算其中间墓地的贡献答案,离散化后同一行的预处理个数, 树状数组内存储C[up[i]][k] * C[down[i][k] 的值,每次更新时 down[横坐标]++; ...
- 2.7 if应用:猜拳游戏
应用:猜拳游戏 <1>运行效果: <2>参考代码: import random player = input('请输入:剪刀(0) 石头(1) 布(2):') player = ...
- Python3:字符串的大小写和镜像字符串(swapcase()函数,chr(),ord(),translate()函数)
题目: 请编程实现字符串的转换:1. 将"adsdsfdndsdsdfsfdsdASDSDEDSFE18754"字符串大写变小写,小写变大写:2. 并且将字符串变为镜像字符串,例如 ...
- js将时间戳转换为日期类型
function getLocalTime(nS) { var date = new Date(nS); Y = date.getFullYear() + '年'; M = ( ...
- decltype类型指示符
C++11新标准引入第二种类型说明符decltype,它的作用是选择并返回操作数的数据类型. 编译器分析表达式并得到它的类型,却不实际计算表达式的值: decltype(f()) sum = x;// ...