BootStrap5 + Soft UI 搭建漂亮登录页面实战

最终效果

下载资源包:

地址: https://wx.zsxq.com/group/15555848525482

资源包里面有js, css, 图片等资源, 用于快速搭建基于BootStrap5和Soft UI 的界面.

创建项目

创建目录: softui_bootstrap5_20250608

将 assets 资源包解压并放到这个目录中.

使用Webstorm打开项目:

创建登录页面

login.html

引入css样式

开发顶部导航栏

效果预览:

核心代码:

主要内容区域

在顶部导航栏结束以后, 马上跟着主要内容区域.

登录表单区域

分为左侧登录表单区域和右侧装饰图片.

登录表单

表单代码如下:

右侧装饰图片

效果预览

核心代码:

添加页脚

本教程提供完整的PDF笔记文档: