Menu
×
   ❮     
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 参考


所有 Bootstrap 类别的完整列表

所有 Bootstrap 类别的完整列表,包括描述和示例

描述 示例 类别
.active 表格行 (<tr>) 或表格单元格 (<td>) 添加灰色背景颜色(与悬停时使用的颜色相同) 试试看 表格
.active 为默认导航栏中活动的链接添加灰色背景颜色。为反向导航栏中当前链接添加黑色背景和白色颜色。 试试看 导航栏
.active 为列表组中活动的列表项添加蓝色背景颜色 试试看 列表组
.active 添加蓝色背景颜色来模拟“按下”的按钮 试试看 按钮
.active 进度条添加动画条纹 试试看 进度条
.active 为下拉菜单中活动的下拉菜单项添加蓝色背景颜色 试试看 下拉菜单
.active 为活动的分页链接添加蓝色背景颜色(突出显示当前页面) 试试看 分页
.affix Affix 插件允许元素固定(锁定/粘贴)到页面上的某个区域。它在 position:fixed 上打开和关闭 试试看 固定
.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 创建一个尖括号箭头图标 ,它表示按钮是下拉菜单 试试看 下拉菜单
.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。 试试看 网格
.col-*-offset-* 将列向右移动。这些类将列的左外边距增加 * 列 试试看 网格
.col-*-pull-* 更改网格列的顺序 试试看 网格
.col-*-push-* 更改网格列的顺序 试试看 网格
.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 用于输入、文本区域和选择元素,使它们跨越页面的整个宽度并使其响应式 试试看 表单
.form-control-feedback 表单验证类 试试看 输入 2
.form-control-static 在水平表单中,将纯文本添加到表单标签旁边 试试看 输入 2
.form-group 表单输入和标签的容器 试试看 表单
.form-inline 使 <form> 左对齐,并带有内联块控件(这仅适用于宽度至少为 768 像素的视窗内的表单) 试试看 表单
.form-horizontal 以水平布局对齐标签和表单控件组 试试看 表单
.glyphicon 创建图标。Bootstrap 提供了来自 Glyphicons Halflings 集合的 260 个免费字形 试试看 字形
.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 图标(指向右边的箭头),用于轮播。这通常被替换为字形 试试看 轮播
.icon-prev Unicode 图标(指向左边的箭头),用于轮播。这通常被替换为字形 试试看 轮播
.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 创建一个带圆角的填充灰色框,放大内部文本的字体大小。创建一个大型框,以引起对某些特殊内容或信息的额外关注 试试看 巨型横幅
.label 为元素添加一个灰色的圆形框。提供有关某事物的附加信息(例如,“新建”) 试试看 标签
.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 居中选项卡/药丸。注意,在小于 768 像素的屏幕上,项目会堆叠(内容将保持居中) 试试看 选项卡
.nav-stacked 垂直堆叠选项卡或药丸 试试看 选项卡
.nav-tabs 创建一个选项卡菜单 试试看 选项卡
.navbar 创建一个导航栏 试试看 导航栏
.navbar-brand 添加到导航栏内的链接或标题元素中,以表示徽标或标题 试试看 导航栏
.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 从导航栏中删除左、上和右边框(圆角)(默认导航栏默认情况下带有灰色边框和 4 像素边框半径) 试试看 导航栏
.navbar-text 垂直对齐导航栏内任何不是链接的元素(确保适当的填充) 试试看 导航栏
.navbar-toggle 设置在小屏幕上打开导航栏的按钮的样式。通常与三个 .icon-bar 类一起使用,以指示可切换菜单图标(汉堡包/条形) 试试看 导航栏
.next 在轮播控件中用于识别下一个控件 试试看 轮播
.next 用于将分页器按钮对齐到页面的右侧(下一个按钮) 试试看 分页器
.page-header 在标题下方添加一条水平线(+ 在元素周围添加一些额外的空间) 试试看 页面标题
.pager 创建上一个/下一个按钮(用于 <ul> 元素) 试试看 分页器
.pagination 创建一个分页(在你的网站有很多页面时很有用。用于 <ul> 元素) 试试看 分页
.pagination-lg 大型分页(每个分页链接的字体大小为 18 像素。默认值为 14 像素) 试试看 分页
.pagination-sm 小型分页(每个分页链接的字体大小为 12 像素。默认值为 14 像素) 试试看 分页
.panel 创建一个带边框的框,在其内容周围有一些填充 试试看 面板
.panel-body 面板内内容的容器 试试看 面板
.panel-collapse 可折叠面板(在隐藏和显示面板之间切换) 试试看 折叠
.panel-danger 红色面板。表示危险 试试看 面板
.panel-info 浅蓝色面板。表示信息 试试看 面板
.panel-success 绿色面板。表示成功 试试看 面板
.panel-warning 黄色面板。表示警告 试试看 面板
.panel-footer 创建一个面板页脚(浅色背景) 试试看 面板
.panel-group 用于将多个面板分组在一起。这会删除每个面板下方的底部边距 试试看 面板
.panel-heading 创建一个面板标题(浅色背景) 试试看 面板
.panel-title 用于 .panel-heading 内部,以调整文本样式(删除边距并添加 16 像素的字体大小) 试试看 面板
.popover 弹出框,当用户点击某个元素时出现 试试看 弹出框
.pre-scrollable 使 <pre> 元素可滚动 (max-height 为 350 像素,并提供 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 响应式列的容器 试试看 网格
.row-no-gutters 从行及其列中删除间隙 试试看 网格
.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 弹出框,当用户将鼠标指针移到元素上时出现 试试看 工具提示
.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 在元素周围添加圆角边框,并带有灰色背景色和一些填充 试试看
.well-lg 大型井(更多填充) 试试看
.well-sm 小型井(更少填充) 试试看

上表显示了所有可用的 Bootstrap 3 类。

提示:要查看所有 Bootstrap 4 类的完整列表,请访问我们的 所有 Bootstrap 4 CSS 类参考


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.