Bootstrap 5 选择菜单选择菜单选择菜单(选择一项):多选菜单(按住 ctrl 或 shift(或用鼠标拖动)可选择多个):如果您希望允许用户从多个选项中进行选择,请使用选择菜单。如需在 Bootstrap 5 中设置选择菜单的样式,请将 .form-sele
Bootstrap 5 表单堆叠表单所有设置了 .form-control 类的 <input> 和 <textarea> 元素都可获得正确的表单样式:实例<form action="/action_page.php"> <div class="mb-3 mt-3"> <label for="email" class="form-la
Bootstrap 5 Flex弹性框Bootstrap 3 和 Bootstrap 4 & 5 的最大区别在于 Bootstrap 5 现在使用 flexbox 而不是浮动来处理布局。弹性的框布局模块,可以更轻松地设计弹性响应式布局结构,而无需使用浮动或定位。如果您不
Bootstrap 5 实用工具Utilities / Helper 类Bootstrap 5 有很多 utility/helper 类,可以在不使用任何 CSS 代码的情况下快速设置元素样式。边框使用边框类为元素添加或删除边框:实例<span class="border"></span><span
Bootstrap 5 OffcanvasOffcanvas(帆布)Offcanvas 类似于模态(默认隐藏并在激活时显示),不同之处在于它通常用作侧边栏导航菜单。如何创建 Offcanvas 侧边栏下例展示如何创建 offcanvas 侧边栏:实例<!-- Offcanvas Sidebar -
Bootstrap 5 ScrollspyScrollspyScrollspy 用于根据滚动位置自动更新导航列表中的链接。如何创建 Scrollspy下例展示如何创建 Scrollspy:实例<!-- 可滚动区域 --><body data-bs-spy="scroll" data-bs-target=".navbar"
Bootstrap 5 ToastToast(吐司)Toast 组件类似警告框,当发生某些事情时(例如当用户单击按钮、提交表单等)时,它只会显示几秒钟。如何创建 Toast如需创建 Toast,请使用 .toast 类,并在其中添加 .toast-header 和 .toast-body。
Bootstrap 5 弹出框弹出框弹出框(Popover)组件类似于工具提示;它是一种弹出框,当用户点击元素时出现。不同之处在于弹出框可以包含更多内容。如何创建弹出框如需创建弹出框,请将 data-bs-toggle="popover" 属性添加到元素
Bootstrap 5 工具提示工具提示工具提示组件是一种小的弹出框,当用户将鼠标指针移动到元素上时会出现:如何创建工具提示如需创建工具提示,请将 data-bs-toggle="tooltip" 属性添加到元素。请使用 title 属性指定在工具提
Bootstrap 5 模态模态Modal 组件是一种对话框/弹出窗口,显示在当前页面的上部:如何创建模态下例展示如何创建基本模态:实例<!-- 打开模态的按钮 --><button type="button" class="btn btn-primary" data-bs-toggle="moda
Bootstrap 5 轮播旋转木马 / 幻灯片旋转木马(轮播)是用于循环浏览元素的幻灯片:如何创建旋转木马下例显示了如何创建带有指示器和控件的基本轮播:实例<!-- 轮播 --><div id="demo" class="carousel slide" data-bs-ride="
Bootstrap 5 导航栏导航栏导航栏是位于页面顶部的导航页眉:基础的导航栏通过使用 Bootstrap,导航栏可以扩展或折叠,具体取决于屏幕大小。请使用 .navbar 类创建标准导航栏,然后是响应式折叠类:.navbar-expand-xxl|xl|lg|md
Bootstrap 5 导航导航菜单如果要创建简单的水平菜单,请将 .nav 类添加到 <ul> 元素,然后为每个 <li> 元素添加 .nav-item 并将 .nav-link 类添加到它们的链接:实例<ul class="nav"> <li class="nav-item"> <a class=
Bootstrap 5 折叠基础的折叠当您想要隐藏和显示大量内容时,可折叠组件非常有用:实例<button data-bs-toggle="collapse" data-bs-target="#demo">春日</button><div id="demo" class="collapse"> <p>胜日寻芳泗水滨,无
Bootstrap 5 下拉列表基础的下拉列表下拉菜单是一种可切换菜单,允许用户从预定义列表中选择值:实例<div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown