選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何做 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 參考


所有 Bootstrap 類完整列表

所有 Bootstrap 類的完整列表,附帶說明和示例

描述 示例 類別
.active 表格行 (<tr>) 或表格單元格 (<td>) 新增灰色背景色 (懸停時使用的顏色相同) 試一試 表格
.active 為預設導航欄中的活動連結新增灰色背景色。為反轉導航欄中的當前連結新增黑色背景和白色文字。 試一試 導航欄
.active 為列表組中的活動列表項新增藍色背景色 試一試 列表組
.active 新增藍色背景色以模擬“按下”的按鈕 試一試 按鈕
.active 為條紋進度條新增動畫效果 試一試 進度條
.active 為下拉選單中的活動下拉項新增藍色背景色 試一試 下拉選單
.active 為活動分頁連結新增藍色背景色 (以突出顯示當前頁) 試一試 分頁
.affix Affix 外掛允許元素固定 (鎖定/粘滯) 在頁面上的某個區域。它切換 position:fixed 的開啟和關閉 試一試 Affix
.alert 建立提醒訊息框 試一試 提醒框
.alert-danger 紅色警告框。指示危險或潛在的負面操作 試一試 提醒框
.alert-dismissible .close 類一起使用,用於關閉警告框 試一試 提醒框
.alert-info 淺藍色警告框。指示一些資訊 試一試 提醒框
.alert-link 用於警告框中的連結,以新增匹配的彩色連結 試一試 提醒框
.alert-success 綠色警告框。指示成功的或積極的操作 試一試 提醒框
.alert-warning 黃色警告框。指示應謹慎對待此操作 試一試 提醒框
.badge 建立一個圓形徽章 (灰色圓圈 - 通常用作數字指示器) 試一試 徽章
.bg-danger 為元素新增紅色背景。表示危險或負面操作 試一試 輔助類
.bg-info 為元素新增淺藍色背景色。表示一些資訊 試一試 輔助類
.bg-primary 為元素新增藍色背景色。表示重要事項 試一試 輔助類
.bg-success 為元素新增綠色背景色。表示成功或積極的操作 試一試 輔助類
.bg-warning 為元素新增黃色背景色。表示警告或負面操作 試一試 輔助類
.breadcrumb 分頁。指示當前頁在導航層次結構中的位置 試一試 分頁
.btn 建立一個基本按鈕 (灰色背景和圓角) 試一試 按鈕
.btn-block 建立一個跨越父元素整個寬度的塊級按鈕 試一試 按鈕
.btn-danger 紅色按鈕。指示危險或負面操作 試一試 按鈕
.btn-default 預設按鈕。白色背景和灰色邊框 試一試 按鈕
.btn-group 將按鈕組合在一起,顯示在同一行 試一試 按鈕組
.btn-group-justified 使按鈕組跨越螢幕的整個寬度 試一試 按鈕組
.btn-group-lg 大型按鈕組(使按鈕組中的所有按鈕變大 - 增加字號和內邊距) 試一試 按鈕組
.btn-group-sm 小型按鈕組(使按鈕組中的所有按鈕變小) 試一試 按鈕組
.btn-group-xs 超小按鈕組 (使按鈕組中的所有按鈕都超小) 試一試 按鈕組
.btn-group-vertical 使按鈕組垂直堆疊 試一試 按鈕組
.btn-info 淺藍色按鈕。表示資訊 試一試 按鈕
.btn-link 使按鈕看起來像連結 (獲取按鈕行為) 試一試 按鈕
.btn-lg 大按鈕 試一試 按鈕
.btn-primary 藍色按鈕。 試一試 按鈕
.btn-sm 小按鈕 試一試 按鈕
.btn-success 綠色按鈕。表示成功或積極的操作 試一試 按鈕
.btn-warning 黃色按鈕。表示警告或負面操作 試一試 按鈕
.btn-xs 超小按鈕 試一試 按鈕
.caption .thumbnail 中新增說明文字 試一試 圖片
.caret 建立一個caret 箭頭圖示 ,表示按鈕是下拉選單 試一試 下拉選單
.carousel 建立一個輪播 (幻燈片) 試一試 輪播
.carousel-caption 為輪播中的每個幻燈片建立說明文字 試一試 輪播
.carousel-control 下一個和上一個連結的容器 試一試 輪播
.carousel-indicators 在每個幻燈片的底部新增小圓點/指示器 (指示輪播中有多少張幻燈片,以及使用者當前正在檢視哪張幻燈片) 試一試 輪播
.carousel-inner 幻燈片專案的容器 試一試 輪播
.center-block 居中任何元素 (將元素設定為 display:block,並設定 margin-right:automargin-left:auto) 試一試 輔助類
.checkbox 複選框的容器 試一試 輸入框
.checkbox-inline 使多個複選框顯示在同一行 試一試 輸入框
.clearfix 清除浮動 試一試 輔助類
.close 表示一個關閉圖示 試一試 輔助類
.col-*-* 響應式網格 (跨越 1-12 列)。超小裝置 手機 (< 768px),小裝置 平板電腦 (≥768px),中等裝置 桌面 (≥992px),大裝置 桌面 (≥1200px)。列值可以是 1-12。 試一試 Grid
.col-*-offset-* 將列向右移動。這些類將列的左邊距增加 * 列 試一試 Grid
.col-*-pull-* 更改網格列的順序 試一試 Grid
.col-*-push-* 更改網格列的順序 試一試 Grid
.collapse 表示可摺疊內容 - 可按需隱藏或顯示 試一試 摺疊
.collapse in 預設顯示可摺疊內容 試一試 摺疊
.container 固定寬度容器,寬度由螢幕尺寸決定。左右邊距相等。 試一試 容器
.container-fluid 跨越螢幕全寬的容器 試一試 容器
.control-label 允許標籤用於表單驗證 試一試 表單
.danger 為表格行 (<tr>) 或表格單元格 (<td>) 新增紅色背景。表示危險或潛在的負面操作 試一試 表格
.disabled 停用按鈕 (新增不透明度並在懸停時顯示“禁止停車”圖示) 試一試 按鈕
.disabled 停用下拉選單項 (新增灰色文字顏色並在懸停時顯示“禁止停車”圖示) 試一試 下拉選單
.disabled 停用分頁連結 (無法點選 - 新增灰色文字顏色並在懸停時顯示“禁止停車”圖示) 試一試 分頁
.disabled 停用列表組中的列表項 (無法點選 - 新增灰色背景色並在懸停時顯示“禁止停車”圖示) 試一試 列表組
.divider 用於在下拉選單中分隔連結,帶有細的水平邊框 試一試 下拉選單
.dl-horizontal <dl> 元素中的術語 <dt> 和描述 <dd> 排列在一起。最初像預設的 <dl>,但當瀏覽器視窗擴充套件時,它們會並排排列 試一試 排版
.dropdown 建立一個可切換的選單,允許使用者從預定義列表中選擇一個值 試一試 下拉選單
.dropdown-header 用於在下拉選單中新增標題 試一試 下拉選單
.dropdown-menu 新增下拉選單容器的預設樣式 試一試 下拉選單
.dropdown-menu-right 右對齊下拉選單 試一試 下拉選單
.dropdown-toggle 用於應隱藏和顯示 (切換) 下拉選單的按鈕 試一試 下拉選單
.dropup 表示一個向上彈出的選單 (而不是向下) 試一試 下拉選單
.embed-responsive 嵌入內容的容器。使影片或幻燈片在任何裝置上都能正確縮放 試一試 圖片
.embed-responsive-16by9 嵌入內容的容器。建立 16:9 寬高比的嵌入內容 試一試 圖片
.embed-responsive-4by3 嵌入內容的容器。建立 4:3 寬高比的嵌入內容 試一試 圖片
.embed-responsive-item 用於 .embed-responsive 內部。將影片很好地縮放到父元素 試一試 圖片
.fade 關閉警告框時新增淡出效果 試一試 提醒框
.form-control 用於 input、textarea 和 select 元素,使其跨越頁面的整個寬度並保持響應性 試一試 表單
.form-control-feedback 表單驗證類 試一試 輸入框 2
.form-control-static 在水平表單中,在表單標籤旁邊新增純文字 試一試 輸入框 2
.form-group 表單輸入和標籤的容器 試一試 表單
.form-inline 使 <form> 左對齊,具有內聯塊控制元件(這僅適用於視口寬度至少為 768px 的表單) 試一試 表單
.form-horizontal 在水平佈局中排列標籤和表單控制元件組 試一試 表單
.glyphicon 建立一個圖示。Bootstrap 提供了來自 Glyphicons Halflings 集合的 260 個免費的 glyphicons 試一試 Glyphicons
.has-danger 為標籤新增紅色,為輸入框新增紅色邊框,並在輸入框內新增錯誤圖示 (與 .has-feedback 一起使用) 試一試 表單
.has-feedback 為輸入框新增反饋圖示 (勾、警告和錯誤符號) 試一試 表單
.has-success 為標籤新增綠色,為輸入框新增綠色邊框,並在輸入框內新增勾圖示 (與 .has-feedback 一起使用) 試一試 表單
.has-warning 為標籤新增黃色/橙色,為輸入框新增黃色/橙色邊框,並在輸入框內新增勾圖示 (與 .has-feedback 一起使用) 試一試 表單
.help-block 一段幫助文字,會換行,並且可能超過一行。 試一試 輸入框尺寸
.hidden 強制隱藏元素 (display:none) 試一試 輔助類
.hidden-* 根據螢幕尺寸隱藏內容 試一試 輔助類
.hide 已棄用。 使用 .hidden 代替 試一試 輔助類
.h1 - .h6 使元素看起來像指定類別的標題 (h1-h6) 試一試 排版
.icon-bar 在導航欄中使用,建立漢堡選單 (三條水平線) 試一試 導航欄
.icon-next Unicode 圖示 (指向右箭頭的圖示),用於輪播。這通常被 glyphicon 替換 試一試 輪播
.icon-prev Unicode 圖示 (指向左箭頭的圖示),用於輪播。這通常被 glyphicon 替換 試一試 輪播
.img-circle 將影像塑造成圓形 (不支援 IE8 及更早版本) 試一試 圖片
.img-responsive 使影像響應式 試一試 圖片
.img-rounded 為影像新增圓角 試一試 圖片
.img-thumbnail 將影像塑造成縮圖 (邊框) 試一試 圖片
.in 淡入選項卡 試一試 標籤頁
.info 為表格行 (<tr>) 或表格單元格 (<td>) 新增淺藍色背景。指示中性資訊性更改或操作 試一試 表格
.initialism 顯示 <abbr> 元素中的文字,字型大小略小 試一試 排版
.input-group 容器,透過在輸入框前面或後面新增圖示、文字或按鈕作為“幫助文字”來增強輸入框 試一試 輸入框
.input-group-lg 大型輸入組 試一試 輸入框
.input-group-sm 小型輸入組 試一試 輸入框
.input-group-addon .input-group 類一起使用,使在輸入欄位旁邊新增圖示或幫助文字成為可能 試一試 輸入框
.input-group-btn .input-group 類一起使用,將按鈕附加到輸入框旁邊。通常用作搜尋欄 試一試 輸入框
.input-lg 大型輸入欄位 試一試 輸入框尺寸
.input-sm 小型輸入欄位 試一試 輸入框尺寸
.invisible 使元素不可見 (visibility:hidden)。注意: 即使元素不可見,它仍會佔用頁面上的空間 試一試 輔助類
.item 新增到每個輪播專案的類。可以是文字或影像 試一試 輪播
.jumbotron 建立一個帶填充的灰色框,帶有圓角,並增大其中文字的字型大小。建立一個大框,以特別引起人們對某些特殊內容或資訊的注意 試一試 Jumbotron
.label 為元素新增灰色圓角框。提供有關某事的額外資訊 (例如,“New”) 試一試 標籤
.label-danger 紅色標籤 試一試 標籤
.label-info 淺藍色標籤 試一試 標籤
.label-success 綠色標籤 試一試 標籤
.label-warning 黃色標籤 試一試 標籤
.lead 增大段落的字型大小和行高 試一試 排版
.left 用於標識左側輪播控制元件 試一試 輪播
.list-group <li> 元素建立帶邊框的列表組 試一試 列表組
.list-group-item 新增到列表組中的每個 <li> 元素 試一試 列表組
.list-group-item-heading 建立列表組標題 (用於 <li> 以外的元素) 試一試 列表組
.list-group-item-text 用於列表組內的專案文字 (用於 <li> 以外的元素) 試一試 列表組
.list-group-item-danger 列表組中列表項的紅色背景色 試一試 列表組
.list-group-item-info 列表組中列表項的淺藍色背景色 試一試 列表組
.list-group-item-success 列表組中列表項的綠色背景色 試一試 列表組
.list-group-item-warning 列表組中列表項的黃色背景色 試一試 列表組
.list-inline 將所有列表項放在單行上 (水平選單) 試一試 標籤頁
.list-unstyled 刪除 <ul><ol> 列表的所有預設列表樣式 (專案符號、左邊距等) 試一試 排版
.mark 高亮文字:高亮文字 試一試 排版
.media 排列媒體物件 (如影像或影片 - 通常用於部落格文章中的評論等) 試一試 媒體物件
.media-body 應出現在媒體物件旁邊的文字 試一試 媒體物件
.media-heading 在媒體物件內建立標題 試一試 媒體物件
.media-list 巢狀媒體列表 試一試 媒體物件
.media-object 表示一個媒體物件 (影像或影片) 試一試 媒體物件
.modal 標識內容為模態框並將其焦點置於其上 試一試 模態框
.modal-body 定義模態框正文的樣式。在此處新增任何 HTML 標記 (p, img, 等) 試一試 模態框
.modal-content 設定模態框的樣式 (邊框、背景色等)。在此內部,如果需要,新增模態框的標題、正文和頁尾 試一試 模態框
.modal-dialog 設定模態框的正確寬度和邊距 試一試 模態框
.modal-footer 模態框的頁尾 (通常包含一個操作按鈕和一個關閉按鈕) 試一試 模態框
.modal-header 模態框的標題 (通常包含一個標題和一個關閉按鈕) 試一試 模態框
.modal-lg 大模態框 (比預設的寬) 試一試 模態框
.modal-open <body> 元素上使用,以防止頁面滾動 (overflow:hidden) 試一試 模態框
.modal-sm 小模態框 (寬度較小) 試一試 模態框
.modal-title 模態框的標題 試一試 模態框
.nav nav-tabs 表示一個選項卡選單 試一試 標籤頁
.nav nav-pills 表示一個藥丸選單 試一試 標籤頁
.nav .navbar-nav 用於包含導航欄中連結列表項的 <ul> 容器 試一試 導航欄
.nav-justified 居中選項卡/藥丸。請注意,在螢幕小於 768px 時,專案會堆疊 (內容將保持居中) 試一試 標籤頁
.nav-stacked 垂直堆疊選項卡或藥丸 試一試 標籤頁
.nav-tabs 建立一個選項卡選單 試一試 標籤頁
.navbar 建立導航欄 試一試 導航欄
.navbar-brand 新增到導航欄內的連結或標題元素,用以表示 Logo 或標題 試一試 導航欄
.navbar-btn 在導航欄內垂直對齊按鈕 試一試 導航欄
.navbar-collapse 摺疊導航欄(在手機和小平板電腦上隱藏,並替換為選單/漢堡圖示) 試一試 導航欄
.navbar-default 建立一個預設導航欄 (淺灰色背景色) 試一試 導航欄
.navbar-fixed-bottom 使導航欄保持在螢幕底部 (固定/粘滯) 試一試 導航欄
.navbar-fixed-top 使導航欄保持在螢幕頂部 (固定/粘滯) 試一試 導航欄
.navbar-form 新增到導航欄內的表單元素,以在垂直方向上居中它們 (適當的填充) 試一試 導航欄
.navbar-header 新增到包含代表徽標或標題的連結/元素的容器元素 試一試 導航欄
.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 類一起使用,以指示一個可切換選單圖示 (漢堡包/條形) 試一試 導航欄
.next 在輪播中用於標識下一個控制元件 試一試 輪播
.next 用於將分頁按鈕對齊到頁面右側 (下一個按鈕) 試一試 分頁
.page-header 在標題下方新增一條水平線 (+ 在元素周圍新增一些額外空間) 試一試 頁面標題
.pager 建立上一頁/下一頁按鈕 (用於 <ul> 元素) 試一試 分頁
.pagination 建立分頁 (當您有一個包含大量頁面的網站時很有用。用於 <ul> 元素) 試一試 分頁
.pagination-lg 大分頁 (每個分頁連結的字型大小為 18px。預設是 14px) 試一試 分頁
.pagination-sm 小分頁 (每個分頁連結的字型大小為 12px。預設是 14px) 試一試 分頁
.panel 建立一個帶邊框的框,其內容周圍有填充 試一試 面板
.panel-body 面板內內容的容器 試一試 面板
.panel-collapse 可摺疊面板 (在隱藏和顯示面板之間切換) 試一試 摺疊
.panel-danger 紅色面板。表示危險 試一試 面板
.panel-info 淺藍色面板。表示資訊 試一試 面板
.panel-success 綠色面板。表示成功 試一試 面板
.panel-warning 黃色面板。表示警告 試一試 面板
.panel-footer 建立一個面板頁尾 (淺背景色) 試一試 面板
.panel-group 用於將多個面板分組。這將刪除每個面板下方的邊距 試一試 面板
.panel-heading 建立一個面板標題 (淺背景色) 試一試 面板
.panel-title 用於 .panel-heading 內部,以調整文字樣式 (刪除邊距並設定字型大小為 16px) 試一試 面板
.popover 當用戶單擊元素時出現的彈出框 試一試 Popover
.pre-scrollable 使 <pre> 元素可滾動 (max-height 為 350px 並提供 y 軸捲軸) 試一試 輔助類
.prev 在輪播中用於標識“上一個”連結 試一試 輪播
.previous 用於將分頁按鈕對齊到頁面左側 (上一個按鈕) 試一試 分頁
.progress 進度條的容器 試一試 進度條
.progress-bar 建立一個進度條 試一試 進度條
.progress-bar-danger 紅色進度條。表示危險 試一試 進度條
.progress-bar-info 淺藍色進度條。表示資訊 試一試 進度條
.progress-bar-striped 建立一個條紋進度條 試一試 進度條
.progress-bar-success 綠色進度條。表示成功 試一試 進度條
.progress-bar-warning 黃色進度條。表示警告 試一試 進度條
.pull-left 將元素浮動到左側 試一試 輔助類
.pull-right 將元素浮動到右側 試一試 輔助類
.right 用於標識右側輪播控制元件 試一試 輪播
.row 響應式列的容器 試一試 Grid
.row-no-gutters 移除行及其列之間的間隙 試一試 Grid
.show 顯示元素 (display:block) 試一試 輔助類
.small 在任何標題中建立較淺、次要的文字 試一試 排版
.sr-only 隱藏除螢幕閱讀器以外的所有裝置上的文字 試一試 輔助類
.sr-only-focusable 隱藏除螢幕閱讀器以外的所有裝置上的文字 試一試 輔助類
.success 為表格行 (<tr>) 或表格單元格 (<td>) 新增綠色背景。表示成功或積極的操作 試一試 表格
.tab-content .tab-pane 一起使用,建立可切換/動態的選項卡/藥丸 試一試 標籤頁
.tab-pane .tab-content 一起使用,建立可切換/動態的選項卡/藥丸 試一試 標籤頁
.table 為表格新增基本樣式 (填充、底部邊框等) 試一試 表格
.table-bordered 為表格和單元格的所有邊新增邊框 試一試 表格
.table-condensed 透過將單元格填充減半,使表格更緊湊 試一試 表格
.table-hover 建立可懸停的表格 (在表格行懸停時新增灰色背景色) 試一試 表格
.table-responsive 使表格響應式 (在需要時新增水平捲軸) 試一試 表格
.text-capitalize 表示大寫文字 試一試 排版
.text-center 居中文字 試一試 排版
.text-danger 紅色文字顏色。表示危險 試一試 排版
.text-hide 隱藏文字 (有助於將元素的文字內容替換為背景影像) 試一試 排版
.text-info 淺藍色文字顏色。表示資訊 試一試 排版
.text-justify 表示兩端對齊文字 試一試 排版
.text-left 文字左對齊 試一試 排版
.text-lowercase 將文字轉換為小寫 試一試 排版
.text-muted 灰色文字顏色 試一試 排版
.text-nowrap 防止文字換行 試一試 排版
.text-primary 藍色文字顏色 試一試 排版
.text-right 文字右對齊 試一試 排版
.text-success 綠色文字顏色。表示成功 試一試 排版
.text-uppercase 將文字轉換為大寫 試一試 排版
.text-warning 黃色/橙色文字顏色。表示警告 試一試 排版
.thumbnail 在元素 (通常是影像或影片) 周圍新增邊框,使其看起來像縮圖 試一試 圖片
.tooltip 當用戶將滑鼠指標懸停在元素上時出現的彈出框 試一試 Tooltip
.visible-* 從 v3.2.0 開始棄用。 用於按裝置顯示和/或隱藏內容。注意: 使用 .hidden-* 代替 試一試 輔助類
.visible-print-block 在列印 (預) 檢視中顯示元素 (display:block)   輔助類
.visible-print-inline 在列印 (預) 檢視中顯示元素 (display:inline)   輔助類
.visible-print-inline-block 在列印 (預) 檢視中顯示元素 (display:inline-block)   輔助類
.hidden-print 在列印 (預) 檢視中隱藏元素 (display:none)   輔助類
.warning 為表格行 (<tr>) 或表格單元格 (<td>) 新增黃色背景。表示警告 試一試 表格
.well 在元素周圍新增圓角邊框,帶有灰色背景色和一些填充 試一試 Wells
.well-lg 大 well (更多填充) 試一試 Wells
.well-sm 小 well (較少填充) 試一試 Wells

上表顯示了所有可用的 Bootstrap 3 類。

提示: 要檢視所有Bootstrap 4 類的完整列表,請訪問我們的 所有 Bootstrap 4 CSS 類參考


×

聯絡銷售

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

報告錯誤

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

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

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