Bootstrap5 小工具4

简介: 使用 .float-start 和 .float-end 类可使元素分别向左和向右浮动,.clearfix 类用于清除浮动影响。此外,可根据屏幕尺寸设置浮动效果,如 .float-sm-end 表示在小屏幕及以上尺寸向右浮动。示例展示了不同屏幕尺寸下的浮动效果及清除浮动的用法。

浮动与清除浮动
元素向右浮动使用 .float-end 类,向左浮动使用 .float-start 类, .clearfix 类用于清除浮动:

实例


Float left
Float right

尝试一下 »
也可以根据屏幕尺寸来设置浮动效果(.float--left|right - 表示 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):

实例

小屏幕向右浮动


中等屏幕向右浮动


大屏幕向右浮动


超大屏幕向右浮动


特大屏幕向右浮动


没有浮动
相关文章
|
6月前
|
编解码 前端开发 JavaScript
|
开发框架 前端开发 JavaScript
Bootstrap5 小工具3
`rounded` 类及其变体用于为图像或元素添加圆角效果。包括 `rounded`(标准圆角)、`rounded-circle`(圆形)、`rounded-pill`(药丸形)等。此外,`rounded-0` 至 `rounded-3` 可调整圆角的半径大小。示例代码展示了不同圆角效果的应用。
Bootstrap5 小工具2
通过使用 `border` 及其相关类,可以灵活地为元素添加边框,包括控制边框的宽度、颜色和具体哪一侧显示边框。例如,`.border-1` 至 `.border-5` 设置不同宽度,`.border-primary` 等设置不同颜色。
|
2天前
|
前端开发
Bootstrap5 小工具1
Bootstrap 5 提供了多种背景颜色类(如 .bg-primary、.bg-success 等),搭配 .text-* 类可调整文本颜色,确保对比度和可读性。同时,使用 .bg-gradient 类可轻松实现背景渐变效果。示例展示了不同背景色及其渐变版本的应用。
|
6月前
|
机器学习/深度学习 前端开发 算法
BootStrap文档(三)
BootStrap文档
35 0
|
开发框架 前端开发 JavaScript
教你快速安装Bootstrap
教你快速安装Bootstrap
|
前端开发
Bootstrap——安装
Bootstrap——安装
121 0
|
JavaScript 前端开发 开发者
Bootstrap-插件|学习笔记
快速学习 Bootstrap-插件
172 0
Bootstrap-插件|学习笔记
|
前端开发
AlloyTeam项目(Bootstrap)
AlloyTeam项目(Bootstrap)
99 0
AlloyTeam项目(Bootstrap)
下一篇
无影云桌面