Bootstrap導(dǎo)航條的使用和理解3
以下理論內(nèi)容copy自Bootstrap中文網(wǎng) (一個不錯的bootstrap學(xué)習網(wǎng)站)
導(dǎo)航條
默認樣式的導(dǎo)航條
導(dǎo)航條是在您的應(yīng)用或網(wǎng)站中作為導(dǎo)航頁頭的響應(yīng)式基礎(chǔ)組件。它們在移動設(shè)備上可以折疊(并且可開可關(guān)),且在視口(viewport)寬度增加時逐漸變?yōu)樗秸归_模式。
以下代碼和注釋是我學(xué)習過程中的理解
(注意 引入必要的.css 和 .js查看)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 導(dǎo)航條模板</title> <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-default"> <!-- <div class="container-fluid"> --> <!-- 將 100% 寬度的布局轉(zhuǎn)換為固定寬度的柵格布局。 --> <div class="container"> <!-- 品牌商標 和 獲得更好的移動分組顯示--> <!-- .navbar-header元素里放了一個button按鈕和一個a鏈接 先說簡單的a鏈接,用于放置網(wǎng)頁logo,導(dǎo)航欄上通常都需要 button按鈕 是一個開關(guān),當在移動設(shè)備上顯示是,導(dǎo)航條一行顯示不完,導(dǎo)航具體內(nèi)容部分變會崩塌原有的顯示形式,收集為多行顯示,并隱藏,使用button 按鈕可控制其(顯示/隱藏) --> <!-- Brand and toggle get grouped for better mobile display --> <!-- 以下導(dǎo)航頭部 --> <div class="navbar-header"> <!-- 當屏幕縮小時 id為bs-example-navbar-collapse-1的元素隱藏,使用下面這個button 調(diào)出 #bs-example-navbar-collapse-1元素 --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <!-- <span class="sr-only">Toggle navigation</span> --> <!-- 下面三個span 只是用來顯示 三條 橫線樣式,可以清除注釋看看 --> <!-- <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> --> 更多 </button> <!-- 將導(dǎo)航條內(nèi)放置品牌標志的地方替換為 <img> 元素即可展示自己的品牌圖標。由于 .navbar-brand 已經(jīng)被設(shè)置了內(nèi)補(padding)和高度(height),你需要根據(jù)自己的情況添加一些 CSS 代碼從而覆蓋默認設(shè)置。 --> <!-- 放置商標的地方 --> <a class="navbar-brand" href="#">Brand</a> <!-- a鏈接里當然也可以圖片 或 字體圖標 --> </div> <!-- 以下為導(dǎo)航具體內(nèi)容,身體部分 --> <!-- 收集導(dǎo)航鏈接、表單和其他內(nèi)容 方便移動設(shè)備時。收集隱藏 --> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!-- 導(dǎo)航條的內(nèi)容里有五部分 根據(jù)需求更改--> <!-- 第一部分 --> <ul class="nav navbar-nav"> <li class="active"><a href="#">鏈接<span class="sr-only">(current)</span></a></li> <li><a href="#">鏈接</a></li> <li class="dropdown"> <!-- 用來控制 下拉列表顯示/隱藏 --> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">一個行為</a></li> <li><a href="#">另一個行為</a></li> <li><a href="#">其他的行為</a></li> <!-- .divider 分隔器 與上面分隔一條線 --> <li role="separator" class="divider"></li> <li><a href="#">分隔開的鏈接</a></li> <li role="separator" class="divider"></li> <li><a href="#">另一個分隔開的鏈接</a></li> </ul> </li> </ul> <!-- 第二部分 一個文本 --> <!-- 把文本包裹在 .navbar-text中時,為了有正確的行距和顏色,通常使用 <p> 標簽。 --> <p class="navbar-text">文本內(nèi)容</p> <!-- 第三部分 是一個表單--> <!-- 將表單放置于 .navbar-form 之內(nèi)可以呈現(xiàn)很好的垂直對齊,并在較窄的視口(viewport)中呈現(xiàn)折疊狀態(tài)。 使用對齊選項可以規(guī)定其在導(dǎo)航條上出現(xiàn)的位置。 --> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="請輸入內(nèi)容"> </div> <button type="submit" class="btn btn-default">提交</button> </form> <!-- 第四部分是一個獨立按鈕 --> <!-- 對于不包含在 <form> 中的 <button> 元素,加上 .navbar-btn 后,可以讓它在導(dǎo)航條里垂直居中。有一些對于為輔助設(shè)備提供可識別標簽的方法,例如, aria-label、aria-labelledby 或者 title 屬性。如果這些方法都沒有,屏幕閱讀器將使用 placeholder 屬性(如果這個屬性存在的話),但是請注意,使用 placeholder 代替其他識別標簽的方式是不推薦的。 --> <button type="button" class="btn btn-default navbar-btn">獨立按鈕</button> <!-- 第五部分 --> <!-- 或許你希望在標準的導(dǎo)航組件之外添加標準鏈接,那么,使用 .navbar-link 類可以讓鏈接有正確的默認顏色和反色設(shè)置。 --> <p class="navbar-text">正常文本<a href="#" class="navbar-link"> 非導(dǎo)航鏈接</a></p> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <script src="lib/jquery/jquery.js"></script> <script src="lib/bootstrap/js/bootstrap.js"></script> </body> </html>
組件排列
通過添加 .navbar-left 和 .navbar-right 工具類讓導(dǎo)航鏈接、表單、按鈕或文本對齊。兩個類都會通過 CSS 設(shè)置特定方向的浮動樣式。例如,要對齊導(dǎo)航鏈接,就要把它們放在個分開的、應(yīng)用了工具類的 <ul> 標簽里。
這些類是 .pull-left 和 .pull-right 的 mixin 版本,但是他們被限定在了媒體查詢(media query)中,這樣可以更容易的在各種尺寸的屏幕上處理導(dǎo)航條組件。
向右側(cè)對齊多個組件
導(dǎo)航條目前不支持多個 .navbar-right 類。為了讓內(nèi)容之間有合適的空隙,我們?yōu)樽詈笠粋€ .navbar-right 元素使用負邊距(margin)。如果有多個元素使用這個類,它們的邊距(margin)將不能按照你的預(yù)期正常展現(xiàn)。
我們將在 v4 版本中重寫這個組件時重新審視這個功能。
固定在頂部
添加 .navbar-fixed-top 類可以讓導(dǎo)航條固定在頂部,還可包含一個 .container 或 .container-fluid 容器,從而讓導(dǎo)航條居中,并在兩側(cè)添加內(nèi)補(padding)。
需要為 body 元素設(shè)置內(nèi)補(padding)
這個固定的導(dǎo)航條會遮住頁面上的其它內(nèi)容,除非你給 <body> 元素底部設(shè)置了 padding。用你自己的值,或用下面給出的代碼都可以。提示:導(dǎo)航條的默認高度是 50px。
body { padding-top: 70px; }
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> ... </div> </nav>
固定在底部
添加 .navbar-fixed-bottom 類可以讓導(dǎo)航條固定在底部,并且還可以包含一個 .container 或 .container-fluid 容器,從而讓導(dǎo)航條居中,并在兩側(cè)添加內(nèi)補(padding)。
需要為 body 元素設(shè)置內(nèi)補(padding)
這個固定的導(dǎo)航條會遮住頁面上的其它內(nèi)容,除非你給 <body> 元素底部設(shè)置了 padding。用你自己的值,或用下面給出的代碼都可以。提示:導(dǎo)航條的默認高度是 50px。
body { padding-bottom: 70px; }
<nav class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> ... </div> </nav>
靜止在頂部
通過添加 .navbar-static-top 類即可創(chuàng)建一個與頁面等寬度的導(dǎo)航條,它會隨著頁面向下滾動而消失。還可以包含一個 .container 或 .container-fluid 容器,用于將導(dǎo)航條居中對齊并在兩側(cè)添加內(nèi)補(padding)。
通過添加 .navbar-static-top 類即可創(chuàng)建一個與頁面等寬度的導(dǎo)航條,它會隨著頁面向下滾動而消失。還可以包含一個 .container 或 .container-fluid 容器,用于將導(dǎo)航條居中對齊并在兩側(cè)添加內(nèi)補(padding)。to center and pad navbar content.
<nav class="navbar navbar-default navbar-static-top"> <div class="container"> ... </div> </nav>
反色的導(dǎo)航條
通過添加 .navbar-inverse 類可以改變導(dǎo)航條的外觀。
<nav class="navbar navbar-inverse"> ... </nav>
如果大家還想深入學(xué)習,可以點擊這里進行學(xué)習,再為大家附3個精彩的專題:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js+CSS實現(xiàn)模擬華麗的select控件下拉菜單效果
這篇文章主要介紹了js+CSS模擬select控件下拉菜單效果,通過javascript鼠標事件結(jié)合css控制實現(xiàn)select下拉菜單效果,整體效果華麗美觀,需要的朋友可以參考下2015-09-09JavaScript判斷變量是否為空的自定義函數(shù)分享
這篇文章主要介紹了JavaScript判斷變量是否為空的自定義函數(shù)分享,本文直接給出實現(xiàn)代碼,需要的朋友可以參考下2015-01-01如何在javascript 中使用 xmlHttpRequest 發(fā)送 POST
本文將通過不同的示例解釋如何使用JavaScript代碼在AJAX編程中發(fā)送 XMLHttpRequest post 請求,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-07-07js+html5實現(xiàn)canvas繪制圓形圖案的方法
這篇文章主要介紹了js+html5實現(xiàn)canvas繪制圓形圖案的方法,涉及html5圖形繪制的基礎(chǔ)技巧,需要的朋友可以參考下2015-06-06DOM節(jié)點的替換或修改函數(shù)replaceChild()用法實例
這篇文章主要介紹了DOM節(jié)點的替換或修改函數(shù)replaceChild()用法,實例分析了replaceChild()替換DOM節(jié)點的使用技巧,需要的朋友可以參考下2015-01-01微信小程序中使用echarts方法(全網(wǎng)最詳細教程!)
現(xiàn)在越來越多的項目都在使用可視化的功能,那么使用echarts實現(xiàn)是一種不錯的選擇,下面這篇文章主要給大家介紹了關(guān)于小程序中使用echarts的方法,本文介紹的方法應(yīng)該是全網(wǎng)最詳細教程,需要的朋友可以參考下2023-06-06