Bootstrap5 小工具1

简介: Bootstrap 5 提供了多种背景颜色类(如 .bg-primary、.bg-success 等),搭配 .text-* 类可调整文本颜色,确保对比度和可读性。同时,使用 .bg-gradient 类可轻松实现背景渐变效果。示例展示了不同背景色及其渐变版本的应用。

Bootstrap5 小工具
Bootstrap 5 提供了很多有用的类来帮组我们快速实现效果,不需要重复写一些 CSS 代码。

背景颜色
设置不同元素的背景颜色时,需要通过 .text-* 类来设置匹配的文本颜色:

实例

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-body

.bg-white

.bg-transparent

尝试一下 »
.bg-gradient 类可以设置背景颜色渐变的效果:

实例

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-body

.bg-white

.bg-transparent
相关文章
|
开发框架 前端开发 JavaScript
Bootstrap5 小工具3
`rounded` 类及其变体用于为图像或元素添加圆角效果。包括 `rounded`(标准圆角)、`rounded-circle`(圆形)、`rounded-pill`(药丸形)等。此外,`rounded-0` 至 `rounded-3` 可调整圆角的半径大小。示例代码展示了不同圆角效果的应用。
|
22小时前
|
前端开发 容器
Bootstrap5 小工具7
Bootstrap5 引入了基于 CSS3 弹性盒子(Flexbox)的布局方式,通过 `d-flex` 和 `d-inline-flex` 等类轻松实现响应式设计。此布局模式比传统的浮动布局更灵活、强大,但需注意 IE9 及以下版本不支持。示例展示了如何使用这些类创建水平排列的弹性盒子容器。
|
22小时前
Bootstrap5 小工具5
使用 .mx-auto 类可使元素水平居中;宽度和高度分别通过 w-* 和 h-* 类设定,支持百分比和自动调整,示例展示了不同宽度和高度的 div。
Bootstrap5 小工具4
使用 .float-start 和 .float-end 类可使元素分别向左和向右浮动,.clearfix 类用于清除浮动影响。此外,可根据屏幕尺寸设置浮动效果,如 .float-sm-end 表示在小屏幕及以上尺寸向右浮动。示例展示了不同屏幕尺寸下的浮动效果及清除浮动的用法。
Bootstrap5 小工具2
通过使用 `border` 及其相关类,可以灵活地为元素添加边框,包括控制边框的宽度、颜色和具体哪一侧显示边框。例如,`.border-1` 至 `.border-5` 设置不同宽度,`.border-primary` 等设置不同颜色。
|
22小时前
Bootstrap5 小工具6
间距设置通过 {property}{sides}-{size} 或 {property}{sides}-{breakpoint}-{size} 的格式来调整元素的 margin 和 padding,适用于不同屏幕尺寸。property 包括 m(margin)和 p(padding),sides 定义方向,size 控制大小。示例展示了如何使用这些类来控制元素的布局和间距。
|
开发框架 前端开发 JavaScript
教你快速安装Bootstrap
教你快速安装Bootstrap
|
前端开发
Bootstrap——安装
Bootstrap——安装
121 0
|
JavaScript 前端开发 开发者
Bootstrap-插件|学习笔记
快速学习 Bootstrap-插件
172 0
Bootstrap-插件|学习笔记