网站访问量统计工具,老百姓网免费发布信息,广州做网站平台的企业,怎么建立本地网站目录
信息警告框
警告框
实例
警告框链接
实例
关闭警告框
实例
警告框动画
实例
按钮
按钮样式
实例
按钮轮廓
实例
编辑按钮尺寸
实例
块级按钮
实例
实例
活动/禁用按钮
实例
加载器按钮
实例
扩展小知识
按钮组
按钮组
实例
实例
垂直按钮组…目录
信息警告框
警告框
实例
警告框链接
实例
关闭警告框
实例
警告框动画
实例
按钮
按钮样式
实例
按钮轮廓
实例
编辑按钮尺寸
实例
块级按钮
实例
实例
活动/禁用按钮
实例
加载器按钮
实例
扩展小知识
按钮组
按钮组
实例
实例
垂直按钮组
实例
并排按钮组
实例
内嵌按钮组及下拉菜单
实例
垂直按钮组及下拉菜单
实例 信息警告框
警告框
警告框是使用 .alert 类创建的后跟上下文类之一
.alert-success这个类用于表示成功或积极的消息通常用于表示一个操作成功或没有问题。它使用绿色的背景和白色的文字来传达这种成功或积极的情感。.alert-info这个类用于表示信息性的消息通常用于提供一些额外的信息或说明。它使用浅蓝色的背景和白色的文字来传达这种信息性的情感。.alert-warning这个类用于表示警告或潜在的问题通常用于提醒用户注意某些潜在的问题或风险。它使用黄色的背景和黑色的文字来传达这种警告或潜在问题的情感。.alert-danger这个类用于表示危险或错误消息通常用于表示一个操作失败或出现错误。它使用红色的背景和白色的文字来传达这种危险或错误的情感。.alert-primary这个类用于提供主要或最重要的警告消息。它使用深蓝色的背景和白色的文字来传达这种重要性的情感。.alert-secondary这个类用于提供次要的或辅助的警告消息。它使用浅灰色的背景和黑色的文字来传达这种次要或辅助的情感。.alert-light这个类用于提供轻盈的或柔和的警告消息。它使用浅白色的背景和黑色的文字来传达这种轻盈或柔和的情感。.alert-dark这个类用于提供深色的或沉重的警告消息。它使用深黑色的背景和白色的文字来传达这种深色或沉重的情感。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3div classalert alert-successstrongalert-success/strong 指定操作成功提示信息。/divdiv classalert alert-infostrongalert-info/strong 请注意这个信息。/divdiv classalert alert-warningstrongalert-warning/strong 设置警告信息。/divdiv classalert alert-dangerstrongalert-danger/strong 失败的操作/divdiv classalert alert-primarystrongalert-primary/strong 这是一个重要的操作信息。/divdiv classalert alert-secondarystrongalert-secondary/strong 显示一些不重要的信息。/divdiv classalert alert-darkstrongalert-dark/strong 深灰色提示框。/divdiv classalert alert-lightstrongalert-light/strong浅灰色提示框。/div/div/body
/html
每一个警告类都有其特定的背景颜色和文字颜色以便更清晰地传达警告的类型和严重性。
运行结果 警告框链接
.alert-link 类是一个Bootstrap5提供的辅助类用于在警告框内的链接中创建匹配的彩色链接。当将 .alert-link 类添加到警告框内的任何链接中时链接的文本将自动变为与警告框的背景色相同的颜色以提高警告框的可读性和用户体验。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3div classalert alert-successstrongalert-success/strong a href# classalert-link指定操作成功提示信息。/a/divdiv classalert alert-infostrongalert-info/strong a href# classalert-link请注意这个信息。/a/divdiv classalert alert-warningstrongalert-warning/strong a href# classalert-link设置警告信息。/a/divdiv classalert alert-dangerstrongalert-danger/strong a href# classalert-link失败的操作/a/divdiv classalert alert-primarystrongalert-primary/strong a href# classalert-link这是一个重要的操作信息。/a/divdiv classalert alert-secondarystrongalert-secondary/strong a href# classalert-link显示一些不重要的信息。/a/divdiv classalert alert-darkstrongalert-dark/strong a href# classalert-link深灰色提示框。/a/divdiv classalert alert-lightstrongalert-light/strong a href# classalert-link浅灰色提示框。/a/div/div/body
/html
在上面的代码中将 .alert-link 类添加到 a 标签中使其文本颜色与警告框的背景相匹配从而提高了可读性。
使用 .alert-link 类可以方便地创建与警告框风格一致的链接使警告框的外观更加协调和一致。
问题为什么我们在链接的 href 属性中写一个 #
答在 HTML 中href 属性用于指定链接的目标地址。当在 href 属性中使用 #这实际上是在告诉浏览器这个链接的目标是当前页面的特定位置。
具体来说# 是一个特殊的 URL 符号表示页面的 hash 或 fragment。在 URL 中#后面通常跟着一个标识符用来指向页面内部的一个特定元素。例如#top 就会将页面滚动到该页面的顶部。
然而如果在 href 属性中只写 #而不附加任何标识符这意味着链接的目标是当前页面的顶部。这在某些情况下很有用例如
当想要创建一个可以点击但实际上不跳转到其他页面的 空链接。当想要创建一个 返回顶部 的链接可以在点击时使用 JavaScript 来实现页面滚动的效果。
请注意虽然这种方式在某些情况下有用但它并不能真正链接到其他页面。因此当你点击这样的链接时浏览器不会尝试加载任何新的页面也不会改变浏览器的历史记录。
运行结果
关闭警告框
.alert-dismissible 类是Bootstrap 5中用于关闭警告框的机制。
通过在警告框的 div 元素中添加 .alert-dismissible 类可以启用关闭警告框的功能。然后在关闭按钮的链接上添加 classbtn-close 和 data-bs-dismissalert指定要关闭的警告框的元素。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3div classalert alert-success alert-dismissiblebutton typebutton classbtn-close data-bs-dismissalert/buttonstrongalert-success/strong a href# classalert-link指定操作成功提示信息。/a/divdiv classalert alert-info alert-dismissiblebutton typebutton classbtn-close data-bs-dismissalert/buttonstrongalert-info/strong a href# classalert-link请注意这个信息。/a/divdiv classalert alert-warning alert-dismissiblebutton typebutton classbtn-close data-bs-dismissalert/buttonstrongalert-warning/strong a href# classalert-link设置警告信息。/a/divdiv classalert alert-danger alert-dismissiblebutton typebutton classbtn-close data-bs-dismissalert/buttonstrongalert-danger/strong a href# classalert-link失败的操作/a/divdiv classalert alert-primary alert-dismissiblebutton typebutton classbtn-close data-bs-dismissalert/buttonstrongalert-primary/strong a href# classalert-link这是一个重要的操作信息。/a/divdiv classalert alert-secondary alert-dismissiblebutton typebutton classbtn-close data-bs-dismissalert/buttonstrongalert-secondary/strong a href# classalert-link显示一些不重要的信息。/a/divdiv classalert alert-dark alert-dismissiblebutton typebutton classbtn-close data-bs-dismissalert/buttonstrongalert-dark/strong a href# classalert-link深灰色提示框。/a/divdiv classalert alert-light alert-dismissiblebutton typebutton classbtn-close data-bs-dismissalert/buttonstrongalert-light/strong a href# classalert-link浅灰色提示框。/a/div/div/body
/html
在上面的代码中.alert-dismissible 类被添加到 div 元素中然后在关闭按钮的链接上使用了 classbtn-close 和 data-bs-dismissalert。当用户点击 关闭 按钮时警告框将自动关闭。
使用这种关闭提示框的机制可以提供更好的用户体验让用户能够更方便地关闭或忽略不需要的警告信息。
运行结果 警告框动画
.fade 和 .show 类是用于控制警告框动画的两个辅助类。
.fade 类用于将警告框的元素从可见到不可见并使用淡出效果过渡。这意味着当警告框被关闭时它将以淡出的方式逐渐消失。.show 类用于将警告框的元素设置为可见并显示出来。这是默认的警告框显示方式当警告框被创建时它将自动使用 .show 类来显示出来。
这两个类可以结合使用以实现警告框的淡入淡出效果。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3div classalert alert-success alert-dismissible fade showbutton typebutton classbtn-close data-bs-dismissalert/buttonstrongalert-success/strong a href# classalert-link指定操作成功提示信息。/a/divdiv classalert alert-info alert-dismissible fade showbutton typebutton classbtn-close data-bs-dismissalert/buttonstrongalert-info/strong a href# classalert-link请注意这个信息。/a/divdiv classalert alert-warning alert-dismissible fade showbutton typebutton classbtn-close data-bs-dismissalert/buttonstrongalert-warning/strong a href# classalert-link设置警告信息。/a/divdiv classalert alert-danger alert-dismissible fade showbutton typebutton classbtn-close data-bs-dismissalert/buttonstrongalert-danger/strong a href# classalert-link失败的操作/a/divdiv classalert alert-primary alert-dismissible fade showbutton typebutton classbtn-close data-bs-dismissalert/buttonstrongalert-primary/strong a href# classalert-link这是一个重要的操作信息。/a/divdiv classalert alert-secondary alert-dismissible fade showbutton typebutton classbtn-close data-bs-dismissalert/buttonstrongalert-secondary/strong a href# classalert-link显示一些不重要的信息。/a/divdiv classalert alert-dark alert-dismissible fade showbutton typebutton classbtn-close data-bs-dismissalert/buttonstrongalert-dark/strong a href# classalert-link深灰色提示框。/a/divdiv classalert alert-light alert-dismissible fade showbutton typebutton classbtn-close data-bs-dismissalert/buttonstrongalert-light/strong a href# classalert-link浅灰色提示框。/a/div/div/body
/html
在上面的代码中使用了 .fade 和 .show 类这样当警告框被创建时它会以淡入的方式出现并在被关闭时以淡出的方式消失。使用这些类可以增强警告框的动画效果提供更流畅的用户体验。
运行结果
按钮
按钮样式
Bootstrap 5 提供了多种按钮样式可以用于创建不同类型的按钮以满足不同的设计需求。
注意按钮类可用于 a, button, 或 input 元素上。
以下是一些常用的按钮样式
.btn这是最基本的按钮样式用于创建一个基本的按钮。.btn-primary这是主要按钮样式用于突出显示最重要的操作或功能。.btn-secondary这是次要按钮样式用于突出显示次要的操作或功能。.btn-success这是成功按钮样式用于表示成功或积极的操作或功能。.btn-info这是信息按钮样式用于表示提供信息或说明的操作或功能。.btn-warning这是警告按钮样式用于表示警告或需要注意的操作或功能。.btn-danger这是危险按钮样式用于表示危险或消极的操作或功能。.btn-dark这是深色按钮样式用于表示重要或严肃的操作或功能。.btn-light这是轻量按钮样式用于表示轻量或简单的操作或功能。.btn-link这是链接按钮样式用于创建类似于链接的按钮通常用于在页面中创建轻量级的交互元素。
这些样式可以单独使用也可以组合使用以创建具有不同外观和感觉的按钮。同时还可以通过添加一些辅助类来进一步自定义按钮的外观和行为。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3button typebutton classbtn基本按钮/buttonbutton typebutton classbtn btn-primary主要按钮/buttonbutton typebutton classbtn btn-secondary次要按钮/buttonbutton typebutton classbtn btn-success成功/buttonbutton typebutton classbtn btn-info信息/buttonbutton typebutton classbtn btn-warning警告/buttonbutton typebutton classbtn btn-danger危险/buttonbutton typebutton classbtn btn-dark黑色/buttonbutton typebutton classbtn btn-light浅色/buttonbutton typebutton classbtn btn-link链接/buttonbutton typebutton classbtn btn-primary btn-link按钮链接/button/div/body
/html
运行结果
按钮轮廓
Bootstrap 5 还提供了八个轮廓/边框按钮。
以下是八个轮廓/边框按钮的样式类
.btn-outline-primary这个样式类用于创建具有主要颜色轮廓的按钮。当鼠标悬停在按钮上方时轮廓颜色会变深。.btn-outline-secondary这个样式类用于创建具有次要颜色轮廓的按钮。当鼠标悬停在按钮上方时轮廓颜色会变深。.btn-outline-success这个样式类用于创建具有成功颜色轮廓的按钮。当鼠标悬停在按钮上方时轮廓颜色会变深。.btn-outline-info这个样式类用于创建具有信息颜色轮廓的按钮。当鼠标悬停在按钮上方时轮廓颜色会变深。.btn-outline-warning这个样式类用于创建具有警告颜色轮廓的按钮。当鼠标悬停在按钮上方时轮廓颜色会变深。.btn-outline-danger这个样式类用于创建具有危险颜色轮廓的按钮。当鼠标悬停在按钮上方时轮廓颜色会变深。.btn-outline-light这个样式类用于创建具有轻量颜色轮廓的按钮。当鼠标悬停在按钮上方时轮廓颜色会变深。.btn-outline-dark这个样式类用于创建具有深色颜色轮廓的按钮。当鼠标悬停在按钮上方时轮廓颜色会变深。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3button classbtn btn-outline-primary主要轮廓按钮/buttonbutton classbtn btn-outline-secondary次要轮廓按钮/buttonbutton classbtn btn-outline-success成功轮廓按钮/buttonbutton classbtn btn-outline-info信息轮廓按钮/buttonbutton classbtn btn-outline-warning警告轮廓按钮/buttonbutton classbtn btn-outline-danger危险轮廓按钮/buttonbutton classbtn btn-outline-light轻量轮廓按钮/buttonbutton classbtn btn-outline-dark深色轮廓按钮/button/div/body
/html
这些样式类可以方便地创建与主题和样式相匹配的轮廓/边框按钮并增强用户体验。
运行结果
鼠标悬停后:
按钮尺寸
Bootstrap 5 提供了几个用于调整按钮尺寸的辅助类其中包括
.btn-lg 类用于创建大型按钮通常用于强调或重要操作。.btn-sm 类用于创建小型按钮通常用于次要操作或用于表单控件的标签。
这些辅助类可以与按钮的基本类.btn和其他样式类一起使用以创建不同尺寸和外观的按钮。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3button typebutton classbtn btn-primary btn-lg大型按钮/buttonbutton typebutton classbtn btn-primary默认按钮/buttonbutton typebutton classbtn btn-primary btn-sm小型按钮/button/div/body
/html
通过使用这些辅助类可以轻松地创建不同尺寸和外观的按钮以满足不同的设计需求。
运行结果
块级按钮
Bootstrap 5 中的块级按钮可以通过添加 .btn-block 类来创建。这种类型的按钮可以占据整行空间并具有水平滚动条通常用于需要突出显示或覆盖整个元素的操作。
注意如需创建跨越父元素整个宽度的块级按钮请在父元素上使用 .d-grid类。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3div classd-gridh1块级按钮/h1button typebutton classbtn btn-primary btn-block块级按钮/button/div/div/body
/html
在上面的示例中.btn-primary 是按钮的基本类用于指定按钮的颜色和样式。.btn-block 是辅助类用于将按钮设置为块级按钮。
运行结果
如果有多个块级按钮可以使用 .gap-* 类来设置它们之间的间距。例如.gap-5 将设置按钮之间间距为 5 个像素。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3div classd-grid gap-5h1块级按钮/h1button typebutton classbtn btn-primary btn-block块级按钮 1/buttonbutton typebutton classbtn btn-primary btn-block块级按钮 2/button/div/div/body
/html
运行结果
活动/禁用按钮
在Bootstrap 5中可以通过添加.active类来激活按钮使其处于可用状态并可以触发JavaScript代码中的点击事件。而要禁止按钮的点击可以使用disabled属性或者添加.disabled类。
注意对于a元素由于不支持disabled属性如果要禁止链接的点击可以添加.disabled类来实现。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3button typebutton classbtn btn-primary主要按钮/button!-- 激活按钮 -- button classbtn btn-primary active激活按钮/button !-- 禁止按钮 -- button classbtn btn-primary disabled禁止按钮 1/buttonbutton classbtn btn-primary disabled禁止按钮 2/button!-- 禁止链接 -- a href# classbtn btn-primary disabled禁止链接/a/div/body
/html
运行结果
加载器按钮
通过Bootstrap我们可以很容易地设置一个正在加载的按钮。通过添加一个新的CSS类spinner-border或spinner-grow到含按钮的元素中我们可以创建一个旋转的边框或增长的形状以表示按钮正在加载。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3button classbtn btn-primaryspan classspinner-border spinner-border-sm/span主要按钮/buttonbutton classbtn btn-primary activespan classspinner-border spinner-border-lg/span激活按钮/buttonbutton classbtn btn-primary disabledspan classspinner-grow spinner-grow-sm/span禁止按钮 1/buttonbutton classbtn btn-primary disabledspan classspinner-grow spinner-grow-lg/span禁止按钮 2/buttona href# classbtn btn-primary disabledspan classspinner-border spinner-border/span禁止链接/a/div/body
/html
运行结果此处是动态的
扩展小知识
spinner-border-smspinner-grow-sm同理是一个Bootstrap提供的CSS类用于创建一个小的旋转边框表示加载或旋转的状态。它可以应用于任何元素但通常会将其应用于按钮或其他具有交互性的元素。
这个类使用了CSS的伪元素和动画通过定义边框的旋转动画来实现加载效果。通过将这个类应用于按钮或其他元素可以使其在加载或旋转时呈现动态效果提供更好的用户体验。
此外Bootstrap还提供了其他大小的旋转边框类如spinner-border和spinner-border-lg可以根据需要选择适当的大小来适配不同的场景。
按钮组
按钮组
Bootstrap 5 提供了按钮组的功能允许将多个按钮组合在一起。要创建一个按钮组需要使用带有 .btn-group 类的 div 元素。
实例
以下是一个示例代码展示了如何使用 Bootstrap 5 创建一个按钮组
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3div classbtn-groupbutton typebutton classbtn btn-primary按钮 1/buttonbutton typebutton classbtn btn-secondary按钮 2/buttonbutton typebutton classbtn btn-success按钮 3/button/div/div/body
/html
在上面的代码中我们使用了一个 div 元素并给它添加了 .btn-group 类来创建按钮组。然后我们添加了三个按钮元素每个按钮都具有不同的样式类例如 .btn-primary、.btn-secondary 和 .btn-success。
运行结果 注意如果你想要调整按钮组的尺寸你可以使用 .btn-group-* 类。例如.btn-group-lg 可以用于创建大按钮组而 .btn-group-sm 可以用于创建小按钮组。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3h1默认按钮:/h1div classbtn-groupbutton typebutton classbtn btn-primary按钮 1/buttonbutton typebutton classbtn btn-secondary按钮 2/buttonbutton typebutton classbtn btn-success按钮 3/button/divbr /h1大按钮:/h1div classbtn-group-lgbutton typebutton classbtn btn-primary大按钮 1/buttonbutton typebutton classbtn btn-secondary大按钮 2/buttonbutton typebutton classbtn btn-success大按钮 3/button/divbr /h1小按钮:/h1div classbtn-group-smbutton typebutton classbtn btn-primary小按钮 1/buttonbutton typebutton classbtn btn-secondary小按钮 2/buttonbutton typebutton classbtn btn-success小按钮 3/button/div/div/body
/html
运行结果 垂直按钮组
Bootstrap 5 提供了垂直按钮组的功能可以使用 .btn-group-vertical 类来创建。
实例
以下是一个示例代码展示如何使用 Bootstrap 5 创建一个垂直按钮组
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3div classbtn-group-verticalbutton typebutton classbtn btn-primary按钮 1/buttonbutton typebutton classbtn btn-secondary按钮 2/buttonbutton typebutton classbtn btn-success按钮 3/button/div/div/body
/html
在上面的代码中我们使用了一个 div 元素并给它添加了 .btn-group-vertical 类来创建垂直按钮组。然后我们添加了三个按钮元素每个按钮都具有不同的样式类例如 .btn-primary、.btn-secondary 和 .btn-success。
运行结果 并排按钮组
Bootstrap 5 允许将多个按钮组放置在同一行上。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3div classbtn-groupbutton typebutton classbtn btn-primary按钮 1/buttonbutton typebutton classbtn btn-secondary按钮 2/buttonbutton typebutton classbtn btn-success按钮 3/button/divdiv classbtn-groupbutton typebutton classbtn btn-primary按钮 1/buttonbutton typebutton classbtn btn-secondary按钮 2/buttonbutton typebutton classbtn btn-success按钮 3/button/div/div/body
/html
运行结果
内嵌按钮组及下拉菜单
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3div classbtn-groupbutton classbtn btn-primary按钮 1/buttonbutton classbtn btn-primary按钮 2/buttondiv classbtn-groupbutton classbtn btn-primary dropdown-toggle data-bs-toggledropdown按钮3/buttonul classdropdown-menulia classdropdown-item href#按钮 1/a/lilia classdropdown-item href#按钮 2/a/li/ul/div/div/div/body
/html
运行结果 垂直按钮组及下拉菜单 实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3div classbtn-group-verticalbutton classbtn btn-primary按钮 1/buttonbutton classbtn btn-primary按钮 2/buttondiv classbtn-groupbutton classbtn btn-primary dropdown-toggle data-bs-toggledropdown按钮3/buttonul classdropdown-menulia classdropdown-item href#按钮 1/a/lilia classdropdown-item href#按钮 2/a/li/ul/div/div/div/body
/html
运行结果
