- 完全响应式：在手机上效果最佳,同时在平板和桌面电脑上也能良好显示。
- 现代化设计：使用 Bootstrap 5，界面简洁、美观。
- 用户友好：输入框有清晰的图标和标签,登录按钮醒目。
- 功能完整：包含了用户名/邮箱、密码输入框、记住我选项、登录按钮和忘记密码链接。
- 易于使用：您可以直接复制代码,修改图片和链接即可使用。
最终效果预览 (手机端模拟)
这是一个模拟手机屏幕的预览图,您可以看到布局是专门为小屏幕设计的：
（图片来源网络，侵删）
完整代码 (HTML + CSS + JS)
您可以将以下所有代码复制到一个 .html 文件中,然后用浏览器打开即可看到效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">移动端登录 - Bootstrap</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons (用于输入框内的图标) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
<style>
/* 全局样式，去除默认边距和背景 */
body {
background-color: #f8f9fa;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* 登录容器样式 */
.login-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.login-box {
width: 100%;
max-width: 400px; /* 在大屏幕上限制最大宽度 */
background-color: #ffffff;
padding: 40px 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
/* Logo 或标题样式 */
.login-box .logo {
text-align: center;
margin-bottom: 30px;
}
.login-box .logo h2 {
font-size: 28px;
font-weight: 600;
color: #333;
margin: 0;
}
.login-box .logo p {
font-size: 14px;
color: #6c757d;
margin-top: 5px;
}
/* 表单输入框组样式 */
.input-group {
position: relative;
margin-bottom: 20px;
}
.input-group-text {
background-color: #f8f9fa;
border: 1px solid #ced4da;
border-right: none;
color: #6c757d;
min-width: 45px;
justify-content: center;
}
.form-control {
border-left: none;
padding-left: 15px;
}
.form-control:focus {
border-color: #86b7fe;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.input-group .form-control:focus ~ .input-group-text {
border-color: #86b7fe;
color: #0d6efd;
}
/* 按钮样式 */
.btn-login {
width: 100%;
padding: 12px;
font-size: 16px;
font-weight: 500;
border-radius: 8px;
background-color: #0d6efd;
border: none;
transition: background-color 0.2s, transform 0.1s;
}
.btn-login:hover {
background-color: #0b5ed7;
}
.btn-login:active {
transform: scale(0.98);
}
/* 记住我和忘记密码链接容器 */
.d-flex.justify-content-between.align-items-center {
margin-top: 25px;
font-size: 14px;
}
.form-check-input {
margin-top: 0.2rem;
}
.form-check-label {
margin-bottom: 0;
color: #6c757d;
}
.forgot-password a {
color: #0d6efd;
text-decoration: none;
}
.forgot-password a:hover {
text-decoration: underline;
}
/* 其他登录方式 */
.divider {
text-align: center;
margin: 25px 0;
position: relative;
}
.divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background-color: #e9ecef;
}
.divider span {
background-color: #fff;
padding: 0 15px;
color: #6c757d;
font-size: 13px;
position: relative;
}
.social-login {
display: flex;
gap: 10px;
}
.social-login .btn {
flex: 1;
color: #495057;
border: 1px solid #ced4da;
padding: 8px;
transition: all 0.2s;
}
.social-login .btn:hover {
background-color: #f8f9fa;
transform: translateY(-2px);
}
/* 注册链接 */
.register-link {
text-align: center;
margin-top: 25px;
font-size: 14px;
color: #6c757d;
}
.register-link a {
color: #0d6efd;
text-decoration: none;
font-weight: 500;
}
.register-link a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="login-container">
<div class="login-box">
<!-- Logo/标题 -->
<div class="logo">
<h2>欢迎回来</h2>
<p>请登录您的账户</p>
</div>
<form id="loginForm" onsubmit="handleLogin(event)">
<!-- 用户名/邮箱输入框 -->
<div class="input-group">
<span class="input-group-text"><i class="bi bi-person-fill"></i></span>
<input type="text" class="form-control" id="username" placeholder="用户名或邮箱" required>
</div>
<!-- 密码输入框 -->
<div class="input-group">
<span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
<input type="password" class="form-control" id="password" placeholder="请输入密码" required>
</div>
<!-- 记住我和忘记密码 -->
<div class="d-flex justify-content-between align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="rememberMe">
<label class="form-check-label" for="rememberMe">
记住我
</label>
</div>
<div class="forgot-password">
<a href="#">忘记密码？</a>
</div>
</div>
<!-- 登录按钮 -->
<button type="submit" class="btn btn-primary btn-login">
登录
</button>
<!-- 分隔线和第三方登录 -->
<div class="divider">
<span>或使用以下方式登录</span>
</div>
<div class="social-login">
<button type="button" class="btn btn-outline-secondary">
<i class="bi bi-wechat"></i>
</button>
<button type="button" class="btn btn-outline-secondary">
<i class="bi bi-github"></i>
</button>
<button type="button" class="btn btn-outline-secondary">
<i class="bi bi-google"></i>
</button>
</div>
<!-- 注册链接 -->
<div class="register-link">
还没有账户？ <a href="#">立即注册</a>
</div>
</form>
</div>
</div>
<!-- Bootstrap 5 JS (可选，如果需要交互组件) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- 自定义 JavaScript -->
<script>
function handleLogin(event) {
// 阻止表单默认提交行为
event.preventDefault();
// 获取表单数据
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const rememberMe = document.getElementById('rememberMe').checked;
// 这里可以添加前端验证逻辑
if (!username || !password) {
// 使用 Bootstrap 的 Toast 组件来显示错误信息（更友好）
showToast('请填写用户名和密码', 'danger');
return;
}
// 模拟登录请求
console.log('登录信息:', { username, password, rememberMe });
// 显示成功提示
showToast('登录成功！正在跳转...', 'success');
// 模拟跳转，实际应用中这里会是 window.location.href = '/dashboard';
setTimeout(() => {
alert('登录成功，即将跳转到主页！');
}, 1500);
}
// 创建一个通用的 Toast 提示函数
function showToast(message, type = 'info') {
// 检查页面是否已经有 Toast 容器，如果没有则创建
let toastContainer = document.getElementById('toastContainer');
if (!toastContainer) {
toastContainer = document.createElement('div');
toastContainer.id = 'toastContainer';
toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
toastContainer.style.zIndex = '11'; // 确保在最上层
document.body.appendChild(toastContainer);
}
// 创建 Toast 元素
const toastElement = document.createElement('div');
toastElement.className = `toast align-items-center text-white bg-${type} border-0`;
toastElement.setAttribute('role', 'alert');
toastElement.setAttribute('aria-live', 'assertive');
toastElement.setAttribute('aria-atomic', 'true');
toastElement.innerHTML = `
<div class="d-flex">
<div class="toast-body">
${message}
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
`;
toastContainer.appendChild(toastElement);
// 初始化并显示 Toast
const toast = new bootstrap.Toast(toastElement);
toast.show();
// Toast 隐藏后移除元素
toastElement.addEventListener('hidden.bs.toast', () => {
toastElement.remove();
});
}
</script>
</body>
</html>
代码解析
HTML 结构
<meta name="viewport">: 这是移动端适配的关键，它告诉浏览器如何控制页面的尺寸和缩放。width=device-width确保页面宽度与设备屏幕宽度一致，initial-scale=1.0设置初始缩放比例为1。.login-container: 一个全屏的 flex 容器,用于将登录框垂直和水平居中。.login-box: 登录内容的主要容器，设置了最大宽度、白色背景、圆角和阴影,使其看起来像一个独立的卡片。<form>: 表单元素,包含了所有登录相关的输入控件。.input-group: Bootstrap 的输入框组合组件,用于将图标和输入框优雅地结合在一起。<button class="btn btn-primary btn-login">: 登录按钮，btn-login是我们自定义的类,用于设置全宽和特殊样式。
CSS 样式 (<style> 标签内)
body: 设置了柔和的灰色背景 (#f8f9fa)。.login-box: 使用max-width: 400px确保在宽屏设备上登录框不会过宽，同时在小屏幕上width: 100%会使其自动填满可用空间。.input-group: 自定义了输入框组的样式,让图标区域和输入框的边框看起来更统一。.btn-login: 自定义按钮样式，设置全宽、圆角和悬停效果。.divider和.social-login: 提供了“其他方式登录”的视觉分隔和按钮布局。
JavaScript 交互 (<script> 标签内)
handleLogin(event): 这是表单的提交处理函数。event.preventDefault(): 阻止表单默认的页面刷新提交行为。- 获取输入框的值。
- 简单的前端验证。
- 使用 Bootstrap Toast 组件来显示登录成功或失败的消息，这比
alert()更加美观和现代化。
showToast(message, type): 一个通用的函数，用于动态创建和显示 Bootstrap Toast 提示。
如何使用和修改
- 保存文件: 将所有代码复制并粘贴到一个新的文本文件中，将其命名为
login.html或任何你喜欢的名字，但确保后缀是.html。 - :
- Logo/标题: 修改
<div class="logo">里的<h2>和<p>- 占位符文本: 修改
<input>标签里的placeholder属性。- 链接: 修改
<a>标签的href属性和文本内容，忘记密码？”和“立即注册”。- Logo 图片: 如果你不想用文字，可以在
.logodiv里放一个<img>标签，并设置其src属性指向你的图片路径。- 第三方登录图标:
<i class="bi bi-xxx">是 Bootstrap Icons，你可以替换成其他图标库（如 Font Awesome）的代码。 - 占位符文本: 修改
- Logo/标题: 修改
这个模板已经为您提供了一个功能完备、美观且移动优先的登录页面,您可以根据自己的项目需求进行快速调整。
（图片来源网络，侵删）
