潭州课堂25班：Ph201805201 tornado 项目 第七课 界面美化和静态文件处理（课堂笔记）
2024-04-04 08:25:59
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 服务
作业
最新文章
- Unity iOS混合开发界面切换思路
- [FPGA] 1、开发板使用和引脚连接
- Windows 2008 利用Filezilla server搭建FTP
- CentOS(九)--与Linux文件和目录管理相关的一些重要命令①
- jQuery.fn
- Hadoop集群日常运维
- redis CONFIG REWRITE介绍
- eclipse 下，使用正常模式可以运行，DEBUG模式就卡住的解决方案
- 【菜鸟入门】安装配置eclipse 并编写运行第一个Java程序
- 阿里云Centos7 apache配置
- Java的依赖注入（控制反转）
- 数据库连接池dbcp和c3po的区别
- Python开发【内置模块篇】日志模块
- threadpool源码学习
- Spring Cloud的应用程序—上下文服务
- [转]keepalived简介
- Windows下运行Linux命令
- dijkstra 的优先队列优化
- 使用Swoole 构建API接口服务
- SpringMVC上传图片总结（2）--- 使用百度webuploader上传组件进行上传图片