當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

BootStrap导航栏的使用

發(fā)布時(shí)間：2023/12/9 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 BootStrap导航栏的使用小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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

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

向 <nav> 標(biāo)簽添加 class .navbar、.navbar-default。
向上面的元素添加 role="navigation"，有助于增加可訪問(wèn)性。
向 <div> 元素添加一個(gè)標(biāo)題 class .navbar-header，內(nèi)部包含了帶有 class navbar-brand 的 <a> 元素。這會(huì)讓文本看起來(lái)更大一號(hào)。
為了向?qū)Ш綑谔砑渔溄?#xff0c;只需要簡(jiǎn)單地添加帶有 class .nav、.navbar-nav 的無(wú)序列表即可。

下面的實(shí)例演示了這點(diǎn)：

<!DOCTYPE html> <html> <head><title>Bootstrap 實(shí)例 - 默認(rèn)的導(dǎo)航欄</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><nav class="navbar navbar-default" role="navigation"><div class="navbar-header"><a class="navbar-brand" href="#">W3Cschool</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="#">另一個(gè)分離的鏈接</a></li></ul></li></ul></div> </nav></body> </html>

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

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

下面的實(shí)例演示了這點(diǎn)：

<!DOCTYPE html> <html> <head><title>Bootstrap 實(shí)例 - 響應(yīng)式的導(dǎo)航欄</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><nav class="navbar navbar-default" role="navigation"><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="#">W3Cschool</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="#">另一個(gè)分離的鏈接</a></li></ul></li></ul></div> </nav></body> </html>

導(dǎo)航欄中的表單

導(dǎo)航欄中的表單是使用 .navbar-form class。這確保了表單適當(dāng)?shù)拇怪睂?duì)齊和在較窄的視口中折疊的行為。使用對(duì)齊方式選項(xiàng)（這將在組件對(duì)齊方式部分進(jìn)行詳細(xì)講解）來(lái)決定導(dǎo)航欄中的內(nèi)容放置在哪里。

下面的實(shí)例演示了這點(diǎn)：

<!DOCTYPE html> <html> <head><title>Bootstrap 實(shí)例 - 導(dǎo)航欄中的表單</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><nav class="navbar navbar-default" role="navigation"><div class="navbar-header"><a class="navbar-brand" href="#">W3Cschool</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> </div> </nav></body> </html>

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

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

不要在 .navbar-nav 內(nèi)的 <a> 元素上使用 .navbar-btn，因?yàn)樗皇菢?biāo)準(zhǔn)的 button class。

下面的實(shí)例演示了這點(diǎn)：

<!DOCTYPE html> <html> <head><title>Bootstrap 實(shí)例 - 導(dǎo)航欄中的按鈕</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><nav class="navbar navbar-default" role="navigation"><div class="navbar-header"><a class="navbar-brand" href="#">W3Cschool</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> </nav></body> </html>

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

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

<!DOCTYPE html> <html> <head><title>Bootstrap 實(shí)例 - 導(dǎo)航欄中的文本</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><nav class="navbar navbar-default" role="navigation"><div class="navbar-header"><a class="navbar-brand" href="#">W3Cschool</a></div><div><p class="navbar-text">Signed in as Thomas</p></div> </nav></body> </html>

非導(dǎo)航鏈接

如果您不想在常規(guī)的導(dǎo)航欄導(dǎo)航組件內(nèi)使用標(biāo)準(zhǔn)的鏈接，那么請(qǐng)使用 class navbar-link 來(lái)為默認(rèn)的和倒轉(zhuǎn)的導(dǎo)航欄選項(xiàng)添加適當(dāng)?shù)念伾?#xff0c;如下面的實(shí)例所示：

<!DOCTYPE html> <html> <head><title>Bootstrap 實(shí)例 - 非導(dǎo)航鏈接</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><nav class="navbar navbar-default" role="navigation"><div class="navbar-header"><a class="navbar-brand" href="#">W3Cschool</a></div><div><p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Thomas</a></p></div> </div></body> </html>

組件對(duì)齊方式

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

<!DOCTYPE html> <html> <head><title>Bootstrap 實(shí)例 - 組件對(duì)齊方式</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><nav class="navbar navbar-default" role="navigation"><div class="navbar-header"><a class="navbar-brand" href="#">W3Cschool</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="#">另一個(gè)分離的鏈接</a></li></ul></li></ul><form class="navbar-form navbar-left" role="search"><button type="submit" class="btn btn-default">向左對(duì)齊-提交按鈕 </button></form> <p class="navbar-text navbar-left">向左對(duì)齊-文本</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="#">另一個(gè)分離的鏈接</a></li></ul></li></ul><form class="navbar-form navbar-right" role="search"><button type="submit" class="btn btn-default">向右對(duì)齊-提交按鈕</button></form> <p class="navbar-text navbar-right">向右對(duì)齊-文本</p></div> </nav></body> </html>

固定到頂部

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

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

為了防止導(dǎo)航欄與頁(yè)面主體中的其他內(nèi)容的頂部相交錯(cuò)，請(qǐng)向 <body> 標(biāo)簽添加至少 50 像素的內(nèi)邊距（padding），內(nèi)邊距的值可以根據(jù)您的需要進(jìn)行設(shè)置。 <!DOCTYPE html> <html> <head><title>Bootstrap 實(shí)例 - 固定到頂部</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><nav class="navbar navbar-default navbar-fixed-top" role="navigation"><div class="navbar-header"><a class="navbar-brand" href="#">W3Cschool</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="#">另一個(gè)分離的鏈接</a></li></ul></li></ul></div> </nav></body> </html>

固定到底部

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

<!DOCTYPE html> <html> <head><title>Bootstrap 實(shí)例 - 固定到底部</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"><div class="navbar-header"><a class="navbar-brand" href="#">W3Cschool</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="#">另一個(gè)分離的鏈接</a></li></ul></li></ul></div> </nav></body> </html>

靜態(tài)的頂部

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

<!DOCTYPE html> <html> <head><title>Bootstrap 實(shí)例 - 靜態(tài)的頂部</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><nav class="navbar navbar-default navbar-static-top" role="navigation"><div class="navbar-header"><a class="navbar-brand" href="#">W3Cschool</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="#">另一個(gè)分離的鏈接</a></li></ul></li></ul></div> </nav></body> </html>

倒置的導(dǎo)航欄

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

為了防止導(dǎo)航欄與頁(yè)面主體中的其他內(nèi)容的頂部相交錯(cuò)，請(qǐng)向 <body> 標(biāo)簽添加至少 50 像素的內(nèi)邊距（padding），內(nèi)邊距的值可以根據(jù)您的需要進(jìn)行設(shè)置。 <!DOCTYPE html> <html> <head><title>Bootstrap 實(shí)例 - 倒置的導(dǎo)航欄</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><nav class="navbar navbar-inverse" role="navigation"><div class="navbar-header"><a class="navbar-brand" href="#">W3Cschool</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="#">另一個(gè)分離的鏈接</a></li></ul></li></ul></div> </nav></body> </html>

轉(zhuǎn)載于:https://www.cnblogs.com/RRirring/p/5688625.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的BootStrap导航栏的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

bootstrap

上一篇： latex linux 安装,Linux
下一篇：电影推荐之《哈利·波特与火焰杯》隐私策