引用bootstrap的图标无法显示

引用bootstrap的图标无法显示

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

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

<link rel="stylesheet" type="text/css" href="css/css.css">

<script type="text/javascript" src="js/Jquery3.3.3.js"></script>

<script type="text/javascript" src="js/bootstrap.js"></script>

</head>

<body>

<header>

<nav class="navbar navbar-default">

  <div class="container-fluid">

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

    <div class="navbar-header">

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

        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <img src="img/logo.png" alt="" class="logo">

    </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 class="active"><a href="#">首页</a></li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">生日 <span class="caret"></span></a>

          <ul class="dropdown-menu">

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

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

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

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

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

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

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

          </ul>

        </li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">婚礼 <span class="caret"></span></a>

          <ul class="dropdown-menu">

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

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

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

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

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

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

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

          </ul>

        </li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">专用 <span class="caret"></span></a>

          <ul class="dropdown-menu">

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

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

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

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

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

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

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

          </ul>

        </li>

      </ul>

      <ul class="nav navbar-nav navbar-right">

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

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></a>

          <ul class="dropdown-menu">

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

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

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

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

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

          </ul>

        </li>

      </ul>

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

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

</nav>

</header>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2019-05-06 14:40:43

同学你好, 老师这边使用在线的bootstrap测试同学的代码是可以显示出来的哦。示例:

http://img1.sycdn.imooc.com//climg/5ccfd5d60001892115880095.jpg

效果图:

http://img1.sycdn.imooc.com//climg/5ccfd60000016a8219200063.jpg

同学可以检查一下是不是引入文件的路径问题, 或者是其他css文件中设置的样式影响的.

如果还是无法显示,建议:同学将你写的完整代码以及目录文件夹的截图粘贴过来,便于准确的定位和解决问题。

如果帮助到了你,欢迎采纳!

祝学习愉快~~~

  • 提问者 饥饿的坏孩子 #1
    是要把下载的bootstrap-3.3.7-dist整个文件夹放进自己的demo文件里再引入吗,我试了一下把整个文件拷贝进去,再引入里面的bootstrap.css就可以了
    2019-05-06 15:07:23
  • 是要把整个文件夹放到自己的demo文件里再引入。 同学自己尝试动手解决了,很棒哦! 继续加油~~
    2019-05-06 15:56:08
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师