Bootstrap 完整 CSS 样式类参考

所有 Bootstrap CSS 样式类的完整列表

所有 Bootstrap CSS 样式类的完整列表,包括说明和示例:

描述实例目录
.active表格 行添加灰色背景(<tr>或表格单元格(<td>)(与悬停时使用的颜色相同)试一试表格
.active给默认 导航栏 中的活动链接添加黑色背景。将黑色背景和白色添加到反向导航栏内的当前链接。试一试导航条
.active列表组 中的活动列添加一个蓝色的背景颜色试一试列表组
.active按钮 添加一个蓝色的背景就像被点击的时候试一试按钮
.active进度条 有一个条形的动画效果试一试进度条
.active给下拉菜单中的 活动选项 添加一个蓝色的背景试一试下拉菜单
.active向活动的 分页导航 链接添加蓝色背景色(以突出显示当前页面)试一试分页
.affixAffix 插件让元素可以被附加(锁/粘贴)到一个区域或者页面,通过 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:auto 和 margin-left:auto)试一试帮助
.checkbox复选框的容器试一试输入
.checkbox-inline使多个复选框显示在同一行上试一试输入
.clearfix清除浮动试一试帮助
.close指示一个关闭图标试一试帮助
.col--响应式网格(横跨 1-12 列)。超小型设备手机(< 768px),小型设备平板电脑(≥ 768px),中型设备台式机(≥ 992px),大型设备台式机(≥1200 像素)。列值可以是 1-12。试一试网格
.col--offset-向右移动列。这些类增加了 * 列的左边距试一试网格
.col--pull-更改网格列的顺序试一试网格
.col--push-更改网格列的顺序试一试网格
.collapse表示可折叠内容 - 可根据需要隐藏或显示试一试折叠
.collapse in默认情况下显示可折叠内容试一试折叠
.container固定宽度的容器,其宽度由屏幕位置决定。左右两边的边距相等。试一试容器
.container-fluid横跨屏幕全宽的容器试一试容器
.control-label使用标签可以用来进行表单验证试一试表单
.danger给表格行添加红色背景(<tr>或表格单元格(<td>)。表示危险或潜在的负面行为试一试表格
.disabled禁用按钮(在悬停时添加不透明度和 "禁止停车标志" 图标)试一试按钮
.disabled禁用下拉项(在悬停时添加灰色文本颜色和 "禁止停车标志" 图标)试一试下拉菜单
.disabled禁用分页链接(无法单击 - 在悬停状态下添加灰色文本颜色和 "禁止停车标志" 图标)试一试分页导航
.disabled禁用列表组中的列表项(无法单击 - 在悬停状态下添加灰色背景色和 "禁止停车标志" 图标)试一试列表组s
.divider用于在下拉菜单中用细水平边框分隔链接试一试下拉菜单
.dl-horizontal将 <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> 与内联块控件左对齐(这仅适用于视口中宽度至少为 768px 的窗体)试一试表单
.form-horizontal在水平布局中对齐标签和表单控件组试一试表单
.glyphicon创建一个图标。Bootstrap 从 the 字形图标 集中提供 260 种字体图标试一试字形图标
.has-danger为标签添加红色,为输入添加红色边框,并在 input 中添加 error 错误图标(与 .has feedback 一起使用)试一试表单
.has-feedback为输入添加反馈图标(复选标记、警告和错误符号)试一试表单
.has-success为标签添加绿色,为输入添加绿色边框,并在输入中添加复选标记图标(与 .has feedback 一起使用)试一试表单
.has-warning为标签添加黄色/橙色,为输入添加黄色/橙色边框,并在输入中添加复选标记图标(与 .has feedback 一起使用)试一试表单
.help-block一个文本块试一试提示框
.form-control用于输入、文本区域和选择元素,以横跨页面的整个宽度并使其响应式试一试表单
.form-control-feedback表单验证类试一试输入 2
.form-control-static在水平表单中的表单标签旁边添加纯文本试一试输入 2
.form-group表单输入和标签的容器试一试表单
.form-inline使 <form> 与内联块控件左对齐(这仅适用于视口中宽度至少为 768px 的窗体)试一试表单
.form-horizontal在水平布局中对齐标签和表单控件组试一试表单
.glyphicon创建一个图标。Bootstrap 从 the 字形图标 集中提供 260 种字体图标试一试字形图标
.hidden强制隐藏元素 (display:none)试一试帮助
.hidden-根据屏幕大小隐藏内容试一试帮助
.hide已弃用 使用 .hidden 代替试一试帮助
.h1 - .h6让元素看起来像个标题 (h1-h6)试一试文本排版
.icon-bar在导航条中用于创建汉堡菜单(三个水平栏)试一试导航条
.icon-nextUnicode图标(箭头指向右侧),用于图片轮播。这通常会替换为一个字形图标试一试轮播/幻灯片
.icon-prev图标(箭头指向左侧),用于图片轮播。这通常会替换为一个字形图标试一试轮播/幻灯片
.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设置模式的样式(border, background-color 等)。如果需要的话,在这里面添加模态的页眉、正文和页脚试一试模态框
.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添加到导航条内的链接或标题元素,以表示徽标或标题试一试导航条
.navbar-btn垂直对齐导航条内的按钮试一试导航条
.navbar-collapse折叠导航条(隐藏并替换为手机和小型平板电脑上的菜单/汉堡图标)试一试导航条
.navbar-default创建默认导航栏(浅灰色背景色)试一试导航条
.n-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 边框半径)试一试导航条
.navbar-text垂直对齐导航栏中非链接的所有元素(确保填充正确)试一试导航条
.navbar-toggle设置在小屏幕上打开导航栏的按钮的样式。通常与三个连用。图标栏类,用于指示可切换菜单图标试一试导航条
.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用户单击元素时出现的弹出框试一试弹出框
.pre-scrollable使 <pre> 元素可滚动(最大高度为 350px,并提供 y 轴滚动条)试一试帮助
.prev幻灯片/轮播 中用于表示 "上一个" 链接试一试轮播/幻灯片
.previous用于将f翻页按钮与页面左侧对齐(上一个按钮)试一试翻页
.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通过将单元格将 padding 部分变成两半,使表格更加紧凑试一试表格
.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在具有灰色背景色和一些填充的元素周围添加圆形边框试一试Wells
.well-lg大 well (更多填充)试一试Wells
.well-sm小 well (更少填充)试一试Wells
上面的表格显示了所有可用的 Bootstrap 3 样式类。

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