Bootstrap实战---手风琴和swiper特效插件

最新推荐文章于 2024-04-23 11:37:57 发布
最新推荐文章于 2024-04-23 11:37:57 发布
阅读量1.3k 收藏
点赞数
分类专栏： HTML/CSS/JS/Bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46629123/article/details/118652449
版权 
<!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">

    <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="wrap shadow-lg mt-0">
                        <div class="pic1 pic">
                            <div class="pic_num1 pic_num"></div>
                        </div>
                        <div class="pic2 pic">
                            <div class="pic_num2 pic_num"></div>
                        </div>
                        <div class="pic3 pic">
                            <div class="pic_num3 pic_num"></div>
                        </div>
                        <div class="pic4 pic">
                            <div class="pic_num4 pic_num"></div>
                        </div>
                        <div class="pic5 pic">
                            <div class="pic_num5 pic_num"></div>
                        </div>
                        <div class="pic6 pic">
                            <div class="pic_num6 pic_num"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row d-lg-none">
                <div class="col">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="images/t1.jpg" class="img-fluid" alt=""></div>
                            <div class="swiper-slide"><img src="images/t2.jpg" class="img-fluid" alt=""></div>
                            <div class="swiper-slide"><img src="images/t3.jpg" class="img-fluid" alt=""></div>
                            <div class="swiper-slide"><img src="images/t4.jpg" class="img-fluid" alt=""></div>
                            <div class="swiper-slide"><img src="images/t5.jpg" class="img-fluid" alt=""></div>
                            <div class="swiper-slide"><img src="images/t6.jpg" class="img-fluid" alt=""></div>
                        </div>
                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></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',{

        loop: false, // 循环模式选项

        // 如果需要前进后退按钮
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        },


        });
        
    </script>

    <!--引入手风琴JS-->
    <script src="js/script.js"></script>
</body>
</html>
i see the future
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简洁的CSS3滑动手风琴切换特效
06-09
简洁的CSS3滑动手风琴切换特效是一款基于font-awesome.css实现的网页手风琴菜单特效，切换时的箭头指向效果相当不错。
Swiper实现手风琴式的图片展示
BWater_monster的博客
04-27 3344
基础的Swiper+简单的过度动画实现图片手风琴效果
移动端js事件、zeptojs、swiper、bootstrap、正则表达式、前端性能优化
最新发布
我的个人博客
04-23 854
移动端场景下的js事件；制作移动端特效常用的js库；介绍移动端常用开发框架Bootstrap。
jQuery实现横向手风琴图片轮播焦点图效果
08-23
刚刚介绍完jQuery打飞机游戏，现在我们来点实用的，来分享一款基于jQuery的横向手风琴图片轮播焦点图效果。手风琴效果即图片一张张层叠在一起，鼠标滑过图片时即可展开完整的图片，这样的效果很常见，所以应用也很广泛，大家可以试试这款jQuery焦点图。
四、day04Swiper、city、手风琴
weixin_44627935的博客
05-15 308
swiper： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="
Swiper和Bootstrap概述
pro1822的博客
04-19 1464
Swiper和Bootstrap概述
bootstrapTable-treeView：treeView的bootstrapTable扩展
02-05
TreeView演示注意数据中必须包含parentId属性，根节点parentId=null ，子例程中根据配置的parentId == options[treeId] 。例如配置项\u4e2dtreeId='id' ，那么子上游的parentId属性将父父的id 数据必须包含parentId...
基于Bootstrap垂直手风琴特效.zip
07-11
在本示例中，我们关注的是“基于Bootstrap垂直手风琴特效”，这是一种交互式的、节省空间的展示大量信息的方式。 手风琴（Accordion）是Bootstrap框架中的一个关键组件，它允许在一个有限的空间内展开和折叠内容...
bootstrap-5.1.3-dist.zip
11-11
这个"bootstrap-5.1.3-dist.zip"压缩包包含的是Bootstrap的5.1.3稳定版本，该版本提供了最新的功能改进和修复，旨在提升开发者的工作效率和用户体验。 在Bootstrap 5.1.3中，开发者可以期待以下关键知识点： 1. **...
bootstrap-5.0.0-beta3-dist.zip
05-02
在压缩包"bootstrap-5.0.0-beta3-dist"中，你将找到Bootstrap的所有必需文件，包括CSS、JS和图标文件。这些文件可以直接应用到你的项目中，以快速启动一个具有现代设计感和优秀用户体验的网站。 总的来说，...
Bootstrap Accordion手风琴特效.zip
07-11
4. **响应式设计**：作为Bootstrap的一部分，Accordion手风琴特效天生具备响应式特性，能够在不同设备和屏幕尺寸上自动调整布局，保证在手机、平板和桌面电脑上的用户体验。 5. **自定义扩展**：开发者还可以根据...
经典前端手风琴、遮罩、焦点轮播、旋转木马效果源码
04-11
经典前端手风琴、遮罩、焦点轮播、旋转木马效果源码
JS动画_手风琴、轮播图、回调函数、渐变透明
12-01
http://www.jianshu.com/p/50f07e7a2012 JS动画_手风琴、轮播图、回调函数、渐变透明
移动端 手风琴
10-29
特效开发，项目总流程，前端混合APP 开发 代码托管码元上
bootstrap和swiper的使用
万万没想到的博客
09-19 6031
Bootstrap下载地址：http://www.bootcss.com/  （响应式框架） Swiper 下载地址：http://www.swiper.com.cn/ （轮播框架）   一．引用： <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scala
前端超级实用的几个主流框架
pig_pig32的博客
09-05 503
一、Bootstrap框架 Bootstrap官网及下载网站: https://www.bootcss.com/ Bootstrap实用功能: 大部分网页样式（导航栏，图片，按钮，表单），栅格系统，轮播图，下拉菜单 等等 Bootstrap简介： Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。 CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的class，以及一个先进的网格系统。这将
bootstrap选项卡 + swiper滑动插件 部分元素未渲染的问题
BingJH2018212666的博客
12-07 190
bootstrap选项卡 + swiper滑动插件
bootstrapvue中使用swiper图片轮播
qq_50031016的博客
04-25 1057
boottstrapvue中要用图片轮播 前言 尝试过js的走马灯和无缝滚动，这两个只适应电脑端，尝试着修改bootstrapvue中自带的图片轮播，但是出来的是三张三张的一起轮播，这个要证都是三的倍数 一、vue中引入swiper？ 在终端执行： npm install --save swiper npm install --save vue-awesome-swiper 二、使用步骤 1.引入库 在main.js中全局引入 代码如下（示例）： //swiper版本6.0以上使用，我使用的是swiper6
vue 使用Jquery和bootstrap加elementUi加swiper插件
weixin_40888956的博客
01-27 780
如果你已经创建好了Vue项目，就按照下面步骤就可以加上你要用的插件或UI组建 第一步npm install jquery --save-dev安装Jquery插件模块 第二步在build/webpack.dev.conf.js中plugins数组的最后但是在plugins数组里面加入这行代码， new webpack.optimize.CommonsChunkPlugin('commo...
哪里可以找到 bootstrap-table-draggable-columns 插件
07-14
你可以在 GitHub 上找到 bootstrap-table-draggable-columns 插件。以下是该插件的 GitHub 页面链接： https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/draggable-columns 在该页面上，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值