• 前面介绍过原生的javascript实现图片轮播效果:http://blog.csdn.net/shoushou71/article/details/51628678,本节通过Bootstrap框架实现图片轮播效果。 1.Bootstrap介绍  Bootstrap是由 Twitter 公司(全球最大的...

    
    
           前面介绍过原生的javascript实现图片轮播效果:http://blog.csdn.net/shoushou71/article/details/51628678,本节通过Bootstrap框架实现图片轮播效果。

    1.Bootstrap介绍

        Bootstrap是由Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTMLCSSJavaScript 的开源框架。 该框架代码简洁、 视觉优美, 可用于快速、 简单地构建基于PC 及移动端设备的 Web 页面需求。Bootstrap最为重要的部分就是它的响应式布局,通过这种布局可以兼容PC 端、 PAD以及手机移动端的页面访问。

       Bootstrap中文网站:http://www.bootcss.com/

      特点:

     Bootstrap非常流行,得益于它非常实用的功能和特点。主要核心功能特点如下:
    (1).跨设备、跨浏览器可以兼容所有现代浏览器, 包括比较诟病的IE78
    (2).响应式布局不但可以支持PC 端的各种分辨率的显示,还支持移动端 PAD、手机等屏幕的响应式切换显示。
    (3).提供的全面的组件Bootstrap提供了实用性很强的组件,包括:导航、标签、工具条、按钮等一系列组件,方便开发者调用。
    (4).内置 jQuery 插件Bootstrap提供了很多实用性的 jquery 插件,这些插件方便开发者实现 Web中各种常规特效。
    (5).支持 HTML5CSS3

      HTML5 语义化标签和 CSS3 属性,都得到很好的支持。
    (6).支持 LESS 动态样式

      LESS 使用变量、 嵌套、 操作混合编码, 编写更快、 更灵活的 CSS。 它和Bootstrap 很好的配合开发。

    2.轮播器设计

    先看代码目录结构:

    源码:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    	<title>图片轮播</title>
    	<link rel="stylesheet" href="css/bootstrap.min.css">
    	<link rel="stylesheet" href="css/style.css" />
    	<style>
    
    	</style>
    </head>
    <body >
    	
    	<div id="myCarousel" class="carousel slide">
    		<ol class="carousel-indicators">
    			<li data-target="#myCarousel" data-slide-to="0" class="active"> </li>
    			<li data-target="#myCarousel" data-slide-to="1"> </li>
    			<li data-target="#myCarousel" data-slide-to="2"> </li>
    			
    		</ol> 
    		<div class="carousel-inner">
    			<div class="item active" style="background:#223240;">
    				<img src="img/slide1.png" alt="第一张" />
    			</div>
    			<div class="item" style="background:#F5E4DC;">
    				<img src="img/slide2.png" alt="第二张" />
    			</div>
    			<div class="item" style="background:#DE2A2D;">
    				<img src="img/slide3.png" alt="第三张" />
    			</div>
    		
    		</div>
    	
    		<a href="#myCarousel" data-slide="prev" class="carousel-control left">
    			<span class="glyphicon glyphicon-chevron-left"> </span>
    		</a>
    		<a href="#myCarousel" data-slide="next" class="carousel-control right">
    			<span class="glyphicon glyphicon-chevron-right"> </span>
    		</a>
    	</div>
    
    
    
    
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    
    
    	
    		//自动播放
    		$("#myCarousel").carousel({
    			interval :1000,
    		});
    		
    
    </script>
    </body>
    </html>
    
    样式:
    .logo {
    	padding:0;
    }
    #myCarousel {
    	margin: 50px 0 0 0;
    }
    #navbar-collapse ul {
    	margin-top:0;
    }
    .carousel-inner img{
    	margin: 0 auto;
    }
    .carousel-control{
    	font-size: 100px;
    	
    }
    

    用谷歌浏览器测试响应式效果:

    由此实现的轮播效果简单明了。



    展开全文
  • 原生js实现图片轮播 效果: 代码: html+css: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&...

    原生js实现图片轮播

    效果:
    原生js
    代码:

    html+css:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图 练习</title>
    <style>
    .lunboimg {
      list-style-type: none;
    }
    .lbimg {
      position: absolute;
    }
    .lunbobtn {
      position: absolute;
      top: 75%;
      left: 40%
    }
    .lbbtn {
      margin-left: 10px;
      display: inline-block;
      background-color: gray;
      border-radius: 50%;
      width: 20px;
      height: 20px;
    }
    .lbbtn:hover {
      width: 22px;
      height: 22px;
    }
    .rtriangle{
      margin-top: 50px;
      width: 0;
      height: 0;
      border-width:70px 40px;
      border-style: solid;
    }
    .righttriangle {
      position: absolute;
      top: 40%;
      left:78%;
      display: inline-block;
      border-right: 10px solid; border-bottom: 10px solid;
      width: 50px; height: 50px;
      transform: rotate(-45deg);
    }
    .righttriangle:hover {
      border-right: 12px solid yellow; border-bottom: 12px solid yellow;
    }
    .lefttriangle {
      position: absolute;
      top: 40%;
      left:17%;
      display: inline-block;
      border-left: 10px solid; border-bottom: 10px solid;
      width: 50px; height: 50px;
      transform: rotate(45deg);
    }
    .lefttriangle:hover {
      border-left: 12px solid yellow; border-bottom: 12px solid yellow;
    }
    </style>
    </head>
    <body>
      <div class="container">
        <ul class="lunboimg">
          <li class="lbimg">
            <a href="#"><img src="23.jpg" width="1000px" height="600px"></a>
          </li>
          <li class="lbimg">
            <a href="#"><img src="21.jpg" width="1000px" height="600px"></a>
          </li>
          <li class="lbimg">
            <a href="#"><img src="22.jpg" width="1000px" height="600px"></a>
          </li>
          <li class="lbimg">
            <a href="#"><img src="20.jpg" width="1000px" height="600px"></a>
          </li>
        </ul>
        <ul class="lunbobtn">
          <li class="lbbtn"></li>
          <li class="lbbtn"></li>
          <li class="lbbtn"></li>
          <li class="lbbtn"></li>
        </ul>
        <div class="rlbtn">
          <div id="rightbtn" class="righttriangle"></div>
          <div id="leftbtn" class="lefttriangle"></div>
        </div>
      </div>
    
    <script src="test.js"></script>
    </body>
    </html>
    
    js:
    
    window.onload=function(){
        lunBo("lbimg","lbbtn");
    }
        //轮播图函数
    function lunBo(lbimg,lbbtn){
        var lbimgs=document.getElementsByClassName(lbimg);
        var lbbtns=document.getElementsByClassName(lbbtn);
        //图片及标识键设置函数(轮播到当前页面设置透明度为1,标识按钮设置为红色,其他页面隐藏)
        function initSet(index){
            for(var i=0;i<lbimgs.length;i++){
                lbimgs[i].style.opacity='0';
                lbbtns[i].style.backgroundColor='gray';
            }
            lbimgs[index].style.opacity='1';
            lbbtns[index].style.backgroundColor='blue';
        }
        //第一张图片初始化。(最开始时轮播到第一张图)
        initSet(0);
        //自动轮播函数
        var count=1;    //从第二张图开始轮播
        function autoMove(){
            if(count==lbimgs.length){
                count=0;
            }
            initSet(count);
            count++;
        }
        //设置自动轮播时间
        var scollMove=setInterval(autoMove,2000);
        //监听按钮控制跳转当前图片函数
        lbbtns[0].onclick=function(){
            clearInterval(scollMove);
            count=0;
            initSet(count);
            scollMove=setInterval(autoMove,2000);
        }
        lbbtns[1].onclick=function(){
            clearInterval(scollMove);
            count=1;
            initSet(count);
            scollMove=setInterval(autoMove,2000);
        }
        lbbtns[2].onclick=function(){
            clearInterval(scollMove);
            count=2;
            initSet(count);
            scollMove=setInterval(autoMove,2000);
        }
        lbbtns[3].onclick=function(){
            clearInterval(scollMove);
            count=3;
            initSet(count);
            scollMove=setInterval(autoMove,2000);
        }
        //监听左右控件实现前后跳转图片
        var rightbtn=document.getElementById("rightbtn");
        var lefttbtn=document.getElementById("leftbtn");
        rightbtn.onclick=function(){
            clearInterval(scollMove);
            autoMove();
            scollMove=setInterval(autoMove,2000);
        }
        leftbtn.onclick=function(){
            clearInterval(scollMove);
            if(count==0){
                count=lbimgs.length;
            }
            count--;
            initSet(count);
            scollMove=setInterval(autoMove,2000);
        };
    }
    
    

    bootstrap4实现图片轮播

    效果:
    bt4轮播
    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
    <title>轮播图 练习</title>
    <style>
    .carousel-inner img {
      width: 100%;
      height: 650px;
    }
    </style>
    </head>
    <body>
      <div class="container">
        <div id="demo" class="carousel slide" data-ride="carousel"> 
          <!-- 指示符 -->
          <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
            <li data-target="#demo" data-slide-to="3"></li>
          </ul>     
          <!-- 轮播图片 -->
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="23.jpg">
              <div class="carousel-caption">
                <h3>Marvel</h3>
                <p>漫威标识!一些描述一些描述一些描述</p>
              </div>
            </div>
            <div class="carousel-item">
              <img src="21.jpg">
              <div class="carousel-caption">
                <h3>钢铁侠</h3>
                <p>一些描述一些描述一些描述一些描述</p>
              </div>
            </div>
            <div class="carousel-item">
              <img src="22.jpg">
              <div class="carousel-caption">
                <h3>雷神</h3>
                <p>一些描述一些描述一些描述一些描述</p>
              </div>
            </div>
            <div class="carousel-item">
              <img src="20.jpg">
              <div class="carousel-caption">
                <h3>灭霸</h3>
                <p>一些描述一些描述一些描述一些描述</p>
              </div>
            </div>
          </div>     
          <!-- 左右切换按钮 -->
          <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>
          <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>     
        </div>
      </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    </body>
    </html>
    

    jquery实现图片轮播切换

    效果:
    jq实现
    代码:(粘贴在这里太冗长,我打包在下面了)

    对比

    自己写轮播图效果的确很麻烦,但是可以锻炼一定的技能与熟练度,而且可以实现一些自定义效果(像是用jquery来写出如上例效果)。
    当然用框架来写轮播图就方便多了,只是自定义效果不太好加,不过熟练之后用框架的确是省时间。

    最后放一下轮播图的工程文件供跟我一样的初学者参考学习:

    https://download.csdn.net/download/weixin_43388844/10841313
    
    展开全文
  • 效果图代码实现:<!DOCTYPE html> <link rel="stylesheet" href="bootstrap.min.css" /> <link rel="stylesheet" href="bootstrap-theme.min.css" /> <script src="jquery.min.js"></

    效果图

    这里写图片描述

    代码实现:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <link rel="stylesheet" href="bootstrap.min.css" />
        <link rel="stylesheet" href="bootstrap-theme.min.css" />
        <script src="jquery.min.js"></script>
        <script src="bootstrap.min.js"></script>
        <style>
            #div1 {width:600px; height:500px}
        </style>
    </head>
    <body>
        <div id="div1">
            <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>
    
                  <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="airplane1.jpg" >
                    </div>
                    <div class="item">
                        <img src="airplane2.jpg" >
                    </div>
                    <div class="item">
                        <img src="airplane3.jpg" >
                    </div>
                </div>
    
                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" id="aaron1"></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" id="aaron2"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </body>
    <html>

    以上代码可以实现 div1 中的图片自动轮播,轮播时间默认5000ms。

    展开全文
  • bootstrap实现图片轮播

    2016-08-22 11:20:38
    bootstrap实现图片轮播 Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。 代码如下: ...
    bootstrap实现图片轮播
    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
    代码如下:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>标题</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/style.css" rel="stylesheet">
        <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
             <div id="myCarousel" class="carousel slide">  
                <ol class="carousel-indicators">  
                    <li data-target="#myCarousel" data-slide-to="0" class="active"> </li>  
                    <li data-target="#myCarousel" data-slide-to="1"> </li>  
                    <li data-target="#myCarousel" data-slide-to="2"> </li>
                    <li data-target="#myCarousel" data-slide-to="3"> </li>  
                      
                </ol>   
                <div class="carousel-inner">  
                    <div class="item active" style="background:#223240;">  
                        <img src="images/001.jpg" alt="第一张" />  
                    </div>  
                    <div class="item" style="background:#F5E4DC;">  
                        <img src="images/004.jpg" alt="第二张" />  
                    </div>  
                    <div class="item" style="background:#DE2A2D;">  
                        <img src="images/003.jpg" alt="第三张" />  
                    </div>
                    <div class="item" style="background:#DE2A2D;">  
                        <img src="images/005.jpg" alt="第四张" />  
                    </div>  
                  
                </div>  
              
                <a href="#myCarousel" data-slide="prev" class="carousel-control left">  
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>  
                <a href="#myCarousel" data-slide="next" class="carousel-control right">  
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>  
            </div> 
       <script src="js/jquery.min.js"></script>
        <!-- 包含了所有编译插件 -->
        <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript">
          $('#myCarousel').carousel({
            interval : 4000,//设置轮播时间
          });
        </script>
    </body>
    </html>

    #myCarousel {  
        margin: 50px 0 0 0;  
    }  
    #navbar-collapse ul {  
        margin-top:0;  
    }  
    .carousel-inner img{  
        margin: 0 auto;  
    }  

    html一般把javascript放在后面,避免页面加载缓慢

    展开全文
  • bootstrap图片轮播 最近学习bootstrap的时候幸运发现原来里面有一个自带的网页图片轮播图,功能齐全,属于很标准的轮播类型。 我异常兴奋,前些天还在自己用js轮播代码,今天就发现有这么个便捷的东西,当然开心...
                                     bootstrap图片轮播
    

    最近学习bootstrap的时候幸运发现原来里面有一个自带的网页图片轮播图,功能齐全,属于很标准的轮播类型。
    我异常兴奋,前些天还在自己用js写轮播代码,今天就发现有这么个便捷的东西,当然开心啦。
    废话不多说,开始见效果吧!
    ————————————————我是分割线————————————————

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    			
    		<!-- Indicators --> <ul 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> 
    		</ul> <!-- Wrapper for slides --> 
    		<div class="carousel-inner" role="listbox"> 
    			<div class="item active">
    				<img class="img-responsive" src="img/0e4eb42dd4acd3aff05b1fee14820af0.jpg"/>
    				<div class="carousel-caption"> 
    					<h1>轮播1的标题</h1> 
    					<p>这里是轮播图1的说明</p> 
    				</div> 
    			</div> 
    			<div class="item">
    				<img class="img-responsive" src="img/2fc4c4554273a93933af18f8a4239275.jpg"/>
    			<div class="carousel-caption"> 
    				<h1>轮播2的标题</h1> 
    				<p>这里是轮播图2的说明</p>
    			</div>
    			</div> 
    			<div class="item">
    				<img class="img-responsive" src="img/28058504efd74a112e721e048e38aeb9.jpg"/>
    			<div class="carousel-caption">
    				<h1>轮播3的标题</h1>
    				<p>这里是轮播图3的说明</p>
    			</div> 
    			</div> 
    		</div> <!-- Controls --> 
    		<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>
    

    在那之前先说明一下,免得像我一样的小白会傻傻写下代码后发现报错,我需要提醒一下:这些功能都是需要插件支持的,既然是bootstrap当然不能少它的css和js文件的引入,另外还有JQuery.js,他们的版本都在3.0以上就可以了!!

    1.直接引用bootstrap里的类carousel slide做一个div容器;

    2.ul标签 添加类carousel-indicators做相应个数的图像选择器,就是那些小圆点!

    3.再做一个div容器加类carousel-inner 包裹图片;

    4.接下来创建一个个的图片项目包裹在div 类item中,在里面如果还需要对图片做其他说明就继续加div 类carousel-caption 添加文字说明;

    5.最后一步是添加图片左右控制,a标签 添加标签类left carousel-control 和 类right-carousel-control 分别设置左右的控制键;
    选取要跳转的id #carousel-example-generic,data-slide=“left”/“right”;
    里面加上左右控制键显示的图片icon,这个可以引用 类glyphicon glyphicon-chevron-right 和 glyphicon glyphicon-chevron-left,自己也可以做啊,相信自己的审美 -^ .^-

    最后来一张效果图,就拜拜了!!

    在这里插入图片描述

    就是这样,我感觉效果挺好,所以我下一步打算做炫酷的3D版轮播图 + .+

    展开全文
  • 一、通过Bootstrap实现轮播图 准备好Bootstrap所需的包,轮播图所需的图片,然后就可以开始来写轮播图了。
  • 准备图片,把相关记录添加至数据库表中:  创建一个存储过程,获取所有记录: 在ASP.NET MVC专案中,部署Bootstrap环境......然后创建一个model:   using System; using System.Collections.Generic; ...
  • &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;  &...Bootstrap Carousel 示例&lt;/title&gt;  &lt;link rel="stylesheet" href="https:/
  • 炫酷的页面,但是技术有的时候跟不上的时候只能是模仿,看别人是怎么做的,其实模仿的过程也就是学习的一个过程,能看明白别人的代码也是一种进步,今天就简单的讲述一下如果用bootStrapUI框架做一个图片轮播的效果...
  • bootstrap实现轮播

    2018-09-16 18:15:45
    Bootstrap 轮播&lt;/title&gt; &lt;link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt; &lt;script src=&
  •  bootstrap初级知识旋转轮播 源文件:carousel.js、carousel.less CSS文件:bootstrap.css 这些源文件可以从bootstrap中下载,关于轮播,有很多译法,有人叫轮播,有人叫传送带.../*--这里放置轮播图片 --*/
  • 图片轮播组件是一个在网页中很常见的技术,但是如果直接编写的话,需要很长的JavaScript编码,同时也不好控制大小。 如果使用Bootstrap来编写图片轮播组件Carousel,则能够节约很多时间。 同时说一下,Carousel这个...
  • 图片轮播_01 作者:凯尔 时间:2016-02-20 描述: carousel date-interval="4000"停留时间/幅图 支持键盘左右方向键对图片进行轮播方向选择 --> 图片上要...
  • 之前写过一个原生纯js版本的广告轮播,相比之前那个,这个由于用了Bootstrap框架,实现起来代码相对简单一点,而且也比较美观,效果如图: 这是其中的两张图片,可以看到上面有小圆点,就和平时看到的一些网站的...
  • 大家都知道用js轮播图是一件比较麻烦的事情,那么今天就来用一个名为bootstrap的东西,快速简单的做出轮播图出来,首先,我们当然先要设置好html的样式,当然还要先引入bootstrap的css和js部分,如图一 ...
  • 1:因为我的框架用的是bootstrap,所以我希望在bootstrap的框架下,实现图片的滑动切换效果。 2:然后网上搜索了一下,需要用到Bootstrap 框架中的 carousel 插件,自带的。 3:如果想要像手机一样滑动的话(就是...
  • Bootstrap4框架处理JS轮播 开发工具与关键技术:使用Bootstrap4框架 作者:郑健鹏 撰写时间:2019年1月16日 我们之前的JS轮播是用原生的JS代码实现,这个方法比较耗费时间,因为还要打很多的代码来...
  • Bootstrap 图片自动轮播

    2019-04-09 11:41:11
    效果: 源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here<...link href="css/bootstrap.min.css" rel="stylesheet"> &l...
  • AngularJS图片轮播 AngularJS carousel
  • 1.首先在bootstrap官网下载压缩文件,并将压缩文件解压,将其中的bootstrap.min.css文件复制放在你自己网页的css文件夹下,再将bootstrap.min.js文件放在js文件夹下,这里需要用到jQuery文件,可以在jQuery官网下载...
1 2 3 4 5 ... 20
收藏数 20,084
精华内容 8,033