Bootstrap5 表单浮动标签
Bootstrap5 表单浮动标签 默认情况下，标签内容一般显示在 input 输入框的上方： 使用浮动标签，可以在 input 输入框内插入标签，在单击 input 输入框时使它们浮动到上方 Bootstrap 实例 [mycode3 type='html'] Email Password [/mycode3] 尝试一下 » 注意事项： &..
Bootstrap5 提示框
Bootstrap5 提示框 提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。 如何创建提示框 通过向元素添加 data-bs-toggle='tooltip' 来来创建提示框。 title 属性的内容为提示框显示的内容： [mycode3 type='html'] 鼠标移动到我这 [/mycode3] 注意: 提示框要写在 JavaScript 的初始化..
Bootstrap5 侧边栏导航(Offcanvas)
Bootstrap5 侧边栏导航(Offcanvas) Bootstrap5 侧边栏侧边栏类似于模态框，在移动端设备中比较常用。 创建滑动导航 我们可以通过 JavaScript 来设置是否在 .offcanvas 类后面添加 .show 类，从而控制侧边栏的显示与隐藏： .offcanvas 隐藏内容 (默认) .offcanvas.show 显示内容 可以使用 a 链接的 href 属性或者 button 元素使用 dat..
Bootstrap5 导航
Bootstrap5 导航 如果你想创建一个简单的水平导航栏，可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类: 实例 [mycode3 type='html'] Link Link Link ..
Bootstrap5 分页
Bootstrap5 分页 网页开发过程，如果碰到内容过多，一般都会做分页处理。 Bootstrap 5 可以很简单的实现分页效果。 要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类，<li> 元素的 <a> 标签上添加 .page-lin..
Bootstrap5 列表组
Bootstrap5 列表组 Bootstrap 5 列表组（List Group） 是一种用于展示一系列项目或内容的组件，通常用于展示导航、标签、菜单或其他类似的列表形式。 列表组组件提供了一个灵活的方式来展示有序或无序的内容，可以自定义每个项目的样式、交互和布局。 基本结构 Bootstrap 5 列表组由以下几部分组成：.list-group：用于包裹整个列表的容器。.list-group-item：每个列表项，通常包含文本、链接..
Bootstrap5 卡片
Bootstrap5 卡片 Bootstrap 5 卡片（Card）组件 是一种强大且灵活的容器，用于展示各种内容，如文本、图片、列表、按钮等。 卡片组件在 Bootstrap 5 中得到了改进和增强，提供了更多的定制选项和更灵活的布局方式。卡片组件在 UI 设计中非常常见，尤其适用于博客、社交媒体、仪表盘和其他内容展示页面。 基本结构 Bootstrap 5 的卡片组件包括以下常用元素： .card：卡片的最外层容器。.card-bo..
Bootstrap5 表格
Bootstrap5 表格 Bootstrap 5 的表格（Table）组件提供了一系列功能和样式，使得表格更加易于构建、响应式和美观。 我们可以轻松地创建带有不同样式、排序功能、分页和响应式布局的表格。 Bootstrap5 基础表格 在 Bootstrap 5 中，创建表格的基础结构很简单，只需要使用标准的 HTML <table> 元素，并加上 table 类。 Bootstrap5 通过 .ta..
Bootstrap5 输入框组
Bootstrap5 输入框组 我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。 .input-group-text 类来设置文本的样式。。 Bootstrap 实例 [mycode3 type='html'] @ @facesoho.com [/mycode3] 尝试一下 &raq..
Bootstrap5 Flex（弹性）布局
Bootstrap5 Flex（弹性）布局 Bootstrap5 通过 flex 类来控制页面的布局。 弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4/5 最大的区别就是 Bootstrap 4/5 使用弹性盒子来布局，而不是使用浮动来布局。 弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计，如果你还不了解 flex，可以阅读我们的 CSS3 弹性盒子(Flex Box) 教程 ..
