選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap 導航元件


標籤頁和藥丸

描述 示例
.nav nav-tabs 建立導航標籤頁 試一試
.nav nav-pills 建立導航藥丸 試一試
.nav nav-pills nav-stacked 建立垂直導航藥丸 試一試
.nav-justified 在螢幕寬度大於 768px 時,使導航標籤頁/藥丸的寬度與其父級相等。在較小的螢幕上,導航標籤頁/藥丸是堆疊的 試一試
.disabled 表示一個停用的(不可點選的)標籤頁/藥丸 試一試
帶下拉選單的導航標籤頁 試一試
帶下拉選單的導航藥丸 試一試
.tab-content 與 .tab-pane 和 data-toggle="tab"(藥丸使用 data-toggle="pill")結合使用,使其成為可切換的標籤頁/藥丸 試一試
.tab-pane 與 .tab-content 和 data-toggle="tab"(藥丸使用 data-toggle="pill")結合使用,使其成為可切換的標籤頁/藥丸 試一試

導航條

描述 示例
.navbar 建立導航欄 試一試
.navbar-brand 新增到導航欄內的連結或標題元素,用以表示 Logo 或標題 試一試
.navbar-btn 在導航欄內垂直對齊按鈕 試一試
.navbar-collapse 摺疊導航欄(在手機和小平板電腦上隱藏,並替換為選單/漢堡圖示) 試一試
.navbar-default 建立一個預設的導航條(淺灰色背景色) 試一試
.navbar-fixed-bottom 使導航條固定在螢幕底部(粘性/固定) 試一試
.navbar-fixed-top 使導航條固定在螢幕頂部(粘性/固定) 試一試
.navbar-form 新增到導航條內的表單元素,以使其垂直居中(提供適當的內邊距) 試一試
.navbar-header 新增到包含代表 Logo 或標題的連結/元素的容器元素 試一試
.navbar-inverse 建立一個黑色導航條(而不是淺灰色) 試一試
.navbar-left 將導航連結、表單、按鈕或文字在導航條中靠左對齊 試一試
.navbar-link 將元素樣式化為導航條中的連結(錨點在懸停時具有適當的內邊距和下劃線,而其他元素如 p 或 span 則具有預設的懸停效果——在反向導航條中為白色,在預設導航條中為黑色) 試一試
.navbar-nav 用於包含導航條內連結列表項的 `<ul>` 容器 試一試
.navbar-right 將導航連結、表單、按鈕或文字在導航條中靠右對齊。 試一試
.navbar-static-top 移除導航條的左、上、右邊框(圓角)(預設導航條有一個灰色邊框和 4px 的 border-radius)
.navbar-text 垂直對齊導航條內的任何非連結元素(確保適當的內邊距) 試一試
.navbar-toggle 樣式化在小螢幕上應開啟導航條的按鈕。通常與三個 `.icon-bar` 類一起使用,以表示可切換選單圖示(漢堡包/條紋) 試一試


麵包屑和分頁

描述 示例
.breadcrumb 建立一個麵包屑 試一試
.pager 提供簡單的分頁連結(上一頁/下一頁) 試一試
.previous 將 `.pager` 的上一頁按鈕靠左對齊 試一試
.next 將 `.pager` 的下一頁按鈕靠右對齊 試一試
.disabled 表示一個不可點選的連結 試一試
.pagination 提供分頁連結 試一試
.pagination-lg 與 `.pagination` 類一起使用,提供較大的分頁連結 試一試
.pagination-sm 與 `.pagination` 類一起使用,提供較小的分頁連結 試一試
.disabled 表示一個不可點選的連結 試一試
.active 表示當前頁 試一試

標籤和徽章

描述 示例
.label label-default 表示一個預設的灰色標籤 試一試
.label label-primary 表示一個藍色的“primary”型別的標籤 試一試
.label label-success 表示一個綠色的“success”型別的標籤 試一試
.label label-info 表示一個淺藍色的“info”型別的標籤 試一試
.label label-warning 表示一個黃色的“warning”型別的標籤 試一試
.label label-danger 表示一個紅色的“danger”型別的標籤 試一試
.badge 表示新專案或未讀專案 試一試
.jumbotron 表示一個大盒子,用於吸引使用者對特色內容或資訊的額外關注 試一試
.jumbotron (附加) 要讓 `.jumbotron` 盒子跨越整個寬度,並且沒有圓角,請將其放置在 `.container` 類之外 試一試

×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援