通用用户界面

更详细的文档,请访问 Bootstrap 组件
手风琴

这是第一个内容。 它是默认是显示的, 直到折叠插件添加了相应的类, 才会使用这些类来样式化每个元素。 这些类可以控制外观, 并通过 CSS 过渡效果来控制显示和隐藏。 你可以使用自定义 CSS 或覆盖默认变量来修改这些内容。 值得注意的是, 几乎所有的 HTML 都可以放在 .accordion-body 中, 留意,过渡效果会限制溢出。

这是第二个内容。 它是默认是隐藏的, 直到折叠插件添加了相应的类, 才会使用这些类来样式化每个元素。 这些类可以控制外观, 并通过 CSS 过渡效果来控制显示和隐藏。 你可以使用自定义 CSS 或覆盖默认变量来修改这些内容。 值得注意的是, 几乎所有的 HTML 都可以放在 .accordion-body 中, 留意,过渡效果会限制溢出。

这是第三个内容。 它是默认是隐藏的, 直到折叠插件添加了相应的类, 才会使用这些类来样式化每个元素。 这些类可以控制外观, 并通过 CSS 过渡效果来控制显示和隐藏。 你可以使用自定义 CSS 或覆盖默认变量来修改这些内容。 值得注意的是, 几乎所有的 HTML 都可以放在 .accordion-body 中, 留意,过渡效果会限制溢出。
提醒
角标

标题示例 新

标题示例 新

标题示例 新

标题示例 新

标题示例 新
标题示例 新




主要 次要 成功 危险 警告 信息 高亮 暗黑
主要 次要 成功 危险 警告 信息 高亮 暗黑
按钮


warning、info 和 light 这三种描边样式用的是浅色文字, 放在浅色背景上对比度会掉到 4.5:1 的最低要求以下。 把它们放到深色背景上就行:


导航标签页 & 胶囊标签
标签面板本身用的就是原生的 Bootstrap 5—— AdminLTE 只负责给它外面那层卡片加点样式。
给每个触发按钮加上一个 data-bs-target, 再给对应的面板加上一个匹配的 id。
用 <button> 来做触发元素, 而不是用链接:按钮不需要 href 就能获得焦点, 也不用调 preventDefault。
胶囊导航使用, data-bs-toggle="pill"。
给列表加上 .flex-column, 胶囊导航就变成垂直排列了。
模态框
侧边栏

侧边栏面板很适合用来放筛选器和详情视图, 不然这些东西会把仪表盘挤得满满当当。 它跟 AdminLTE 的侧边栏是两回事 ——侧边栏有自己专用的 PushMenu 插件。

过滤
底部位置

位置类分别是 .offcanvas-start, .offcanvas-end, .offcanvas-top and .offcanvas-bottom.

按钮组


可折叠

折叠组件的一些占位符内容。 该面板默认情况下是隐藏的, 但当用户激活相关触发器时会显示出来。
占位符
进度
Toast 提示

工具提示

占位符文本,用于演示带有工具提示的链接,它只为了填充内容,无任何意义。 放这里是为了模拟真实内容是为了让 你了解在实际使用 中的效果。以及这些工具提示 是如何工作的,以便在你的 网站和项目中使用。

旋转
载入中……
载入中……
载入中……
载入中……
载入中……
载入中……
载入中……
载入中……