輪播圖最大的div 和 item 的高度不能自適應
<!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="css/bootstrap.min.css" rel="stylesheet">
? ? <!--[if lt IE 9]>
? ? ? <script src="js/html5shiv.min.js"></script>
? ? ? <script src="js/respond.min.js"></script>
? ? <![endif]-->
? ??
? ??
? ? <style type="text/css">
? ? ?.carousel{
? ? ?height: 500px;
? ? ?background: #000000;
? ? ?}
? ? ?
? ? ?.carousel .item{
? ? ?height: 500px;
? ? ?background: #000000;
? ? ?}
? ? ?
? ? ?.carousel img{
? ? ?width: 100%;
? ? ?}
? ? </style>
? </head>
? <body>
? ? <!--定義導航欄-->
? ? <nav class=" navbar-default navbar-inverse" role="navigation">
? ? ?<!--自適應寬度還是固定居中寬度? container-fluid/container-->
? ? <div class="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>
? ? </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="images/chrome-big.jpg" alt="...">
? ? ? <div class="carousel-caption">
? ? ? ? ...
? ? ? </div>
? ? </div>
? ? <div class="item">
? ? ? <img src="images/firefox-big.jpg" alt="...">
? ? ? <div class="carousel-caption">
? ? ? ? ...
? ? ? </div>
? ? </div>
? ??
? ? <div class="item">
? ? ? <img src="images/opera-big.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>
? ??
? ??
? ??
? ??
? ??
? ??
? ??
? ??
? ??
? ? <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
? ? <script src="js/jquery-1.11.1.min.js"></script>
? ? <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
? ? <script src="js/bootstrap.min.js"></script>
? ??
? ? <script type="text/javascript">
? ? ?$(document).click(function(){
? ??
? ? ?})
? ? </script>
? </body>
</html>
2018-06-11
<div class="container">
</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?/> ???<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://img1.sycdn.imooc.com//5412ad400001e52014280484.jpg"?alt="..."> ????????????<div?class="carousel-caption"> ???????????????... ????????????</div> ?????????</div> ?????????<div?class="item"> ????????????<img?src="http://img1.sycdn.imooc.com//5412ad7c0001d2eb10880541.jpg"?alt="..."> ????????????<div?class="carousel-caption"> ???????????????... ????????????</div> ?????????</div> ?????????<div?class="item"> ????????????<img?src="http://img1.sycdn.imooc.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>