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` 類之外 | 試一試 |