课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

为什么我我的面屏都是图片，而且，图片的上一页进和下一页的按钮不见了~跪求大神指点！

来源：3-5 滚动图片广告

ZhongXia

2016-04-17 19:41

为什么我的效果是满屏都是图片，而且上一页和下一页的按钮也没有了~跪求大神指点！！！

<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="img/0.jpg" alt="1 slide">

      <div class="carousel-caption">

        信息安全项目

        <p>信息安全是*****</p>

       <p><a class="btn btn-lg btn-primary" href="http://www.beihua.edu.cn/" role="button" target="_blank">点击我下载</a></p>

      </div>

    </div>

    <div class="item">

      <img src="img/1.jpg" alt="2 slide">

      <div class="carousel-caption">

       <h1>信息技术项目</h1>

       <p>信息技术是*****</p>

       <p><a class="btn btn-lg btn-primary" href="http://www.beihua.edu.cn/" role="button" target="_blank">点击我下载</a></p>

      </div>

      </div>

    <div class="item">

      <img src="img/2.jpg" alt="3 slide">

      <div class="carousel-caption">

       智能化管理项目

       <p>智能化管理是*****</p>

       <p><a class="btn btn-lg btn-primary" href="http://www.beihua.edu.cn/" role="button" target="_blank">点击我下载</a></p>

      </div>

      </div>

   <div class="item">

      <img src="img/3.jpg" alt="4 slide">

      <div class="carousel-caption">

        信息追踪技术项目

        <p>信息追踪技术是*****</p>

       <p><a class="btn btn-lg btn-primary" href="http://www.beihua.edu.cn/" role="button" target="_blank">点击我下载</a></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" aria-hidden="true"></span>

    <span class="sr-only">上一页</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">下一页</span>

  </a>

</div>

写回答 关注

3回答

  • wuli香香公举
    2016-07-21 16:50:37

    需要在项目中新建一个文件夹，名字为“fonts”，然后将bootstrap3版本中根目录中的fonts文件夹下的东西拷贝到你的文件夹中。图片上的上一页和下一页使用css的：before的content属性写出来的。

    0 0
  • ZhongXia
    2016-04-18 17:28:03

    <!DOCTYPE html>

    <html>

    <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>信息技术学院</title>

    <!--链入外部样式表-->

    <link href="F:\bootstrap\css\bootstrap.min.css" rel="stylesheet">

    <style>

      body{

     padding-top:50px;

     }

    .carousel{

     height:200px;

     background-color:#000;

     }

    .carousel.item{

     height::200px; 

     background-color:#000;

     }

    .carousel img{

    width:100%;

                }

     

    </style>

    </head>


    <body><nav class="navbar-inverse navbar-fixed-top" >

      <div>

        <!-- Brand and toggle get grouped for better mobile display -->

        <div>

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

            <span>Toggle navigation</span>

            <span></span>

            <span></span>

            <span></span>

          </button>

         

          <a href="#">信息技术学院</a>

        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->

        

        <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">

        

          <ul class="nav navbar-nav">

            <li><a href="#">首页</a></li>

            <li>

              <a href="#" class="active dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">功能 <span></span></a><!--得到功能按钮,后面加了一个小按钮的图标。-->

              <ul>

                            <li><a href="#">业务功能</a></li>

                            <li><a href="#">信息建立</a></li>

                            <li><a href="#">信息查询</a></li>

                            <li><a href="#">信息管理</a></li>

                            <li></li>

                            <li><a href="#">系统功能</a></li>

                            <li><a href="#">设置</a></li>

                        </ul>

            </li>

            <li class=""><a href="#">帮助</a></li>

          </ul>

       

          <form class="navbar-form navbar-right" role="search">

            <div>

              <input type="text" placeholder="用户名">

            </div>

             <div>

              <input type="password" placeholder="密码">

            </div>

            <button type="submit" class="btn btn-default">登录</button>

          </form>

          

        </div><!-- /.navbar-collapse -->

         <!--导航图中间的一些导航项目-->

      </div><!-- /.container-fluid -->

    </nav>

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

      <!-- Indicators -->

      <ol>

        <li data-target="#carousel-example-generic" data-slide-to="0"></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 role="listbox">

        <div class="item active">

          <img src="img/0.jpg" alt="1 slide">

          <div>

            信息安全项目

            <p>信息安全是*****</p>

           <p><a class="btn btn-lg btn-primary" href="http://www.beihua.edu.cn/" role="button" target="_blank">点击我下载</a></p>

          </div>

        </div>

        <div>

          <img src="img/1.jpg" alt="2 slide">

          <div>

           <h1>信息技术项目</h1>

           <p>信息技术是*****</p>

           <p><a class="btn btn-lg btn-primary" href="http://www.beihua.edu.cn/" role="button" target="_blank">点击我下载</a></p>

          </div>

          </div>

        <div>

          <img src="img/2.jpg" alt="3 slide">

          <div>

           智能化管理项目

           <p>智能化管理是*****</p>

           <p><a class="btn btn-lg btn-primary" href="http://www.beihua.edu.cn/" role="button" target="_blank">点击我下载</a></p>

          </div>

          </div>

       <div>

          <img src="img/3.jpg" alt="4 slide">

          <div>

            信息追踪技术项目

            <p>信息追踪技术是*****</p>

           <p><a class="btn btn-lg btn-primary" href="http://www.beihua.edu.cn/" role="button" target="_blank">点击我下载</a></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" aria-hidden="true"></span>

        <span>上一页</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>下一页</span>

      </a>

    </div>

    <script src="F:\bootstrap\js\jquery-1.11.1.js"></script>

    <script src="F:\bootstrap\js\jquery-1.11.1.min.js"></script>

    <script src="F:\bootstrap\js\bootstrap.min.js"></script>

    </body>

    </html>

    加了呀！！！！

    0 0
  • 慕用6681360
    2016-04-18 12:36:22

    你是不是忘记添加JS 了 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>，另外有没有给carousel这些设置样式

    0 0

基于bootstrap的网页开发

Bootstrap框架的基础教程，学会用Bootstrap前端框架搭建网页

187669 学习 · 734 问题

查看课程

相似问题

为什么我没有实现图片的滚动，求大神指点？

回答 2

求大神看一下 为什么我页面最下面老显示不全

回答 1

标签页的图片

回答 1

l老师：我的图片滚动广告全屏显示正常，但是小屏不正常了，求大神解答

回答 4

为什么我的图片不居中

回答 2

打开慕课网App查看更多内容