为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/Bootstrap

/基于bootstrap的网页开发

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

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

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

05:39
ZhongXia

2016-04-17

源自：基于bootstrap的网页开发  3-5

关注问题 我要回答
1087
操作
收起

正在回答

3 回答

wuli香香公举
2016-07-21

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

0 回复 有任何疑惑可以回复我~
收起回答
ZhongXia 提问者
2016-04-18

<!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 回复 有任何疑惑可以回复我~
收起回答
慕用6681360
2016-04-18

你是不是忘记添加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/150
提交
取消
基于bootstrap的网页开发
  • 参与学习       187689    人
  • 解答问题       734    个

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

进入课程

本课相似问答

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

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

1 回答标签页的图片

2 回答为什么我的图片不居中

4 回答l老师：我的图片滚动广告全屏显示正常，但是小屏不正常了，求大神解答
搜索更多本课相关问答

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信