创建一个简单的水平导航栏，可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类。

.nav-justified 类可以设置导航项齐行等宽显示。
.nav-pills 类可以将导航项设置成胶囊形状。
.flex-column 类用于创建垂直导航
.justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐。 这个对导航栏无效


动态选项卡。选项卡是动态可切换的，可以在每个链接上添加 data-toggle="tab" 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类，淡入效果可以在 .tab-pane 后添加 .fade类。胶囊状动态选项卡只需要将以上实例的代码中 data-toggle 属性设置为 data-toggle="pill"。

<div class="tabbable" id="tabs-761376">
	<ul class="nav nav-tabs">
		<li class="active">
			<a href="#panel-296123" data-toggle="tab">Section 1</a>
		</li>
        <li>
	        <a href="#panel-364654" data-toggle="tab">Section 2</a>
		</li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane active" id="panel-296123">
			<p>
				I'm in Section 1.
			</p>
		</div>
		<div class="tab-pane" id="panel-364654">
			<p>
				Howdy, I'm in Section 2.
			</p>
		</div>
	</div>
</div>