潭州课堂25班：Ph201805201 tornado 项目 第七课 界面美化和静态文件处理（课堂笔记）

tornado 相关说明

使用  Bootstrap 前端框架

可以在 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 主题包

• Font Awesome, the iconic font and CSS toolkit

• BootCDN 开源项目免费 CDN 服务

• Bootstrap快速入门 - 云+社区 - 腾讯云

• Buttons - 一个高度可定制的按钮（button） CSS 样式库。

作业