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
Bootstrap 5 卡片卡片Bootstrap 5 中的卡片是带边框的框,其内容周围有一些内边距。它包括页眉、页脚、内容、颜色等选项。基础的卡片一张基础卡片是用 .card 类创建的,卡片中的内容有一个 .card-body 类:实例<div class=
Bootstrap 5 列表组基础的列表组最基本的列表组是包含列表项的无序列表:如需创建基础列表组,请使用类为 .list-group 的 <ul> 元素和类为 .list-group-item 的 <li> 元素:实例<ul class="list-group"> <li class="list-
Bootstrap 5 分页基础的分页如果您的网站有很多页面,您可能希望为每个页面添加某种分页。如需创建基本分页,请将 .pagination 类添加到 <ul> 元素。然后将 .page-item 添加到每个 <li> 元素,并将 .page-link 类添加到 <l
Bootstrap 5 加载器加载器要创建 spinner/加载器,请使用 .spinner-border 类:实例<div class="spinner-border"></div>亲自试一试彩色加载器请使用任意文本颜色 utilites 为 spinner 添加颜色:实例<div class="spinner-b
Bootstrap 5 进度条基础进度条进度条可用于显示用户在某个进程中的进度。如需创建默认进度条,请将 .progress 类添加到容器元素并将 .progress-bar 类添加到其子元素。请使用 CSS width 属性设置进度条的宽度:实例<div
Bootstrap 5 徽章徽章徽章(Badges)用于向内容添加附加信息:在 <span> 元素中使用 .badge 类和上下文类(如 .bg-secondary)来创建矩形徽章。请注意,徽章会缩放以匹配父元素的大小(如果有):实例<h1>Example heading <span class=
Bootstrap 5 按钮组按钮组Bootstrap 5 允许您在按钮组中将一系列按钮组合在一起(在一行上):请使用带有 .btn-group 类的 <div> 元素来创建按钮组:实例<div class="btn-group"> <button type="button" class="btn btn-pri
Bootstrap 5 按钮按钮样式Bootstrap 5 提供了不同样式的按钮:实例<button type="button" class="btn">基础</button><button type="button" class="btn btn-primary">主要</button><button type="button" class="
Bootstrap 5 警告警告Bootstrap 5 提供了一种创建预定义警告消息的简单方法:警告框是使用 .alert 类创建的,后跟上下文类之一:.alert-success.alert-info.alert-warning.alert-danger.alert-primary.alert-secondary.ale
Bootstrap 5 JumbotronBootstrap 5 Jumbotron在 Bootstrap 3 中引入了 jumbotron,会生成大的填充框,用于引起对某些特殊内容或信息的额外关注。Bootstrap 5 不再支持 Jumbotron。但是,您可以使用 <div> 元素并将特殊的辅