bootstrap+swiper 图片查看器 图片查看
来源:互联网 发布:windows版icloud 书签 编辑:程序博客网 时间:2024/05/01 12:44
<!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- html代码 --><div class="container-fluid"><button class="btn btn-sm btn-default" onclick="moTaiChuang()">查看图片</button><div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="myModal"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">图片</h4> </div> <div class="modal-body"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/02/04/ChMkJlbKyE2IXudbAAeqE0PX12kAALIAQAKWNoAB6or294.jpg" alt="..."> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/02/04/ChMkJ1bKyE2IMGQKAAj7z6qSexYAALIAQABXPMACPvn547.jpg" alt="..."> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/02/04/ChMkJlbKyE2IHZqSAASTXvxrUrQAALIAQAdtpIABJN2769.jpg" alt="..."> <div class="carousel-caption"> </div> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal --></div><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><script>function moTaiChuang(){ $('#myModal').modal('show');}</script>
阅读全文
1 0
- bootstrap+swiper 图片查看器 图片查看
- 调用系统图片查看器查看图片
- C#图片查看器
- C#图片查看器
- 图片查看器beta1
- Android图片查看器
- 图片查看器
- 图片查看器
- matlab图片查看器
- Android 图片查看器
- 模拟图片查看器
- 图片查看器
- js图片查看器
- 网络图片查看器
- 网络图片查看器
- 网络图片查看器
- Android图片查看器
- 网络图片查看器
- mysql导入导出文件
- linux系统调用
- UVA 725 水
- select、poll、epoll之间的区别
- 品牌VI设计
- bootstrap+swiper 图片查看器 图片查看
- HashMap实现原理分析
- 链家笔试题小记
- CentOS上安装LAMP之MySQL环境及安装过程报错解决方案(纯净系统环境)
- 长度为n的整数数组循环左移m位
- JSP九大内置对象的作用和用法总结(转发)
- 禁用Chrome跟随系统的DPI缩放
- qduoj water problem(线段树区间查询)
- 乐视秒杀:每秒十万笔交易的数据架构解读