基于bootstrap实现广告轮播带图片和文字效果
2016-07-22 00:00
876 查看
代码如下所示:
以上所述是小编给大家介绍的基于bootstrap实现广告轮播带图片和文字效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
基于BootStrap的图片轮播效果展示实例代码
基于Bootstrap实现图片轮播效果
Bootstrap每天必学之响应式导航、轮播图
Bootstrap的图片轮播示例代码
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>基于bootstrap的轮播广告页,带图片和文字</title> <link rel="stylesheet" href=" //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <style> .carousel { height: 500px; } .carousel .item { height: 500px; } .carousel .item img { width: 100%; } </style> </head> <body> <!-- 轮播广告 --> <div id="LBbox" class="carousel slide" data-ride="carousel"> <!-- 圆点按钮 --> <ol class="carousel-indicators"> <li data-target="#LBbox" data-slide-to="0" class="active"></li> <li data-target="#LBbox" data-slide-to="1"></li> </ol> <!-- 轮播内容 --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://img.mukewang.com/5412ad7c0001d2eb10880541.jpg" alt="1 slide"> <div class="carousel-caption"> <h1>第四代 Intel Core 处理器</h1> <p>无论是什么任务,配备 Intel HD Graphics 5000 图形处理器的第四代 Intel Core 处理器都能应对自如。</p> <p> <a href="#" class="btn btn-lg btn-primary" role="button">点我下载</a> </p> </div> </div> <div class="item"> <img src="http://img.mukewang.com/5412ae5c0001653b12800644.jpg" alt="2 slide"> <div class="carousel-caption"> <h1>MacBook Air</h1> <p>有了新一代 802.11ac 技术,MacBook Air 令 Wi-Fi 速度超越极限。</p> <p> <a href="#" class="btn btn-lg btn-primary" role="button">点我下载</a> </p> </div> </div> </div> <!-- 左按钮 --> <a href="#LBbox" class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">上一页</span> </a> <!-- 右按钮 --> <a href="#LBbox" class="right carousel-control" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">下一页</span> </a> </div> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
以上所述是小编给大家介绍的基于bootstrap实现广告轮播带图片和文字效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
基于BootStrap的图片轮播效果展示实例代码
基于Bootstrap实现图片轮播效果
Bootstrap每天必学之响应式导航、轮播图
Bootstrap的图片轮播示例代码
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- angular 指令简述
- 利用ASP.NET MVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)
- 浅析Bootstrap验证控件的使用
- 基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
- Bootstrap教程JS插件弹出框学习笔记分享
- Bootstrap插件全集
- Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
- Bootstrap框架动态生成Web页面文章内目录的方法
- JS组件Bootstrap Table使用实例分享
- bootstrap学习笔记之初识bootstrap
- Bootstrap下拉菜单效果实例代码分享
- Bootstrap表单组件教程详解
- BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
- Bootstrap每天必学之前端开发框架
- Bootstrap 粘页脚效果
- 第八篇Bootstrap下拉菜单实例代码
- Bootstrap选项卡与Masonry插件的完美结合
- bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能