HTML CSS JAVASCRIPT BOOTSTRAP JQUERY PHP SQL PYTHON PYTHON2 JAVA C C++ C# Linux AI 教程库 参考手册 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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

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

提示: 要查看所有 Bootstrap 4 类的完整列表，请转到我们的 All Bootstrap 4 CSS 类参考。


❮ 上一节 下一节 ❯