Bootstrap 菜鳥教程

Bootstrap 插件

Bootstrap 面包屑導(dǎo)航 Bootstrap 導(dǎo)航元素

Bootstrap 導(dǎo)航欄

導(dǎo)航欄是一個很好的功能，是 Bootstrap 網(wǎng)站的一個突出特點。導(dǎo)航欄在您的應(yīng)用或網(wǎng)站中作為導(dǎo)航頁頭的響應(yīng)式基礎(chǔ)組件。導(dǎo)航欄在移動設(shè)備的視圖中是折疊的，隨著可用視口寬度的增加，導(dǎo)航欄也會水平展開。在 Bootstrap 導(dǎo)航欄的核心中，導(dǎo)航欄包括了站點名稱和基本的導(dǎo)航定義樣式。

默認(rèn)的導(dǎo)航欄

創(chuàng)建一個默認(rèn)的導(dǎo)航欄的步驟如下：

向 <nav> 標(biāo)簽添加 class .navbar、.navbar-default。
向上面的元素添加 role="navigation"，有助于增加可訪問性。
向 <div> 元素添加一個標(biāo)題 class .navbar-header，內(nèi)部包含了帶有 class navbar-brand 的 <a> 元素。這會讓文本看起來更大一號。
為了向?qū)Ш綑谔砑渔溄樱恍枰唵蔚靥砑訋в?class .nav、.navbar-nav 的無序列表即可。

下面的示例演示了這點：

在線示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 示例 - 默認(rèn)的導(dǎo)航欄</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
	<div class="navbar-header">
		<a class="navbar-brand" href="#">菜鳥教程</a>
	</div>
	<div>
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">iOS</a></li>
			<li><a href="#">SVN</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					Java
					<b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
					<li><a href="#">jmeter</a></li>
					<li><a href="#">EJB</a></li>
					<li><a href="#">Jasper Report</a></li>
					<li class="divider"></li>
					<li><a href="#">分離的鏈接</a></li>
					<li class="divider"></li>
					<li><a href="#">另一個分離的鏈接</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>
</body>
</html>

測試看看 ?/?

結(jié)果如下所示：

響應(yīng)式的導(dǎo)航欄

為了給導(dǎo)航欄添加響應(yīng)式特性，您要折疊的內(nèi)容必須包裹在帶有 class .collapse、.navbar-collapse 的 <div> 中。折疊起來的導(dǎo)航欄實際上是一個帶有 class .navbar-toggle 及兩個 data- 元素的按鈕。第一個是 data-toggle，用于告訴 JavaScript 需要對按鈕做什么，第二個是 data-target，指示要切換到哪一個元素。三個帶有 class .icon-bar 的 <span> 創(chuàng)建所謂的漢堡按鈕。這些會切換為 .nav-collapse <div> 中的元素。為了實現(xiàn)以上這些功能，您必須包含 Bootstrap 折疊(Collapse)插件。

下面的示例演示了這點：

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 示例 - 響應(yīng)式的導(dǎo)航欄</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
            <span class="sr-only">切換導(dǎo)航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">菜鳥教程</a>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分離的鏈接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一個分離的鏈接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div></nav>
</body>
</html>

測試看看 ?/?

結(jié)果如下所示：

導(dǎo)航欄中的按鈕

您可以使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按鈕，按鈕在導(dǎo)航欄上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。

不要在 .navbar-nav 內(nèi)的 <a> 元素上使用 .navbar-btn，因為它不是標(biāo)準(zhǔn)的 button class。

下面的示例演示了這點：

在線示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>Bootstrap 示例 - 導(dǎo)航欄中的按鈕</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鳥教程</a>
    </div>
    <div>
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">提交按鈕</button>
        </form>
        <button type="button" class="btn btn-default navbar-btn">
            導(dǎo)航欄按鈕
        </button>
    </div>
	</div>
</nav>
</body>
</html>

測試看看 ?/?

結(jié)果如下所示：

導(dǎo)航欄中的文本

如果需要在導(dǎo)航中包含文本字符串，請使用 class .navbar-text。這通常與 <p> 標(biāo)簽一起使用，確保適當(dāng)?shù)那皩?dǎo)和顏色。下面的示例演示了這點：

在線示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>Bootstrap 示例 - 導(dǎo)航欄中的文本</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鳥教程</a>
    </div>
    <div>
        <p class="navbar-text">Nhooo 用戶登錄</p>
    </div>
	</div>
</nav>
</body>
</html>

測試看看 ?/?

結(jié)果如下所示：

結(jié)合圖標(biāo)的導(dǎo)航鏈接

如果您想在常規(guī)的導(dǎo)航欄導(dǎo)航組件內(nèi)使用圖標(biāo)，那么請使用 class glyphicon glyphicon-* 來設(shè)置圖標(biāo)，更多請查看 Bootstrap 圖標(biāo) ，如下面的示例所示：

在線示例

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 示例 - 非導(dǎo)航鏈接</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">菜鳥教程</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注冊</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登錄</a></li>
    </ul>
  </div>
</nav>
</body>
</html>

測試看看 ?/?

結(jié)果如下所示：

組件對齊方式

您可以使用實用工具 class .navbar-left 或 .navbar-right 向左或向右對齊導(dǎo)航欄中的 導(dǎo)航鏈接、表單、按鈕或文本 這些組件。這兩個 class 都會在指定的方向上添加 CSS 浮動。下面的示例演示了這點：

在線示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>Bootstrap 示例 - 組件對齊方式</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鳥教程</a>
    </div>
    <div>
        <!--向左對齊-->
        <ul class="nav navbar-nav navbar-left">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分離的鏈接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一個分離的鏈接</a></li>
                </ul>
            </li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
            <button type="submit" class="btn btn-default">
                向左對齊-提交按鈕
            </button>
        </form>
        <p class="navbar-text navbar-left">向左對齊-文本</p>
        <!--向右對齊-->
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分離的鏈接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一個分離的鏈接</a></li>
                </ul>
            </li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
            <button type="submit" class="btn btn-default">
                向右對齊-提交按鈕
            </button>
        </form>
        <p class="navbar-text navbar-right">向右對齊-文本</p>
    </div>
	</div>
</nav>
</body>
</html>

測試看看 ?/?

結(jié)果如下所示：

固定到頂部

Bootstrap 導(dǎo)航欄可以動態(tài)定位。默認(rèn)情況下，它是塊級元素，它是基于在 HTML 中放置的位置定位的。通過一些幫助器類，您可以把它放置在頁面的頂部或者底部，或者您可以讓它成為隨著頁面一起滾動的靜態(tài)導(dǎo)航欄。

如果您想要讓導(dǎo)航欄固定在頁面的頂部，請向 .navbar class 添加 class .navbar-fixed-top。下面的示例演示了這點：

為了防止導(dǎo)航欄與頁面主體中的其他內(nèi)容的頂部相交錯，請向 <body> 標(biāo)簽添加至少 50 像素的內(nèi)邊距(padding)，內(nèi)邊距的值可以根據(jù)您的需要進(jìn)行設(shè)置。

在線示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>Bootstrap 示例 - 固定到頂部</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
        <a class="navbar-brand" href="#">菜鳥教程</a> 
    </div> 
    <div> 
        <ul class="nav navbar-nav"> 
            <li class="active"><a href="#">iOS</a></li> 
            <li><a href="#">SVN</a></li> 
            <li class="dropdown"> 
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
                    Java <b class="caret"></b> 
                </a> 
                <ul class="dropdown-menu"> 
                    <li><a href="#">jmeter</a></li> 
                    <li><a href="#">EJB</a></li> 
                    <li><a href="#">Jasper Report</a></li> 
                    <li class="divider"></li> 
                    <li><a href="#">分離的鏈接</a></li> 
                    <li class="divider"></li> 
                    <li><a href="#">另一個分離的鏈接</a></li> 
                </ul> 
            </li> 
        </ul> 
    </div> 
    </div> 
</nav>
</body>
</html>

測試看看 ?/?

結(jié)果如下所示：

固定到底部

如果您想要讓導(dǎo)航欄固定在頁面的底部，請向 .navbar class 添加 class .navbar-fixed-bottom。下面的示例演示了這點：

在線示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>Bootstrap 示例 - 固定到底部</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
	<div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鳥教程</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分離的鏈接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一個分離的鏈接</a></li>
                </ul>
            </li>
        </ul>
    </div>
	</div>
</nav>
</body>
</html>

測試看看 ?/?

結(jié)果如下所示：

靜態(tài)的頂部

如需創(chuàng)建能隨著頁面一起滾動的導(dǎo)航欄，請?zhí)砑?.navbar-static-top class。該 class 不要求向 <body> 添加內(nèi)邊距(padding)。

在線示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>Bootstrap 示例 - 靜態(tài)的頂部</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鳥教程</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分離的鏈接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一個分離的鏈接</a></li>
                </ul>
            </li>
        </ul>
    </div>
	</div>
</nav>
</body>
</html>

測試看看 ?/?

結(jié)果如下所示：

反色的導(dǎo)航欄

為了創(chuàng)建一個帶有黑色背景白色文本的反色的導(dǎo)航欄，只需要簡單地向 .navbar class 添加 .navbar-inverse class 即可，如下面的示例所示：

在線示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>Bootstrap 示例 - 倒置的導(dǎo)航欄</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
	<div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鳥教程</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分離的鏈接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一個分離的鏈接</a></li>
                </ul>
            </li>
        </ul>
    </div>
	</div>
</nav>
</body>
</html>

測試看看 ?/?

結(jié)果如下所示：

Bootstrap 面包屑導(dǎo)航 Bootstrap 導(dǎo)航元素