<nav class="navbar navbar-default">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">次页</a></li>
        <li><a href="#">三页</a></li>
    </ul>
    <p class="navbar-text">我是文本</p>
    <form class="navbar-form navbar-right">
        <div class="input-group">
            <input class="form-control">
            <div class="input-group-btn">
                <button class="btn btn-default">
                    搜索
                    <span style='margin-left: 10px'class="glyphicon glyphicon-search"></span>
                </button>
            </div>
        </div>
    </form>
</nav>
                    

<ol class="breadcrumb">
    <li><a href="#">礼服</a></li>
    <li><a href="#">男装</a></li>
    <li><a href="#">童装</a></li>
</ol>
                    

1. 礼服
2. 男装
3. 童装

<ol class="pager">
    <li class="previous"><a href="#"><<</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="next"><a href="#">>></a></li>
</ol>
                    

1. <<
2. 1
3. 2
4. 3
5. >>

<ul class="nav nav-tabs">
    <li><a href="#t1">第一部分</a></li>
    <li><a href="#t2">第二部分</a></li>
    <li><a href="#t3">第三部分</a></li>
</ul>
<div data-spy="scroll" data-offset="70" style="height:200px;overflow: scroll" >
    <h1 id="t1">第一部分内容</h1>
    <p>第一部分内容</p>
    <h1 id="t2">第二部分内容</h1>
    <p>第二部分内容</p>
    <h1 id="t3">第三部分内容</h1>
    <p>第三部分内容</p>
</div>
                    

• 第一部分
• 第二部分
• 第三部分

<div id="carousel" class=" carousel slide" data-ride="carousel" data-interval="1000">
    <ol class="carousel-indicators">
        <li class="active" data-target="#carousel" data-slide-to="0"></li>
        <li data-target="#carousel" data-slide-to="1" ></li>
        <li data-target="#carousel" data-slide-to="2" ></li>
    </ol>
    <div class="carousel-inner">
        <img class="item active img-responsive" src="Naruto.jpg">
        <img class="item img-responsive" src="Naruto.jpg">
        <img class="item img-responsive" src="Naruto.jpg">
    </div>
    <a href="#carousel" data-slide="prev" class="carousel-control left" ><span class="glyphicon glyphicon-chevron-left"></span> </a>
    <a href="#carousel" data-slide="next" class='carousel-control right'><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
                    

<div class="thumbnail">
    <img src="Naruto.jpg" class="img-responsive">
    <div class="caption">
        <h3>缩略图介绍</h3>
        <p>一小段内容的讲解</p>
    </div>
</div>
                    

悬浮本身意义不大，主要的用途是悬浮式侧面导航栏。要结合导航栏的相关，在综合应用中提及。