Bootstrap/jQuery组件/jQThumb缩略图插件的介绍与下载

 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/[email protected]/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>