我的上一页,下一页的箭头不显示是什么原因呢

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

柚_114

2016-06-23 16:52

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

    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->

    <title>Bootstrap 101 Template</title>


    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <style>

  body{ padding-top:50px;}

  .carousel{ height:500px; margin-bottom:60px;}

  .carousel .item{ height:500px;}

  .carousel .item img{ width:100%;}

    /* 响应式布局 */


        @media (max-width: 768px) {


            .summary {

                padding-right: 3px;

                padding-left: 3px;

            }


            .carousel {

                height: 300px;

                margin-bottom: 30px;

            }


            .carousel .item {

                height: 300px;

            }


            .carousel img {

                min-height: 300px;

            }


            .carousel-caption p {

                font-size: 16px;

                line-height: 1.4;

            }


            .feature-heading {

                font-size: 34px;

            }


            .feature-heading .text-muted {

                font-size: 22px;

            }

        }


        @media (min-width: 992px) {

            .feature-heading {

                margin-top: 120px;

            }

        }  /* 响应式布局 */


        @media (max-width: 768px) {


            .summary {

                padding-right: 3px;

                padding-left: 3px;

            }


            .carousel {

                height: 300px;

                margin-bottom: 30px;

            }


            .carousel .item {

                height: 300px;

background-color: #000;

            }


            .carousel img {

                min-height: 300px;

            }


            .carousel-caption p {

                font-size: 16px;

                line-height: 1.4;

            }


            .feature-heading {

                font-size: 34px;

            }


            .feature-heading .text-muted {

                font-size: 22px;

            }

        }


        @media (min-width: 992px) {

            .feature-heading {

                margin-top: 120px;

            }

        }

  </style>

  <body>

   <nav class="navbar 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" aria-expanded="false">

        <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="#">综述 <span>(current)</span></a></li>

        <li><a href="#">简述</a></li>

        <li>

          <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">特点 <span></span></a>

          <ul>

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li role="separator"></li>

            <li><a href="#">Separated link</a></li>

            <li role="separator"></li>

            <li><a href="#">One more separated link</a></li>

          </ul>

        </li>

        <li><a href="#" title="" data-toggle="modal" data-target="#about-modal">关于</a></li>

      </ul>

     

      

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

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

</nav>

<!--轮播-->

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

    <ol>

        <li data-target="#ad-carousel" data-slide-to="0"></li>

        <li data-target="#ad-carousel" data-slide-to="1"></li>

        <li data-target="#ad-carousel" data-slide-to="2"></li>

        <li data-target="#ad-carousel" data-slide-to="3"></li>

        <li data-target="#ad-carousel" data-slide-to="4"></li>

    </ol>

    <div>

        <div class="item active">

            <img src="images/chrome-big.jpg" alt="1 slide">

            <div>

                <div>

                    <h1>Chrome</h1>


                    <p>Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。</p>


                    <p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/"

                          role="button" target="_blank">点我下载</a></p>

                </div>

            </div>

        </div>

        <div>

            <img src="images/chrome-big.jpg" alt="2 slide">

            <div>

                <div>

                    <h1>Firefox</h1>


                    <p>Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器。</p>


                    <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank"

                          role="button">点我下载</a></p>

                </div>

            </div>

        </div>

        <div>

            <img src="images/safari-big.jpg" alt="3 slide">

            <div>

                <div>

                    <h1>Safari</h1>


                    <p>Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>


                    <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank"

                          role="button">点我下载</a></p>

                </div>

            </div>

        </div>

        <div>

            <img src="images/opera-big.jpg" alt="4 slide">


            <div>

                <div>

                    <h1>Opera</h1>


                    <p>Opera浏览器,是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>


                    <p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank"

                          role="button">点我下载</a></p>

                </div>

            </div>

        </div>

        <div>

            <img src="images/ie-big.jpg" alt="5 slide">


            <div>

                <div>

                    <h1>IE</h1>


                    <p>Internet Explorer,简称 IE,是微软公司推出的一款网页浏览器。</p>


                    <p><a class="btn btn-lg btn-primary" href="http://ie.microsoft.com/" target="_blank"

                          role="button">点我下载</a></p>

                </div>

            </div>

        </div>

    </div>

    <a class="left carousel-control" href="#ad-carousel" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left"></span>

    </a>

    <a class="right carousel-control" href="#ad-carousel" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right"></span>

    </a>

</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

     <script src="js/jquery-1.11.1.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

   

  </body>

</html>


写回答 关注

2回答

  • chendidi
    2016-07-04 20:21:50

    我知道为什么了,需要在你的项目中新建一个文件夹,名字为“fonts”,然后将bootstrap根目录中的fonts文件夹下的东西拷贝过来就ok了。前提是bootstrap是从官网下载的3版本的。

  • EricPan
    2016-06-23 22:28:55

    576bf2130001522505000090.jpg

    576bf21300019a4e05000089.jpg

    你少写了代码

    chendi...

    我也出现和楼主一样的问题,但看你的回答解决办法,应该没用,因为我的代码和你的一样的,箭头还是不显示

    2016-07-04 20:13:09

    共 1 条回复 >

基于bootstrap的网页开发

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

187668 学习 · 734 问题

查看课程

相似问题