基于bootstrap的网页开发_技术问答

慕慕4033758

为什么不能实现自动轮播？

大兄弟，你逗我呢？我还特地运行了一下

谷歌，IE浏览器可以啊

2019-03-25 1回答·1124浏览

weixin_慕工程0352169

怎么让轮播图片显示完整呢？

.img-responsive{
width:100%;
height:100%;
}

但是图像会变形

2019-03-18 1回答·2199浏览

精慕门3212918

新手求问，轮播问题（）: 问题是什么？; 2018-12-20 1回答·1053浏览

丝血反杀闰土的猹

为什么我的不成轮播状？？？: item active多加了几个导致。。; 2018-09-23 1回答·1103浏览

qq_失眠眠_0

Safari这页白色的字在苹果里都看不见了怎么办？: 是不是图片放在了文字的上面？; 2018-09-17 3回答·1693浏览

慕无忌2439271

想问一下滚动条怎么设置啊，求代码

llllllll

2018-08-21 3回答·1736浏览

qq_山中无老虎_0

我这切换符怎么显现成这样！: 好了，查找了下，竟然是确实字体的缘故; 2018-08-07 1回答·1152浏览

qq_繁华_6

轮播图最大的div 和 item 的高度不能自适应

</div>要放在最外面其他的没问题

<!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>浏览器博物馆</title>
   <!-- Bootstrap -->
   <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
   <style type="text/css">
      .carousel {
         height: 500px;
         background: #000000;
      }

      .carousel .item {
         height: 500px;
         background: #000000;
      }

      .carousel img {
         width: 100%;
      }
   </style>
</head>
<body>

<!--定义导航栏-->
<div class="container">
   <nav class=" navbar-default navbar-inverse" role="navigation">
      <!--自适应宽度还是固定居中宽度  container-fluid/container-->

      <div class="navbar-header">
         <!--宽度变小后缩小成图标-->
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                 data-target="#bs-example-navbar-collapse-1">
            <!--意为：（仅供）屏幕阅读器，这个 class 主要用于增强 accessbility（可访问性）。-->
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <!--logo  商标-->
         <a class="navbar-brand" href="#">浏览器博物馆</a>

      </div>

      <!--缩小后可折叠-->

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

         <!--折叠的内容-->

         <ul class="nav navbar-nav" role="navigation">

            <li class="active"><a href="#">综述</a></li>

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

            <!--下拉菜单-->

            <li class="dropdown">

               <a href="#" class="dropdown-toggle" data-toggle="dropdown">特点<span class="caret"></span></a>


               <ul class="dropdown-menu" role="menu">

                  <!--<li class="divider"></li>  加横线-->

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

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

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

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

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

               </ul>

            </li>

            <li class="dropdown"><a href="#">关于</a></li>

         </ul>

      </div>


   </nav>


   <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="http://img.mukewang.com/5412ad400001e52014280484.jpg" alt="...">

            <div class="carousel-caption">
               ...
            </div>
         </div>
         <div class="item">
            <img src="http://img.mukewang.com/5412ad7c0001d2eb10880541.jpg" alt="...">
            <div class="carousel-caption">
               ...
            </div>
         </div>
         <div class="item">
            <img src="http://img.mukewang.com/5412ae5c0001653b12800644.jpg" alt="...">
            <div class="carousel-caption">
               ...
            </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">Previous</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">Next</span>
      </a>
   </div>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<script type="text/javascript">

   $(document).click(function () {

   })

</script>

</body>

</html>

2018-06-09 1回答·1765浏览

慕瓜411793

为什么轮播的左右箭头不显示，而且图片占满了整个屏幕，按照教程改了依然不变小，求各位大神解答，拜托拜托！！: 2018-06-01 2回答·2478浏览

慕侠1514483

轮播导航部分的问题: 亲，上代码; 2018-04-23 1回答·1252浏览

qq_褒姒baosi_0

用栅格做网页布局，想在一个背景图上放置其他图片或者字，该怎么做: 2018-04-12 2回答·1920浏览

潜狸

container位置不解: bootstrap提供2种响应式布局方式 .container和 .container-fluid，内容和栅格都要放到它们之间才能实现响应式布局。
所以涉及到响应式布局时放到container容器中; 2018-03-21 1回答·1113浏览

web小试牛刀

为什么窗口缩小，轮播和图片都变小了，字体不变小！: 你用的是响应式布局吗？不是的话建议用一下响应式布局，不过你这种字体不变小也是尴尬啊; 2018-01-30 1回答·1664浏览

qq_七和八噪_0

我缩小屏幕，图片上的文字不会变小，点击下载也不变小，怎么办，把文字全挤没了: 有一种单位叫vw，vh，用他们做单位可以随视窗大小变化而变化，你可以百度查一下; 2018-01-23 1回答·715浏览

qq_伪善_2

bootstrap4

eclipse中web项目中总有红叉叉显示js文件中有错误

项目的properties>builder>JavaScriptVaidator,

１、首先在problem>errors中删除所有js错误:

２、然后再勾选掉javascript Validator：

3、clean下项目

2017-10-30 1回答·1380浏览

qq_发如雪_3

手机端不适应: 布局有问题; 2017-09-20 1回答·1038浏览

qq_发如雪_3

图片铺不满

body{

padding-top:50px;

}

.carousel{

height:400px;

background-color:#000;

}

.carousel.item{

height:400px;

background-color:#000;

}

.carousel. item img{

width:100%;

height:400px;

}

这样子哪里有问题

2017-09-20 2回答·1375浏览

qq_海绵宝宝派大星QAQ_04346542

为什么我设置.carousel .item为黑色整个网页都变成黑色的了？: 2017-08-24 2回答·1415浏览

qq_海绵宝宝派大星QAQ_04346542

为什么轮播图的左右箭头显示不出来

无法显示是因为字体缺失，浏览器找不到字体

下载bootstrap解压之后有一个fonts文件夹，按如图路径放就可以了 //img1.sycdn.imooc.com/59e57915000187dd04770170.jpg

2017-08-24 2回答·5248浏览

qq_暖絮_0

图片上的箭头显示不出来是怎么回事啊？: 谢谢啦，是因为文档名整错了。; 2017-07-26 2回答·2284浏览

Me小前端

为什么我写的这个和老师写的不一样呢？: 因为你不认真听课; 2017-07-12 1回答·993浏览

慕无忌0825444

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

这个代码不是一点点问题啊，先来随便说几个:1.很乱；2.有的标签没有闭合；3.该用结构你没用，该用的类你没用；4.有的东西用错了。

如果你正确引用如下格式，并仔细的把代码敲完整了，标签闭合了

<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="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </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">Previous</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">Next</span>
  </a>
</div>

那就应该是我这样的

<div id="ad-carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#ad-carousel" data-slide-to="0" class="active"></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 class="carousel-inner">
    <div class="item active"> <img src="images/chrome-big.jpg" alt="1 slide">
      <div class="container">
        <div class="carousel-caption">
          <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 class="item"> <img src="images/firefox-big.jpg" alt="2 slide">
      <div class="container">
        <div class="carousel-caption">
          <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 class="item"> <img src="images/safari-big.jpg" alt="3 slide">
      <div class="container">
        <div class="carousel-caption">
          <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 class="item"> <img src="images/opera-big.jpg" alt="4 slide">
      <div class="container">
        <div class="carousel-caption">
          <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 class="item"> <img src="images/ie-big.jpg" alt="5 slide">
      <div class="container">
        <div class="carousel-caption">
          <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>

其实最主要的问题是你的结构和代码语言的不完整，还在漏标签，应该是新手吧，要仔细一点哟！希望对你有帮助。

2017-07-05 2回答·1554浏览