• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >bootstrap > Bootstrap轮播插件简单使用方法介绍

Bootstrap轮播插件简单使用方法介绍

作者:-夏昊- 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含bootstrap轮播插件,bootstrap js插件,bootstrap分页插件,bootstrap插件,bootstrap table插件等相关知识,-夏昊- 希望在学习及工作中可以帮助到您

本文细致的为大家分享了Bootstrap轮播插件简单实例,供大家参考,具体内容如下

使用Bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入

效果图:

bootstrap.min.js. 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 
  <!—轮播导航 -->
  <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="~/images/Chrysanthemum.jpg" />
   <div class="carousel-caption"> 
   ffffffff
   </div> 
  </div>
   <div class="item">
   <img src="~/images/Desert.jpg" />
 
   <div class="carousel-caption">
 
   xxxxxxxxxxxxxxxx
   </div> 
  </div>
   <div class="item">
   <img src="~/images/Lighthouse.jpg" /> 
   <div class="carousel-caption"> 
   mmmmmmmmmmmm 
   </div>
  </div>
  </div>
 
  <!—轮播导航 -->
 
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 
  <span class="glyphicon glyphicon-chevron-left"></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"></span>
   <span class="sr-only">Next</span>
 
  </a> 
 </div>


</div>

小编再为大家推荐一篇文章:全面解析Bootstrap图片轮播效果

如果大家还想深入学习,可以点击这里进行学习,再为大家附一个精彩的专题:Bootstrap学习教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

</div>

您可能想查找下面的文章:

  • Bootstrap轮播插件简单使用方法介绍
  • Bootstrap轮播插件使用代码
  • Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js

相关文章

  • 2017-05-30Bootstrap轮播插件使用代码
  • 2017-05-30手机端实现Bootstrap简单图片轮播效果
  • 2017-05-30Bootstrap table分页问题汇总
  • 2017-05-30基于bootstrap3和jquery的分页插件
  • 2017-05-30JS组件Bootstrap实现下拉菜单效果代码
  • 2017-05-30Bootstrap下拉菜单样式
  • 2017-05-30Bootstrap轮播插件简单使用方法介绍
  • 2017-05-30Bootstrap导航条可点击和鼠标悬停显示下拉菜单
  • 2017-05-30JS组件Bootstrap Select2使用方法解析
  • 2017-05-30Bootstrap与KnockoutJs相结合实现分页效果实例详解

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Bootstrap每天必学之基础排版
    • 基于Bootstrap+jQuery.validate实现表单验证
    • 利用bootstrapValidator验证UEditor
    • Bootstrap源码解读下拉菜单(4)
    • bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
    • Bootstrap入门书籍之(四)菜单、按钮及导航
    • Bootstrap框架实现广告轮播效果
    • Bootstrap组件(一)之菜单
    • Bootstrap HTML编码规范
    • 基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有