Bootstrap 完整 CSS 样式类参考
所有 Bootstrap CSS 样式类的完整列表
所有 Bootstrap CSS 样式类的完整列表,包括说明和示例:
类 | 描述 | 实例 | 目录 |
---|---|---|---|
.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: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-next | Unicode图标(箭头指向右侧),用于图片轮播。这通常会替换为一个字形图标 | 试一试 | 轮播/幻灯片 |
.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 类参考。