Bootstrap響應式前端框架筆記十——導航欄相關組件

Bootstrap響應式前端框架筆記十——導航欄相關組件

    Bootstrap中提供的導航欄分爲兩種模式，使用nav-tabs類能夠建立頁卡模式的導航欄，使用nav-pills類能夠建立膠囊模式的導航欄，示例以下：

<p>導航分爲兩種，頁卡模式和膠囊模式</p>
		<p>頁卡模式</p
		<ul class="nav nav-tabs">
			<li class="active"><a>主頁</a></li>
			<li><a>活動</a></li>
			<li><a>留言</a></li>
		</ul>
		<hr />
		<p>膠囊模式</p>
		<ul class="nav nav-pills">
			<li class="active"><a>主頁</a></li>
			<li><a>活動</a></li>
			<li><a>留言</a></li>
		</ul>

效果以下圖：

針對膠囊式導航，也能夠設置其排列方向爲堆疊，添加nav-stacked類便可，示例以下：

<p>堆疊排列的膠囊導航</p>
		<ul class="nav nav-pills nav-stacked">
			<li class="active"><a>主頁</a></li>
			<li><a>活動</a></li>
			<li><a>留言</a></li>
		</ul>

效果以下：

    導航中也能夠進行下拉菜單的嵌套，示例以下：

<p>導航中嵌套下拉菜單</p>
		<ul class="nav nav-pills">
			<li><a>主頁</a></li>
			<li><a>活動</a></li>
			<li><a>留言</a></li>
			<li class="dropdown active">
				<a class="dropdown-toggle">
					更多
					<span class="caret"></span>
				</a>
				<ul class="dropdown-menu">
					<li><a>我的中心</a></li>
					<li><a>設置</a></li>
					<li><a>退出</a></li>
				</ul>
			</li>
		</ul>

效果以下圖所示：

    除了默認的導航欄組件，Bootstrap中還支持自定義導航條，使用navbar類能夠建立導航條容器，其內能夠佈局圖標，文本，按鈕和表單等，示例以下：

<p>自定義導航條</p>
		<nav class="navbar navbar-default">
			<div class="container">
				<div class="navbar-header">
					<a class="navbar-brand"><img src="image/icon.png" width="20px" /></a>
				</div>
				<form class="navbar-form navbar-left">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="Search">
					</div>
					<button class="btn btn-default">Search</button>
				</form>
				<button class="btn btn-warning navbar-btn navbar-left">提示</button>
				<p class="navbar-text">導航文本</p>
			</div>
		</nav>

效果以下圖：

使用navbar-fixed-top類或者navbar-fixed-bottom類能夠將導航條固定在頂部或底部，示例以下：

<p>將導航欄固定在頂部</p>
		<nav class="navbar navbar-default navbar-fixed-top">
			<div class="container">
				<div class="navbar-header">
					<a class="navbar-brand"><img src="image/icon.png" width="20px" /></a>
				</div>
				<form class="navbar-form navbar-left">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="Search">
					</div>
					<button class="btn btn-default">Search</button>
				</form>
				<button class="btn btn-warning navbar-btn navbar-left">提示</button>
				<p class="navbar-text">導航文本</p>
			</div>
		</nav>
		<hr />
		<p>將導航欄固定在底部</p>
		<nav class="navbar navbar-default navbar-fixed-bottom">
			<div class="container">
				<div class="navbar-header">
					<a class="navbar-brand"><img src="image/icon.png" width="20px" /></a>
				</div>
				<form class="navbar-form navbar-left">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="Search">
					</div>
					<button class="btn btn-default">Search</button>
				</form>
				<button class="btn btn-warning navbar-btn navbar-left">提示</button>
				<p class="navbar-text">導航文本</p>
			</div>
		</nav>

使用navbar-inverse類能夠將導航條進行反色處理，示例以下：

<p>將導航條進行反色處理</p>
		<nav class="navbar navbar-default navbar-inverse">
			<div class="container">
				<div class="navbar-header">
					<a class="navbar-brand"><img src="image/icon.png" width="20px" /></a>
				</div>
				<form class="navbar-form navbar-left">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="Search">
					</div>
					<button class="btn btn-default">Search</button>
				</form>
				<button class="btn btn-warning navbar-btn navbar-left">提示</button>
				<p class="navbar-text">導航文本</p>
			</div>
		</nav>

效果以下圖：

    Bootstrap也支持進行路徑導航的建立，其須要使用有序列表配合breadcrumb類，示例以下：

<p>進行路徑導航的建立</p>
		<ol class="breadcrumb">
			<li>
				<a href="#">主頁</a>
			</li>
			<li>
				<a href="#">新聞列表</a>
			</li>
			<li class="active">國際新聞</li>
		</ol>

效果以下圖：

   另外，本篇博客中全部的實例代碼及顯示效果，在以下地址中，須要的能夠自行對照學習。

http://zyhshao.github.io/bootStrapDemo/navigation.html。

前端學習新人，有志同道合的朋友，歡迎交流與指導，QQ羣:541458536