Bootstrap实战---讲师列表栏目(图片+JS+影片)

最新推荐文章于 2022-10-09 14:09:16 发布
最新推荐文章于 2022-10-09 14:09:16 发布
阅读量165 收藏 2
点赞数
分类专栏： HTML/CSS/JS/Bootstrap 文章标签： bootstrap javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46629123/article/details/118765758
版权

Bootstrap实战—讲师列表栏目(图片+JS+影片)

  • 经验：没有用到的dplayer，请不要加到script中，否则会导致后面的JS无法执行。比如下面这段代码就是注册dp1。因为在HTML中没有“id=dplayer1”的DOM，所以JS一直执行错误后就没有往下执行。
            dp1=new DPlayer({
                container: document.getElementById('dplayer1'),
                video:{
                    url:'//cdn.eduwork.cn/mp4/youshi.mp4',
                    pic:'images/player/p1.png',
                    mutex:true,
                },
                danmaku:{
                    id:"212121212",
                    api:'onedm.js?',
                },
            });

这是效果截图。
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>融职教育</title>
    <!--移动设备优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--引入Bootstrap CSS-->
    <link rel="stylesheet" href="css/bootstrap.css">

    <!-- 引入CSS Swiper插件 -->
    <link rel="stylesheet" href="css/swiper.min.css">

    <!--引入手风琴CSS-->
    <link rel="stylesheet" href="css/style.css">

    <!--引入 Dplayer css-->
    <link rel="stylesheet" href="css/DPlayer.min.css">

    <style>

    </style>

</head>
<body>
 

    <!--你的总监开始-->
    <section class="mt-4">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div>
                        <h4 class="d-inline-block">你的总监</h4>
                        <small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
                    </div>
                </div>
            </div>
            <div class="row d-none d-lg-block">
                <div class="col">
                    <div class="card w-100 text-white border-0" style="margin-top: 200px;">
                        <img src="images/cwbg.png" class="card-img shadow-lg" alt="...">
                        <div class="card-img-overlay d-flex flex-row mt-5">
                            <div class="w-25 p-2" style="margin-top:-235px">
                                <img id="teac_pic" src="images/phpjs4c.png" class="img-fluid" alt="">
                            </div>
                            <div class="w-75 p-2" style="margin-top: -50px">
                                <h5 class="card-title" id="teac_name">高 洛 峰</h5>
                                <p class="card-subtitle" id="teac_title">智校云创始人 & 系统架构师 & 畅销书《细说PHP》作者</p>
                                <p class="card-text" id="teac_desc">拥有十五年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务， 
                                    具有扎实的技术功底。国内资深技术讲师，腾讯网络人气名人讲师，累计授课长达上万课时， 培养了近百名IT名师，
                                    培训数千名学员成功走向IT岗位。熟悉掌握当前应用的各种主流编程语言， 
                                    其中，对Web系统开发深有研究，近年来致力于推广开源的PHP技术。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row mt-5">
                <div class="col-12 col-sm-6 col-lg-3 teacher" data-i="1">
                    <div class="card text-center ">
                        <div class="card-img">
                            <div id="dplayer11"></div>
                        </div>
                        <div class="card-body" style="font-size: 14px;">
                            EduWork教学总监&智校云创始人<br>
                            畅销书《细说PHP》作者
                        </div>
                        <div class="card-footer">
                            <h6><strong>高 洛 峰</strong></h6>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-lg-3 teacher" data-i="2">
                    <div class="card text-center ">
                        <div class="card-img">
                            <div id="dplayer22"></div>
                        </div>
                        <div class="card-body" style="font-size: 14px;">
                            EduWork教学总监&智校云创始人<br>
                            畅销书《细说PHP》作者
                        </div>
                        <div class="card-footer">
                            <h6><strong>高 洛 峰</strong></h6>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-lg-3 teacher" data-i="3">
                    <div class="card text-center ">
                        <div class="card-img">
                            <div id="dplayer33"></div>
                        </div>
                        <div class="card-body" style="font-size: 14px;">
                            EduWork教学总监&智校云创始人<br>
                            畅销书《细说PHP》作者
                        </div>
                        <div class="card-footer">
                            <h6><strong>高 洛 峰</strong></h6>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-lg-3 teacher" data-i="4">
                    <div class="card text-center " >
                        <div class="card-img">
                            <div id="dplayer44"></div>
                        </div>
                        <div class="card-body" style="font-size: 14px;">
                            EduWork教学总监&智校云创始人<br>
                            畅销书《细说PHP》作者
                        </div>
                        <div class="card-footer">
                            <h6><strong>高 洛 峰</strong></h6>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <!--你的总监结束-->


    <!--引入jQuery, 再引入poppper.js 最后再引入Bootstrap.js-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>



    <!--引入 swiper 的 js-->
    <script src="js/swiper.min.js"></script>

    <script>
        var swiper = new Swiper('.swiper-container');
    </script>

    <!--引入手风琴JS-->
    <script src="js/script.js"></script>

    <!--引入Dplayer的JS-->
    <script src="js/DPlayer.min.js"></script>

    <script>
        var dp11;
        var dp22;
        var dp33;
        var dp44;
        $(function(){

            dp11=new DPlayer({
                container: document.getElementById('dplayer11'),
                video:{
                    url:'test.mp4',
                    pic:'images/eduglf.jpg',
                    mutex:true,
                },

            });



            dp22=new DPlayer({
                container: document.getElementById('dplayer22'),
                video:{
                    url:'test.mp4',
                    pic:'images/eduglf.jpg',
                    mutex:true,
                },

            });

            dp33=new DPlayer({
                container: document.getElementById('dplayer33'),
                video:{
                    url:'test.mp4',
                    pic:'images/eduglf.jpg',
                    mutex:true,
                },

            });

            dp44=new DPlayer({
                container: document.getElementById('dplayer44'),
                video:{
                    url:'test.mp4',
                    pic:'images/eduglf.jpg',
                    mutex:true,
                },

            });
        });
    </script>



<script>
    $(function(){
        $('.teacher').hover(function(){
            $(this).children('.card').addClass('shadow');

            var data_i = $(this).attr('data-i');
            console.log(data_i);

            switch (data_i){
                case '1':
                    console.log('111')
                    $('#teac_pic').attr('src','images/phpjs4c.png');
                    $('#teac_name').text('高 洛 峰');
                    $('#teac_title').text('智校云创始人 & 系统架构师 & 畅销书《细说PHP》作者');
                    $('#teac_desc').text('拥有十五年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务，' +
                       ' 具有扎实的技术功底。国内资深技术讲师，腾讯网络人气名人讲师，累计授课长达上万课时， 培养了近百名IT名师，培训数千名学员成功走向IT岗位。熟悉掌握当前应用的各种主流编程语言， 其中，对Web系统开发深有研究，近年来致力于推广开源的PHP技术。');
                    break;

                case '2':
                    console.log('222')
                    $('#teac_pic').attr('src','images/eduzhaoshuai.png');
                    $('#teac_name').text('赵 帅');
                    $('#teac_title').text('智校云创始人 & 系统架构师 & 畅销书《细说PHP》作者');
                    $('#teac_desc').text('拥有十五年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务，' +
                       ' 具有扎实的技术功底。国内资深技术讲师，腾讯网络人气名人讲师，累计授课长达上万课时， 培养了近百名IT名师，培训数千名学员成功走向IT岗位。熟悉掌握当前应用的各种主流编程语言， 其中，对Web系统开发深有研究，近年来致力于推广开源的PHP技术。');
                    break;

                case '3':
                    console.log('333')
                    $('#teac_pic').attr('src','images/phpjs4c.png');
                    $('#teac_name').text('赵 帅');
                    $('#teac_title').text('智校云创始人 & 系统架构师 & 畅销书《细说PHP》作者');
                    $('#teac_desc').text('拥有十五年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务，' +
                       ' 具有扎实的技术功底。国内资深技术讲师，腾讯网络人气名人讲师，累计授课长达上万课时， 培养了近百名IT名师，培训数千名学员成功走向IT岗位。熟悉掌握当前应用的各种主流编程语言， 其中，对Web系统开发深有研究，近年来致力于推广开源的PHP技术。');
                    break;

                case '4':
                    console.log('444')
                    $('#teac_pic').attr('src','images/phpjs4c.png');
                    $('#teac_name').text('赵 帅');
                    $('#teac_title').text('智校云创始人 & 系统架构师 & 畅销书《细说PHP》作者');
                    $('#teac_desc').text('拥有十五年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务，' +
                       ' 具有扎实的技术功底。国内资深技术讲师，腾讯网络人气名人讲师，累计授课长达上万课时， 培养了近百名IT名师，培训数千名学员成功走向IT岗位。熟悉掌握当前应用的各种主流编程语言， 其中，对Web系统开发深有研究，近年来致力于推广开源的PHP技术。');
                    break;
            }

        },function(){
            $(this).children('.card').removeClass('shadow');
        })
    })
</script>


</body>
</html>
i see the future
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap 布局图片列表
mao_mu_mu的博客
12-07 9788
  pageEncoding="UTF-8"%> http://java.sun.com/jsp/jstl/core"%>  String path = request.getContextPath();     String basePath = request.getScheme() + "://"   + request.getServerName() + ":" +
bootstrap-switch.min.js
04-22
bootstrap-switch.min.js
Bootstrap实战---Dplayer播放器(影片)
Season CSDN博客
07-13 8123
Dplayer播放器简单用法可参考 https://www.cnblogs.com/bamboopanders/p/13431476.html <div id="player1" class="dplayer"></div> <!-- ... --> <script src="dist/DPlayer.min.js"></script> var dp = new DPlayer({ element: document.getElement
bootstrap table使用总结（显示图片）
热门推荐
qq_35071164的博客
12-27 1万+
使用bootstrap table可以很方便的开发后台表格，对数据进行异步更新，编辑。下面就来介绍一下bootstrap table的详细使用方法： 因为之前在官网也找了很久的教程，源码感觉隐藏的比较隐秘，其他扩展功能也很难找到，其实都在：http://issues.wenzhixin.net.cn/bootstrap-table/index.html这里面，点击上面的tab可以找到具体的功...
Bootstrap笔记(十) 图片篇
XI_MILU的博客
08-22 870
图片 响应式图片 响应式图片指的是图片会随着父元素的宽度自动缩放，最大宽度为图片的原尺寸。制作响应式图片只要在 <img>元素加上 .img-fluid 类别，图片就会套用 max-width:100%; 和 height:auto; 两个属性成为响应式图片。 範例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=
Bootstrap——列表（无序列表、有序列表、定义列表）、代码（code、pre、kbd、samp、var）、图片（响应式图片、图片缩略图、图片对齐方式）
m0_69034993的博客
10-09 2572
除了CSS3提供的border-radius属性可以实现，在Bootstrap中定义了.img-thumbnail类可以使图片具有圆角且1px边界的边框样式。也可以通过设置max-width：100%，height：auto样式，来实现图片响应式效果。Bootstrap定义了.list-unstyled类样式，使用它可以移除默认的.list-style样式，并且设置左侧填充为0。（2）使用文本类.text-left、.text-center、.text-right，分别实现水平居中、居中和居右对齐。
bootstrap-table-zh-CN.js
08-27
bootstrap-table-zh-CN.js,有需要就下载吧
bootstrap-table-editable.js
06-28
在 Bootstrap Table 中，`bootstrap-table-editable.js` 是一个非常重要的组件，它为表格提供了行内编辑的功能，极大地提升了用户体验。通过集成 x-editable 库，用户可以直接在表格中修改单元格内容，而无需跳转到...
bootstrap-5.1.3-dist.zip
11-11
综上所述，"bootstrap-5.1.3-dist.zip"是一个包含Bootstrap 5.1.3所有静态资源的压缩包，包括CSS、JavaScript文件以及必要的图片和其他资源，用于快速构建现代Web应用。无论你是初学者还是经验丰富的开发者，这个...
bootstrap--edittable(css,js).rar
04-29
bootstrap实现单元格编辑的css与js。。bootstrap-editable.css bootstrap-editable.js bootstrap-table-editable.js
一款好看的展示列表（基于Bootstrap）
03-22
这是一款比较好看的展示列表，功能主要实现招聘列表页面。无需安装bootstrap，通过浏览器直接打开其中的html文件即可看到效果。比较简单实用
Bootstrap响应式图片展示模板
08-11
Bootstrap响应式图片展示模板，便捷，使用方便
bootstrap卡片图文列表布局代码.zip
07-05
bootstrap卡片图文列表布局代码是一款基于jQuery跟Bootstrap实现的3种列表布局样式代码。
Bootstrap卡片图文列表布局样式代码
06-11
基于jQuery和Bootstrap实现的卡片图文列表布局样式代码，包括普通的卡片布局、等高卡片布局等。
Bootstrap-表单和图片
One By One
12-14 186
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head>...
bootstrap 卡片card图片布局
IT从业者
02-22 2903
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" /> <title>热卖商品分析-xxx V1.0.1</title> <link rel="stylesheet" ...
Bootstrap实战---讲师列表栏目(图片)
Season CSDN博客
07-14 113
Bootstrap实战—讲师列表栏目(图片) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>融职教育</title> <!--移动设备优先--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no
学习响应式BootStrap来写融职教育网站，Bootsrtap第十一天Dplayer播放器
god953的博客
07-29 140
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>融职教育</title> <!-- 移动设备优先--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
【Django-meeting系统】播放视频的两种方式之超链接和dplayer--20220926
Season CSDN博客
09-26 1366
播放视频的两种方式之超链接和dplayer
bootstrap-table-zh-cn.js下载
最新发布
10-27
要下载bootstrap-table-zh-cn.js，您可以按照以下步骤操作： 1. 打开您的浏览器，并导航到bootstrap-table官方网站（https://bootstrap-table.com/）。 2. 在网站上方的搜索栏中输入"bootstrap-table-zh-cn.js"，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值