> For the complete documentation index, see [llms.txt](https://learnprogramming.gitbook.io/programlearned/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learnprogramming.gitbook.io/programlearned/bootstrap/navbar.md). # 導覽列應用 * .navbar-expand{-sm|-md|-lg|-xl} 是指 {-sm|-md|-lg|-xl} 範圍以上才會直接展開選項 * .navbar-brand 專案名稱。 * .navbar-toggler 用於折疊插件和其他 navigation toggling 行為。 * .navbar-nav 提供導航（包括下拉清單）。 * .form-inline 任何表單控制元件和操作。 * .navbar-text 垂直居中的文本字串。 * .collapse.navbar-collapse 外層中斷點群組和隱藏導覽列內容。 ## .navbar-brand 製作自己的專案品牌 * 可放導覽或折疊插件下面,小型螢幕裝置會改變頁面配置 * 可參考 : * 範例 : ```markup ``` ## .navbar-toggler 用於折疊插件 * 配合下面的導覽而先介紹 .navbar-toggler * 導覽列可以使用 .navbar-toggler、.navbar-collapse、.navbar-expand{-sm|-md|-lg|-xl} 來改變。結合其他通用類別，選擇顯示或隱藏特定元素。 * 不需要折疊的導覽列，在導覽列中加入 .navbar-expand。總是折疊的導覽列，不加任何 .navbar-expand * toggler 是為了讓導覽資訊在螢幕較小的裝置時變成下拉式選單的關鍵 * 可以看到下面範例,data-target指定要收縮div裡面的內容,所以id必須要一樣 * 範例 : ![](/files/-LaIU00rvSgJVrAQsRyH) ```markup ``` ## .navbar-nav 導覽 * 導覽的連結建立在 .nav 選項上 * 在導覽列中的導覽元件，將佔用更多的水平空間，以保持導覽列內容安全對齊 * 用 .active 表示當前頁面。可用於 .nav-link 或 .nav-item * 範例 : (兩者效果依樣) ```markup ``` ## 下拉式選單 :　請確保 .nav-item 和 .nav-link 使用單獨及巢狀的元素 * 範例 : ```markup ``` ## 表單 * 在導覽列中放置各種表單控制元件，這是透過 .form-inline 水平放置的表單 * 範例 : ![](/files/-LaIU00v_wk3b5Wlddbw) ```markup ``` * 根據需要將行內表單的內容透過通用類別對齊。(可參考 : 容器對齊方式) ```markup ``` ## 文字 * 導覽列可在 .navbar-text 包含一些文本。 class 會調整文本字串的垂直對齊和水平間距 * 範例 : ```markup ``` ## 顏色方案 * .navbar-light 選淺色背景顏色，或者 .navbar-dark 用深色背景顏色 * 更多顏色 : * * * 範例 : ```markup ``` ## 容器 * 可將導覽列包裹在 .container 中，放置在頁面中央或內容的中間固定或靜態於頂的導覽列位置 * 範例 : ```markup

``` * .container 在導覽列中，其水平 padding 在低於指定的 .navbar-expand{-sm|-md|-lg|-xl} 中斷點處被移除這確保了當您的導覽列折疊時，不會產生多餘的 padding * 範例 : ```markup ``` ## 定位 * 預設 : ```markup ``` * 固定在上方(相對位置) ```markup ``` * 固定在下方(相對位置) ```markup ```