Bootstrap5 教程 第2页

2022-06-21阅读(691)

下拉菜单可以是单选下拉菜单，也可以是多选的下拉菜单。 在 Bootstrap5 中下拉菜单 <select> 元素可以使用 .form-select 类来渲染 : 下拉菜单通过 .form-select-lg 或&...

2022-06-21阅读(736)

在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单元素 <input>, <textarea>...

2022-06-21阅读(870)

Bootstrap5 通过 flex 类来控制页面的布局。 弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4/5 最大的区别就是 Bootstrap 4/5 使用弹性盒子来布局，而不是使用浮动来布局。 弹性盒子...

2022-06-21阅读(794)

Bootstrap 5 提供了很多有用的类来帮组我们快速实现效果，不需要重复写一些 CSS 代码。 背景颜色 设置不同元素的背景颜色时，需要通过 .text-* 类来设置匹配的文本颜色： .bg-gradient&nbs...

2022-06-21阅读(1308)

Bootstrap5 侧边栏侧边栏类似于模态框，在移动端设备中比较常用。 创建滑动导航 我们可以通过 JavaScript 来设置是否在 .offcanvas 类后面添加 .show 类，从而控制侧边...

2022-06-21阅读(684)

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。 如何创建滚动监听 以下实例演示了如何创建滚动监听： 实例解析 向您想要监听的元素（通常是 body）添加&nbs...

2022-06-21阅读(800)

弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。 如何创建弹出框 通过向元素添加 data-bs-toggle="popover" 来来创建弹出框。 title 属性的内...

2022-06-21阅读(948)

提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。 如何创建提示框 通过向元素添加 data-bs-toggle="tooltip" 来来创建提示框。 title 属性的内容为提示框显示的内...

2022-06-21阅读(839)

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。 如何创建模态框 以下实例创建了一个简单的模态框效果 ： 添加动画 使用 .fade 类可以...

2022-06-21阅读(719)

如何创建轮播 以下实例创建了一个简单的图片轮播效果 ： 轮播图片上添加描述 在每个 <div class="carousel-item"> 内添加 <div class="carousel-c...