<!--這是一個導(dǎo)航條--> <!--這是導(dǎo)航的默認樣式--> <!--navbar-fixed-top把導(dǎo)航條固定在頂部-->

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

<!--導(dǎo)航條的內(nèi)容被container-fluid包裹著-->

<div class="container">

<div class="navbar-header">

<!--界面縮小時出現(xiàn)的圖標按鈕-->

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

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

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

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

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

</button>

<!--商標或者logo-->

<a class="navbar-brand" href="#">現(xiàn)代瀏覽器博物館</a>

</div>

<!--點擊圖標按鈕會彈出包裹著的導(dǎo)航條里的按鈕-->

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

<!--導(dǎo)航條里的一些按鈕-->

<ul class="nav navbar-nav">

<li class="active"><a href="">綜述</a></li>

<li><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><a href="#">123</a></li>

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

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

<li class="divider"></li>d

<li><a href="#w">123</a></li>

</ul>

</li>

<li><a href="">關(guān)于</a></li>

</ul>

</div>

</div>

</nav>

<!--輪播圖-->

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

? <!-- 小點點 -->

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

? <!-- 輪播的內(nèi)容 -->

? <div class="carousel-inner" role="listbox">

? ? <div class="item active">

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

? ? ? <div class="carousel-caption" alt="1 slide">

? ? ? ? 123

? ? ? </div>

? ? </div>

? ? <div class="item">

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

? ? ? <div class="carousel-caption">

? ? ? 1234

? ? ? </div>

? ? </div>

? ? <div class="item">

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

? ? ? <div class="carousel-caption">

? ? ? 1235

? ? ? </div>

? ? </div>

? </div>

? <!-- 向左向右的按鈕 -->

? <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 class="container" id="summary-container">

<div class="row">

<div class="col-md-4">

<img src="../img/images/chrome-logo-small.jpg" />

<h2>chrome</h2>

<p>火狐瀏覽器一個開源網(wǎng)頁瀏覽器</p>

<p><a class="btn btn-default" href="#" role="button">點我下載</a></p>

</div>

<div class="col-md-4">

<img src="../img/images/chrome-logo-small.jpg" />

<h2>chrome</h2>

<p>火狐瀏覽器一個開源網(wǎng)頁瀏覽器</p>

<p><a class="btn btn-default" href="#" role="button">點我下載</a></p>

</div>

<div class="col-md-4">

<img src="../img/images/chrome-logo-small.jpg" />

<h2>chrome</h2>

<p>火狐瀏覽器一個開源網(wǎng)頁瀏覽器</p>

<p><a class="btn btn-default" href="#" role="button">點我下載</a></p>

</div>

</div>

<hr>

</div>

CSS樣式：

body{

padding-top: 50px;

}

.carousel{

height: 500px;

background-color: #000000;

margin-bottom: 60px;

}

.carousel .item{

height: 500px;

background-color: #000000;

}

.carousel img{

width: 100%;

}

.carousel-caption{

margin-bottom: 20px;

font-size: 20px;

line-height: 1.8;

}

?#summary-container .col-md-4{

text-align: center;

}