Bootstrap
1.Bootstrap是一款优秀的前端库。包含了:
基本结构:包括基本样式。
CSS
组件:可用于创建下拉菜单、导航、弹出框等。
jQuery插件
2.下载方法
https://v3.bootcss.com/getting-started/#download
选择下载源码,下载后解压。
找到dist文件夹,复制里面的css、fonts、js三个文件夹。
jQuery组件
1.jQuery是一个快速、简洁的JavaScript框架
2.下载方法
https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js
按Ctrl+S组合键进行保存为jquery.min.js文件,放到js子文件夹中。
3.导入方法
在html文件中
<script src="{% static 'js/jquery.min.js' %}"></script>
jQThumb缩略图插件
1.解决图片对齐显示问题,可以按照设定的比例、尺寸、位置等属性来生成新的缩略图。
2.下载方法
在https://github.com/pakcheong/jqthumb下载
解压后在根目录下的dist文件夹中将jqthumb.min.js文件复制到js子文件夹中
3.引入方法
在html中添加引用
<script src="{% static 'js/jqthumb.min.js' %}"></script>
调用DrawImage()函数处理缩略图
DrawImage()函数正是基于jqthumb.min.js库的
<script>
//处理缩略图
function DrawImage(hotimg) {
$(hotimg).jqthumb({
...
});
}
</script>