![](https://i-blog.csdnimg.cn/direct/967eed4bd5c44df99734a1e5b8676e80.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Bootstrap 5
文章平均质量分 78
强大、可扩展、功能丰富的前端开发工具包。它提供的功能包括:基于 Sass 进行编译和定制、内置的网格系统和组件、强大的 JavaScript 插件等
Suc2es2
大一新生,HCIA-Datacom 认证,HCIA-openEuler 认证,HarmonyOS 应用开发者高级认证,NISP 一级认证,阿里云社区专家博主认证,“复兴杯”2023第四届大学生网络安全精英赛全国复赛湖北省一等奖
展开
-
Bootstrap 5 保姆级教程(十五):表单
was-validated 或 .needs-validation 添加到 元素中,input 输入字段将具有绿色(有效)或红色(无效)边框效果,用于说明表单是否需要输入内容。使用 .needs-validation,它将在表单提交之后验证缺少的内容。.valid-feedback 或 .invalid-feedback 类用来告诉用户缺少什么信息,或者在提交表单之前需要完成什么。我们可以使用 .input-group 类来向表单输入框中添加更多的样式,如图标、文本或者按钮。原创 2024-04-22 10:35:30 · 1056 阅读 · 1 评论 -
Bootstrap 5 保姆级教程(十四):Flex
我们可以使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素,包含的值有:.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。important;使用 .flex-row-reverse 类用于设置右对齐显示,即与 .flex-row 方向相反。原创 2024-04-21 13:20:41 · 1115 阅读 · 2 评论 -
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
注意可滚动项元素上的 id () 必须匹配导航栏上的链接选项 ()。然后添加 data-bs-target 属性,它的值为导航栏的 id 或 class (.navbar)。向您想要监听的元素(通常是 body)添加 data-bs-spy="scroll"。使用 data-spy="scroll" 的元素需要将其 CSS。元素是否可以滚动,也可以设置是否显示一个背景画布。属性设置为 "relative" 才能起作用。原创 2024-04-21 13:20:27 · 935 阅读 · 1 评论 -
Bootstrap 5 保姆级教程(十二):弹出框 & 消息弹窗
通过向元素添加 data-bs-toggle="popover" 来来创建弹出框。弹出框要写在 JavaScript 的初始化代码里。原创 2024-04-21 13:20:11 · 1867 阅读 · 1 评论 -
Bootstrap 5 保姆级教程(十一):模态框 & 提示框
提示框要写在 JavaScript 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。我们可以通过添加 .modal-sm 类来创建一个小模态框,.modal-lg 类可以创建一个大模态框。通过向元素添加 data-bs-toggle="tooltip" 来来创建提示框。类名:modal-fullscreen。默认情况下提示框显示在元素上方。类名:modal-xl。类名:modal-lg。原创 2024-04-20 12:04:09 · 1848 阅读 · 3 评论 -
Bootstrap 5 保姆级教程(十):导航栏 & 轮播
导航栏一般放在页面的顶部。我们可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xxl|xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。导航栏上的选项可以使用 元素并添加 class="navbar-nav" 类。原创 2024-04-20 12:00:51 · 1176 阅读 · 4 评论 -
Bootstrap 5 保姆级教程(九):折叠 & 导航
Bootstrap5 折叠可以很容易的实现内容的显示与隐藏。和是用于定义组件行为和目标元素的自定义数据属性。"collapse""modal""tab"以下实例中,当按钮被点击时,data-bs-toggle="collapse" 属性触发了折叠菜单的行为,data-bs-target="#demo" 属性指定了折叠菜单的目标元素为 ID 为 demo 的 元素。原创 2024-04-20 11:59:15 · 2236 阅读 · 2 评论 -
Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
card-text 类用于设置卡 .card-body 类中的 标签,如果说最后一行可以移除底部边距。Bootstrap 5 提供了多种卡片的背景颜色类: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。如果我们想让下拉菜单右对齐,可以在元素上的 .dropdown 类后添加 .dropend 或 .dropstart 类。原创 2024-04-19 12:07:44 · 594 阅读 · 2 评论 -
Bootstrap 5 保姆级教程(七):分页 & 列表组
要创建一个基本的分页可以在 元素上添加 .pagination 类。原创 2024-04-18 12:19:07 · 885 阅读 · 3 评论 -
Bootstrap 5 保姆级教程(六):进度条 & 加载效果
进度条可以显示用户任务的完成过程。原创 2024-04-17 11:28:05 · 1119 阅读 · 3 评论 -
Bootstrap 5 保姆级教程(五):按钮组 & 徽章
Bootstrap 5 中允许我们将按钮放在同一行上。可以在 元素上添加 .btn-group 类来创建按钮组。原创 2024-04-16 11:12:01 · 733 阅读 · 1 评论 -
Bootstrap 5 保姆级教程(四):信息提示框 & 按钮
我们可以在提示框中的 div 中添加 .alert-dismissible 类,然后在关闭按钮的链接上添加 class="btn-close" 和 data-bs-dismiss="alert" 类来设置提示框的关闭操作。.active 类可以设置按钮是可用的, disabled 属性可以设置按钮是不可点击的。注意 元素不支持 disabled 属性,你可以通过添加 .disabled 类来禁止链接的点击。按钮可设置为激活或者禁止点击的状态。我们也可以设置一个正在加载的按钮。原创 2024-04-14 15:58:13 · 1228 阅读 · 2 评论 -
BootStrap 5 保姆级教程(三):表格 & 图片
通过添加 .table-striped 类,您将在。.table-bordered 类可以为表格添加边框。赋予图片,以便随父元素的宽度变化一起缩放。使图片的外观具有 1px 宽度的圆形边框。类让图片支持响应式布局。通过 Bootstrap 所提供的。原创 2024-04-12 12:12:32 · 904 阅读 · 3 评论 -
Bootstrap 5 保姆级教程(二):文字排版 & 颜色
Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式。原创 2024-04-11 14:32:47 · 996 阅读 · 3 评论 -
Bootstrap 5 保姆级教程(一):容器 & 网格系统
container 类用于固定宽度并支持响应式布局的容器。原创 2024-04-10 12:51:22 · 1766 阅读 · 3 评论