Bootstrap 所有类参考手册

所有 Bootstrap 类的完整列表

带有描述和示例的所有 Bootstrap 类的完整列表:

类	描述	实例	类别
`.active`	将灰色背景颜色添加到表格行（`<tr>` 或表格单元格 (`<td>`)（悬停时使用相同的颜色）	测试一下	Tables
`.active`	为默认导航栏中的活动链接添加灰色背景色。为倒置导航栏中的当前链接添加黑色背景和白色。	测试一下	Navbar
`.active`	为列表组中的活动列表项添加蓝色背景色	测试一下	List Groups
`.active`	添加蓝色背景颜色以模拟"按下"按钮	测试一下	Buttons
`.active`	为条纹进度条制作动画	测试一下	Progress Bars
`.active`	为下拉菜单中的活动下拉项目添加蓝色背景颜色	测试一下	Dropdowns
`.active`	为活动的分页链接添加蓝色背景色（以突出显示当前页面）	测试一下	Pagination
`.affix`	Affix 插件允许一个元素被附加（锁定/粘性）到页面上的某个区域。它切换位置 `position:fixed` 打开和关闭	测试一下	Affix
`.alert`	创建一个警报消息框	测试一下	Alerts
`.alert-danger`	红色警报框。表示危险或潜在的负面行为	测试一下	Alerts
`.alert-dismissible`	该类与 `.close` 类一起用于关闭警报	测试一下	Alerts
`.alert-info`	浅蓝色警报框。表示一些信息	测试一下	Alerts
`.alert-link`	用于警报内的链接以添加匹配的彩色链接	测试一下	Alerts
`.alert-success`	绿色警报框。表示成功或积极的行动	测试一下	Alerts
`.alert-warning`	黄色警报框。表示应谨慎执行此操作	测试一下	Alerts
`.badge`	创建一个圆形徽章（灰色圆圈 - 通常用作数字指示器）	测试一下	Badges
`.bg-danger`	为元素添加红色背景颜色。代表危险或消极行为	测试一下	Helpers
`.bg-info`	为元素添加浅蓝色背景色。代表一些信息	测试一下	Helpers
`.bg-primary`	为元素添加蓝色背景颜色。代表重要的东西	测试一下	Helpers
`.bg-success`	为元素添加绿色背景颜色。表示成功或积极行动	测试一下	Helpers
`.bg-warning`	为元素添加黄色背景颜色。表示警告或负面行动	测试一下	Helpers
`.breadcrumb`	一个分页。指示当前页面在导航层次结构中的位置	测试一下	Pagination
`.btn`	创建一个基本按钮（灰色背景和圆角）	测试一下	Buttons
`.btn-block`	创建一个跨越父元素整个宽度的块级按钮	测试一下	Buttons
`.btn-danger`	红色按钮。表示危险或消极行为	测试一下	Buttons
`.btn-default`	默认按钮。白色背景和灰色边框	测试一下	Buttons
`.btn-group`	将按钮组合在一行中	测试一下	Button Groups
`.btn-group-justified`	使一组按钮跨越屏幕的整个宽度	测试一下	Button Groups
`.btn-group-lg`	大按钮组（使按钮组中的所有按钮变大 - 增加字体大小和填充）	测试一下	Button Groups
`.btn-group-sm`	小按钮组（使按钮组中的所有按钮更小）	测试一下	Button Groups
`.btn-group-xs`	超小按钮组（使按钮组中的所有按钮都超小）	测试一下	Button Groups
`.btn-group-vertical`	使按钮组显示为垂直堆叠	测试一下	Button Groups
`.btn-info`	浅蓝色按钮。代表信息	测试一下	Buttons
`.btn-link`	使按钮看起来像一个链接（获取按钮行为）	测试一下	Buttons
`.btn-lg`	大按钮	测试一下	Buttons
`.btn-primary`	蓝色按钮。	测试一下	Buttons
`.btn-sm`	小按钮	测试一下	Buttons
`.btn-success`	绿色按钮。表示成功或积极行动	测试一下	Buttons
`.btn-warning`	黄色按钮。表示警告或负面行动	测试一下	Buttons
`.btn-xs`	超小按钮	测试一下	Buttons
`.caption`	在 `.thumbnail` 中添加标题文本	测试一下	Images
`.caret`	创建一个插入箭头图标，表示该按钮是一个下拉菜单	测试一下	Dropdowns
`.carousel`	创建一个轮播（幻灯片）	测试一下	Carousel
`.carousel-caption`	为轮播中的每张幻灯片创建标题文本	测试一下	Carousel
`.carousel-control`	下一个和上一个链接的容器	测试一下	Carousel
`.carousel-indicators`	在每张幻灯片的底部添加小点/指示器（指示轮播中有多少张幻灯片，以及用户当前正在查看哪张幻灯片）	测试一下	Carousel
`.carousel-inner`	幻灯片项目的容器	测试一下	Carousel
`.center-block`	居中任何元素（将元素设置为 `display:block` 与 `margin-right:auto` 和 `margin-left:auto`）	测试一下	Helpers
`.checkbox`	复选框的容器	测试一下	Inputs
`.checkbox-inline`	使多个复选框出现在同一行	测试一下	Inputs
`.clearfix`	清除浮动	测试一下	Helpers
`.close`	表示关闭图标	测试一下	Helpers
`.col--`	响应式网格（跨度 1-12 列）。超小型设备手机（< 768px）、小型设备平板电脑（≥768px）、中型设备台式机（≥992px）、大型设备台式机（≥1200px）。列值可以是 1-12。	测试一下	Grid
`.col--offset-`	将列向右移动。这些类将列的左边距增加 * 列	测试一下	Grid
`.col--pull-`	更改网格列的顺序	测试一下	Grid
`.col--push-`	更改网格列的顺序	测试一下	Grid
`.collapse`	表示可折叠的内容 - 可以根据需要隐藏或显示	测试一下	Collapse
`.collapse in`	默认显示可折叠内容	测试一下	Collapse
`.container`	固定宽度容器，宽度由屏幕站点确定。左右边距相等。	测试一下	Containers
`.container-fluid`	跨越整个屏幕宽度的容器	测试一下	Containers
`.control-label`	允许将标签用于表单验证	测试一下	Forms
`.danger`	为表格行 (`<tr>` 或表格单元格 (`<td>`)添加红色背景。表示危险或潜在的负面操作	测试一下	Tables
`.disabled`	禁用按钮（在悬停时添加不透明度和"禁止停车标志"图标）	测试一下	Buttons
`.disabled`	禁用下拉项（在悬停时添加灰色文本颜色和"禁止停车标志"图标）	测试一下	Dropdowns
`.disabled`	禁用分页链接（无法点击 - 添加灰色文本颜色和悬停时的"禁止停车标志"图标）	测试一下	Pagination
`.disabled`	禁用列表组中的列表项（无法点击 - 添加灰色背景颜色和悬停时的"禁止停车标志"图标）	测试一下	List Groups
`.divider`	用于在下拉菜单中用细的水平边框分隔链接	测试一下	Dropdowns
`.dl-horizontal`	将 `<dl>` 元素中的术语 `<dt>` 和描述 `<dd>` 并排排列。像默认的 `<dl>` 一样开始，但是当浏览器窗口展开时，它会并排排列	测试一下	Typography
`.dropdown`	创建一个可切换菜单，允许用户从预定义列表中选择一个值	测试一下	Dropdowns
`.dropdown-header`	用于在下拉菜单中添加标题	测试一下	Dropdowns
`.dropdown-menu`	为下拉菜单容器添加默认样式	测试一下	Dropdowns
`.dropdown-menu-right`	右对齐下拉菜单	测试一下	Dropdowns
`.dropdown-toggle`	用于应该隐藏和显示（切换）下拉菜单的按钮	测试一下	Dropdowns
`.dropup`	表示下拉菜单（向上而不是向下）	测试一下	Dropdowns
`.embed-responsive`	嵌入内容的容器。使视频或幻灯片在任何设备上正确缩放	测试一下	Images
`.embed-responsive-16by9`	嵌入内容的容器。创建纵横比为 16:9 的嵌入内容	测试一下	Images
`.embed-responsive-4by3`	嵌入内容的容器。创建宽高比为 4:3 的嵌入内容	测试一下	Images
`.embed-responsive-item`	在 `.embed-responsive`内部使用。将视频很好地缩放到父元素	测试一下	Images
`.fade`	关闭警告框时添加淡入淡出效果	测试一下	Alerts
`.form-control`	用于输入、文本区域和选择元素以跨越页面的整个宽度并使其具有响应性	测试一下	Forms
`.form-control-feedback`	表单验证类	测试一下	Inputs 2
`.form-control-static`	在水平表单中的表单标签旁边添加纯文本	测试一下	Inputs 2
`.form-group`	表单输入和标签的容器	测试一下	Forms
`.form-inline`	使 <form> 与内联块控件左对齐（这仅适用于视口中至少 768px 宽的表单）	测试一下	Forms
`.form-horizontal`	在水平布局中对齐标签和表单控件组	测试一下	Forms
`.glyphicon`	创建一个图标。 Bootstrap 提供了 260 个来自 Glyphicons Halflings 集的免费字形图标	测试一下	Glyphicons
`.has-danger`	为标签添加红色，为输入添加红色边框，以及输入内的错误图标（与 `.has-feedback`一起使用）	测试一下	Forms
`.has-feedback`	为输入添加反馈图标（复选标记、警告和错误标志）	测试一下	Forms
`.has-success`	为标签添加绿色，为输入添加绿色边框，以及在输入内添加复选标记图标（与 `.has-feedback`一起使用）	测试一下	Forms
`.has-warning`	为标签添加黄色/橙色颜色，为输入添加黄色/橙色边框，以及在输入中添加复选标记图标（与 `.has-feedback`一起使用）	测试一下	Forms
`.help-block`	一段帮助文本，换行并可能超出一行。	测试一下	Input Sizing
`.hidden`	强制隐藏元素(`display:none`)	测试一下	Helpers
`.hidden-*`	根据屏幕大小隐藏内容	测试一下	Helpers
`.hide`	已弃用。改用 `.hidden`	测试一下	Helpers
`.h1 - .h6`	使元素看起来像所选类的标题 (h1-h6)	测试一下	Typography
`.icon-bar`	在导航栏中使用以创建汉堡菜单（三个水平条）	测试一下	Navbar
`.icon-next`	Unicode 图标（指向右侧的箭头），用于轮播。这通常用字形图标代替	测试一下	Carousel
`.icon-prev`	Unicode 图标（指向左的箭头），用于轮播。这通常用字形图标代替	测试一下	Carousel
`.img-circle`	将图像塑造成圆形（IE8 及更早版本不支持）	测试一下	Images
`.img-responsive`	使图像响应式	测试一下	Images
`.img-rounded`	为图像添加圆角	测试一下	Images
`.img-thumbnail`	将图像塑造成缩略图（边框）	测试一下	Images
`.in`	淡入淡出选项卡	测试一下	Tabs
`.info`	为表格行（`<tr>` 或表格单元格 (`<td>`) 添加浅蓝色背景。表示中性信息更改或操作	测试一下	Tables
`.initialism`	以稍小的字体大小显示 `<abbr>` 元素内的文本	测试一下	Typography
`.input-group`	通过在其前面或后面添加图标、文本或按钮作为"帮助文本"来增强输入的容器	测试一下	Inputs
`.input-group-lg`	大输入组	测试一下	Inputs
`.input-group-sm`	小输入组	测试一下	Inputs
`.input-group-addon`	与 `.input-group` 类一起，此类可以在输入字段旁边添加图标或帮助文本	测试一下	Inputs
`.input-group-btn`	与 `.input-group` 类一起，该类在输入旁边附加了一个按钮。通常用作搜索栏	测试一下	Inputs
`.input-lg`	大输入字段	测试一下	Input Sizing
`.input-sm`	小输入框	测试一下	Input Sizing
`.invisible`	使元素不可见 (`visibility:hidden`). 注释: 即使该元素是不可见的，它也会占用页面上的空间	测试一下	Helpers
`.item`	类添加到每个轮播项目。可能是文字或图片	测试一下	Carousel
`.jumbotron`	创建一个带圆角的填充灰色框，以放大其中文本的字体大小。创建一个大框，以引起对某些特殊内容或信息的额外注意	测试一下	Jumbotron
`.label`	将灰色圆角框添加到元素。提供有关某事的附加信息（例如 "New")	测试一下	Labels
`.label-danger`	红色标签	测试一下	Labels
`.label-info`	浅蓝色标签	测试一下	Labels
`.label-success`	绿色标签	测试一下	Labels
`.label-warning`	黄色的标签	测试一下	Labels
`.lead`	增加段落的字体大小和行高	测试一下	Typography
`.left`	用于标识左轮播控件	测试一下	Carousel
`.list-group`	为 `<li>` 元素创建带边框的列表组	测试一下	List Group
`.list-group-item`	添加到列表组中的每个 `<li>` 元素	测试一下	List Group
`.list-group-item-heading`	创建列表组标题（用于除 `<li>`)之外的其他元素）	测试一下	List Group
`.list-group-item-text`	用于列表组内的项目文本（用于除`<li>`之外的其他元素）	测试一下	List Group
`.list-group-item-danger`	列表组中列表项的红色背景色	测试一下	List Group
`.list-group-item-info`	列表组中列表项的浅蓝色背景色	测试一下	List Group
`.list-group-item-success`	列表组中列表项的绿色背景色	测试一下	List Group
`.list-group-item-warning`	列表组中列表项的黄色背景色	测试一下	List Group
`.list-inline`	将所有列表项放在一行上（水平菜单）	测试一下	Tabs
`.list-unstyled`	从 `<ul>` 或 `<ol>` 列表中删除所有默认列表样式（项目符号、左边距等）样式	测试一下	Typography
`.mark`	突出显示文本: 突出显示的文本	测试一下	Typography
`.media`	对齐媒体对象（如图像或视频 - 通常用于博客文章中的评论等）	测试一下	Media Objects
`.media-body`	应该出现在媒体对象旁边的文本	测试一下	Media Objects
`.media-heading`	在媒体对象内创建标题	测试一下	Media Objects
`.media-list`	嵌套媒体列表	测试一下	Media Objects
`.media-object`	表示媒体对象（图像或视频）	测试一下	Media Objects
`.modal`	将内容识别为模态并为其带来焦点	测试一下	Modals
`.modal-body`	定义模态体的样式。在此处添加任何 HTML 标记（p、img 等）	测试一下	Modals
`.modal-content`	样式化模态（边框、背景色等）。如果需要，在其中添加模态框的页眉、正文和页脚	测试一下	Modals
`.modal-dialog`	设置模态框的适当宽度和边距	测试一下	Modals
`.modal-footer`	模态框的页脚（通常包含一个操作按钮和一个关闭按钮）	测试一下	Modals
`.modal-header`	模态框的标题（通常包含标题和关闭按钮）	测试一下	Modals
`.modal-lg`	大模态（比默认宽）	测试一下	Modals
`.modal-open`	用于`<body>` 元素以防止页面滚动 (`overflow:hidden`)	测试一下	Modals
`.modal-sm`	小模态（宽度更小）	测试一下	Modals
`.modal-title`	模态的标题	测试一下	Modals
`.nav nav-tabs`	表示选项卡式菜单	测试一下	Tabs
`.nav nav-pills`	表示胶囊菜单	测试一下	Tabs
`.nav .navbar-nav`	用于 `<ul>` 容器，该容器包含导航栏中带有链接的列表项	测试一下	Navbar
`.nav-justified`	中心标签/胶囊。请注意，在小于 768 像素的屏幕上，项目是堆叠的（内容将保持居中）	测试一下	Tabs
`.nav-stacked`	垂直堆叠标签或胶囊	测试一下	Tabs
`.nav-tabs`	创建一个选项卡式菜单	测试一下	Tabs
`.navbar`	创建导航栏	测试一下	Navbar
`.navbar-brand`	添加到导航栏中的链接或标题元素以表示徽标或标题	测试一下	Navbar
`.navbar-btn`	垂直对齐导航栏中的按钮	测试一下	Navbar
`.navbar-collapse`	折叠导航栏（在手机和小型平板电脑上隐藏并替换为菜单/汉堡图标）	测试一下	Navbar
`.navbar-default`	创建默认导航栏（浅灰色背景色）	测试一下	Navbar
`.navbar-fixed-bottom`	使导航栏停留在屏幕底部（粘性/固定）	测试一下	Navbar
`.navbar-fixed-top`	使导航栏停留在屏幕顶部（粘性/固定）	测试一下	Navbar
`.navbar-form`	添加到导航栏中的表单元素以垂直居中它们（适当的填充）	测试一下	Navbar
`.navbar-header`	添加到包含代表徽标或标题的链接/元素的容器元素	测试一下	Navbar
`.navbar-inverse`	创建一个黑色导航栏（而不是浅灰色）	测试一下	Navbar
`.navbar-left`	将导航栏中的导航链接、表单、按钮或文本向左对齐	测试一下	Navbar
`.navbar-link`	将元素设置为看起来像导航栏中的链接（锚点在悬停时获得适当的填充和下划线，而其他元素（如 p 或 span）获得默认悬停效果 - 反向导航栏中的白色和默认导航栏中的黑色）	测试一下	Navbar
`.navbar-nav`	用于 `<ul>` 容器，该容器包含导航栏中带有链接的列表项	测试一下	Navbar
`.navbar-right`	将导航栏中的导航链接、表单、按钮或文本向右对齐。	测试一下	Navbar
`.navbar-static-top`	从导航栏中删除左、上和右边框（圆角）（默认导航栏有灰色边框和 4px 边框半径默认）	测试一下	Navbar
`.navbar-text`	垂直对齐导航栏中非链接的任何元素（确保正确的填充）	测试一下	Navbar
`.navbar-toggle`	设置应在小屏幕上打开导航栏的按钮的样式。通常与三个 `.icon-bar` 类一起使用，以指示可切换的菜单图标（汉堡/酒吧）	测试一下	Navbar
`.next`	在轮播控件中用于标识下一个控件	测试一下	Carousel
`.next`	用于将寻呼机按钮与页面右侧对齐（下一个按钮）	测试一下	Pager
`.page-header`	在标题下添加一条水平线（+ 在元素周围添加一些额外的空间）	测试一下	Page Header
`.pager`	创建上一个/下一个按钮（用于 `<ul>` 元素）	测试一下	Pager
`.pagination`	创建分页（当您的网站有很多页面时很有用。用于`<ul>` 元素）	测试一下	Pagination
`.pagination-lg`	大分页（每个分页链接的字体大小为 18px。默认为 14px）	测试一下	Pagination
`.pagination-sm`	小分页（每个分页链接的字体大小为 12px。默认为 14px）	测试一下	Pagination
`.panel`	创建一个有边框的框，在其内容周围有一些填充	测试一下	Panels
`.panel-body`	面板内的内容容器	测试一下	Panels
`.panel-collapse`	可折叠面板（在隐藏和显示面板之间切换）	测试一下	Collapse
`.panel-danger`	红色面板。表示危险	测试一下	Panels
`.panel-info`	浅蓝色面板。表示信息	测试一下	Panels
`.panel-success`	绿色面板。表示成功	测试一下	Panels
`.panel-warning`	黄色面板。表示警告	测试一下	Panels
`.panel-footer`	创建面板页脚（浅色背景色）	测试一下	Panels
`.panel-group`	用于将许多面板组合在一起。这将删除每个面板下方的底部边距	测试一下	Panels
`.panel-heading`	创建面板标题（浅色背景色）	测试一下	Panels
`.panel-title`	在 `.panel-heading` 内使用以调整文本样式（删除边距并添加 16 像素的字体大小）	测试一下	Panels
`.popover`	用户单击元素时出现的弹出框	测试一下	Popover
`.pre-scrollable`	使 `<pre>` 元素可滚动 (`max-height` 为 350 像素并提供 y 轴滚动条)	测试一下	Helpers
`.prev`	用于轮播以指示"上一个"链接	测试一下	Carousel
`.previous`	用于将寻呼机按钮与页面左侧对齐（上一个按钮）	测试一下	Pager
`.progress`	进度条的容器	测试一下	Progress Bars
`.progress-bar`	创建进度条	测试一下	Progress Bars
`.progress-bar-danger`	红色进度条。表示危险	测试一下	Progress Bars
`.progress-bar-info`	浅蓝色进度条。表示信息	测试一下	Progress Bars
`.progress-bar-striped`	创建条纹进度条	测试一下	Progress Bars
`.progress-bar-success`	绿色进度条。表示成功	测试一下	Progress Bars
`.progress-bar-warning`	黄色进度条。表示警告	测试一下	Progress Bars
`.pull-left`	向左浮动一个元素	测试一下	Helpers
`.pull-right`	向右浮动一个元素	测试一下	Helpers
`.right`	用于识别正确的轮播控件	测试一下	Carousel
`.row`	响应列的容器	测试一下	Grid
`.row-no-gutters`	从行及其列中删除装订线	测试一下	Grid
`.show`	显示一个元素 (`display:block)`	测试一下	Helpers
`.small`	在任何标题中创建更轻的辅助文本	测试一下	Typography
`.sr-only`	在除屏幕阅读器之外的所有设备上隐藏元素	测试一下	Helpers
`.sr-only-focusable`	在除屏幕阅读器之外的所有设备上隐藏元素	测试一下	Helpers
`.success`	为表格行 (`<tr>` 或表格单元格 (`<td>`)添加绿色背景色。表示成功或积极行动	测试一下	Tables
`.tab-content`	与 `.tab-pane` 一起使用以创建可切换/动态选项卡/胶囊	测试一下	Tabs
`.tab-pane`	与 `.tab-content` 一起使用以创建可切换/动态选项卡/胶囊	测试一下	Tabs
`.table`	为表格添加基本样式（填充、底部边框等）	测试一下	Tables
`.table-bordered`	在表格和单元格的所有边添加边框	测试一下	Tables
`.table-condensed`	通过将单元格填充减半，使表格更紧凑	测试一下	Tables
`.table-hover`	创建一个可悬停的表格（在悬停时在表格行上添加灰色背景颜色）	测试一下	Tables
`.table-responsive`	使表格响应（在需要时添加水平滚动条）	测试一下	Tables
`.text-capitalize`	表示大写的文本	测试一下	Typography
`.text-center`	居中对齐文本	测试一下	Typography
`.text-danger`	红色文本颜色。表示危险	测试一下	Typography
`.text-hide`	隐藏文本（帮助用背景图像替换元素的文本内容）	测试一下	Typography
`.text-info`	浅蓝色文本颜色。表示信息	测试一下	Typography
`.text-justify`	表示两端对齐的文本	测试一下	Typography
`.text-left`	将文本左对齐	测试一下	Typography
`.text-lowercase`	将文本更改为小写	测试一下	Typography
`.text-muted`	灰色文本颜色	测试一下	Typography
`.text-nowrap`	防止文本换行	测试一下	Typography
`.text-primary`	蓝色文本颜色	测试一下	Typography
`.text-right`	将文本右对齐	测试一下	Typography
`.text-success`	绿色文本颜色。表示成功	测试一下	Typography
`.text-uppercase`	使文本大写	测试一下	Typography
`.text-warning`	黄色/橙色文本颜色。表示警告	测试一下	Typography
`.thumbnail`	在元素（通常是图像或视频）周围添加边框，使其看起来像缩略图	测试一下	Images
`.tooltip`	当用户将鼠标指针移到元素上时出现的弹出框	测试一下	Tooltip
`.visible-*`	自 v3.2.0 起已弃用。用于按设备显示和/或隐藏内容。注释: 使用 `.hidden-*` 代替	测试一下	Helpers
`.visible-print-block`	在打印（预览）视图中显示元素 (`display:block`)		Helpers
`.visible-print-inline`	在打印（预览）视图中显示元素 (`display:inline`)		Helpers
`.visible-print-inline-block`	在打印（预览）视图中显示元素 (`display:inline-block`)		Helpers
`.hidden-print`	在打印（预览）视图中隐藏元素 (`display:none`)		Helpers
`.warning`	为表格行 (`<tr>` 或表格单元格 (`<td>`)添加黄色背景色。表示警告	测试一下	Tables
`.well`	在具有灰色背景颜色和一些填充的元素周围添加圆形边框	测试一下	Wells
`.well-lg`	Large well (更多填充)	测试一下	Wells
`.well-sm`	Small well (少填充)	测试一下	Wells