<!--这是一个导航条--> <!--这是导航的默认样式--> <!--navbar-fixed-top把导航条固定在顶部-->

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

<!--导航条的内容被container-fluid包裹着-->

<div class="container">

<div class="navbar-header">

<!--界面缩小时出现的图标按钮-->

<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="#">现代浏览器博物馆</a>

</div>

<!--点击图标按钮会弹出包裹着的导航条里的按钮-->

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

<!--导航条里的一些按钮-->

<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="">关于</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>

  <!-- 輪播的內容 -->

  <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>火狐浏览器一个开源网页浏览器</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>火狐浏览器一个开源网页浏览器</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>火狐浏览器一个开源网页浏览器</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;

}