BootStrap系列教材（三十四）- 插件

工具版本兼容问题

效果	说明	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <style> div.item img{ width:100%; } div#carousel-example-generic{ width:80%; margin:0 auto; } </style> <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> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="https://how2j.cn/img/site/step/3491.png" > </div> <div class="item"> <img src="https://how2j.cn/img/site/step/3492.png" > </div> <div class="item"> <img src="https://how2j.cn/img/site/step/3493.png" > </div> <div class="item"> <img src="https://how2j.cn/img/site/step/3494.png" > </div> </div> </div>	基本轮播	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <style> div.item img{ width:100%; } div#carousel-example-generic{ width:80%; margin:0 auto; } </style> <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> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="https://how2j.cn/img/site/step/3491.png" > <div class="carousel-caption"> LOL1 </div> </div> <div class="item"> <img src="https://how2j.cn/img/site/step/3492.png" > <div class="carousel-caption"> LOL2 </div> </div> <div class="item"> <img src="https://how2j.cn/img/site/step/3493.png" > <div class="carousel-caption"> LOL3 </div> </div> <div class="item"> <img src="https://how2j.cn/img/site/step/3494.png" > <div class="carousel-caption"> LOL4 </div> </div> </div> </div>	带标题的轮播	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <style> div.item img{ width:100%; } div#carousel-example-generic{ width:80%; margin:0 auto; } </style> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000"> <!-- 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> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="https://how2j.cn/img/site/step/3491.png" > </div> <div class="item"> <img src="https://how2j.cn/img/site/step/3492.png" > </div> <div class="item"> <img src="https://how2j.cn/img/site/step/3493.png" > </div> <div class="item"> <img src="https://how2j.cn/img/site/step/3494.png" > </div> </div> </div>	设置轮播速度	示例代码
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <style> div.item img{ width:100%; } div#carousel-example-generic{ width:80%; margin:0 auto; } </style> <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> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="https://how2j.cn/img/site/step/3491.png" > </div> <div class="item"> <img src="https://how2j.cn/img/site/step/3492.png" > </div> <div class="item"> <img src="https://how2j.cn/img/site/step/3493.png" > </div> <div class="item"> <img src="https://how2j.cn/img/site/step/3494.png" > </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></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> </a> </div>	控制前后的轮播	示例代码

示例 1 : 基本轮播
示例 2 : 带标题的轮播
示例 3 : 设置轮播速度
示例 4 : 控制前后的轮播

示例 1 :

基本轮播

edit 顶折

纠问

基本轮播

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<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>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://how2j.cn/img/site/step/3491.png" >
    </div>
    <div class="item">
            <img src="https://how2j.cn/img/site/step/3492.png" >
    </div>
    <div class="item">
            <img src="https://how2j.cn/img/site/step/3493.png" >
    </div>

    <div class="item">
            <img src="https://how2j.cn/img/site/step/3494.png" >
    </div>

  </div>
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<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>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

<div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://how2j.cn/img/site/step/3491.png" >
    </div>
    <div class="item">
            <img src="https://how2j.cn/img/site/step/3492.png" >
    </div>
    <div class="item">
            <img src="https://how2j.cn/img/site/step/3493.png" >
    </div>

</div>
</div>

渲染中渲染完成

效果

示例 2 :

带标题的轮播

edit 顶折

纠问

带标题的轮播

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<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>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://how2j.cn/img/site/step/3491.png" >
      <div class="carousel-caption">
        LOL1
      </div>
    </div>
    <div class="item">
            <img src="https://how2j.cn/img/site/step/3492.png" >
      <div class="carousel-caption">
        LOL2
      </div>
    </div>
    <div class="item">
            <img src="https://how2j.cn/img/site/step/3493.png" >
      <div class="carousel-caption">
        LOL3
      </div>
    </div>

    <div class="item">
            <img src="https://how2j.cn/img/site/step/3494.png" >
      <div class="carousel-caption">
        LOL4
      </div>
    </div>

  </div>

</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://how2j.cn/img/site/step/3491.png" >
      <div class="carousel-caption">
        LOL1
      </div>
    </div>
    <div class="item">
            <img src="https://how2j.cn/img/site/step/3492.png" >
      <div class="carousel-caption">
        LOL2
      </div>
    </div>
    <div class="item">
            <img src="https://how2j.cn/img/site/step/3493.png" >
      <div class="carousel-caption">
        LOL3
      </div>
    </div>

</div>

渲染中渲染完成

效果

示例 3 :

设置轮播速度

edit 顶折

纠问

设置轮播速度

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
  <!-- 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>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://how2j.cn/img/site/step/3491.png" >
    </div>
    <div class="item">
            <img src="https://how2j.cn/img/site/step/3492.png" >
    </div>
    <div class="item">
            <img src="https://how2j.cn/img/site/step/3493.png" >
    </div>

    <div class="item">
            <img src="https://how2j.cn/img/site/step/3494.png" >
    </div>

  </div>
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
  
  <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>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

</div>
</div>

渲染中渲染完成

效果

示例 4 :

控制前后的轮播

edit 顶折

纠问

控制前后的轮播

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<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>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://how2j.cn/img/site/step/3491.png" >
    </div>
    <div class="item">
            <img src="https://how2j.cn/img/site/step/3492.png" >
    </div>
    <div class="item">
            <img src="https://how2j.cn/img/site/step/3493.png" >
    </div>

    <div class="item">
            <img src="https://how2j.cn/img/site/step/3494.png" >
    </div>

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></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>

  </a>

</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

</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>

</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>

</a>

</div>

渲染中渲染完成

效果

BootStrap系列教材（三十三）- 插件 - 折叠

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2019-09-27 为什么我轮播的时候的图片会一点一点增大

甄暮寒	关于前端部分-BootStrap-轮播的提问问题截图代码异常我把旁边的css属性改了,主要是想放小一点，是不是因为我的图片大小不一致？ div.item img{ align-content:center; width:100%; } div#carousel-example-generic{ width:30%; margin:0 auto; }

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-02-28 请问怎样才能让图片自适应大小

cirzear

关于前端部分-BootStrap-轮播的提问

像这样的图片右边就会有一大段空白

1 个答案

娶一个昵称
答案时间：2019-03-01

自适应也是看不同场合的，如果只是在一个DIV盒子里面，给图片设置高宽100%，就自动拉伸了但是对图片容易照成失真。

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-11-10 data-target 属性值

2017-08-03 data-ride="carousel

2017-03-07 就是引用了自己下载的bootsrap.js bootsrap.css jq 就没有出现箭头了不知道什么原因，用楼主的就可以

zzy

关于前端部分-BootStrap-轮播 -控制前后的轮播的提问

没有左右的箭头，求帮助

!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jq/jquery-3.1.1.min.js" type="text/javascript"></script>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
    	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
    	<style>
		  div.item img{
		    width:100%;
		   }
		  div#carousel-example-generic{
		    width:80%;
		    margin:0 auto;
		  }
		</style>
	</head>
		
	<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>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>
 
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://how2j.cn/img/site/step/3491.png" >
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3492.png" >
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3493.png" >
    </div>
 
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3494.png" >
    </div>
 
  </div>
 
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></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>
 
  </a>
 
</div>
	</body>
</html>

1 个答案

how2j
答案时间：2017-03-07

是不是没有fonts目录？参考这里最开始的几句话： http://how2j.cn/k/boostrap/boostrap-font/484.html

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 1 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-BootStrap-轮播的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图