正文

轻松打造3款实用Bootstrap登录页面，快速上手网站开发！

/0 浏览量
0723

在网站开发中，登录页面是用户与网站互动的第一步，一个简洁、美观且功能齐全的登录页面能够提升用户体验。Bootstrap 作为全球最受欢迎的前端框架之一，提供了丰富的组件和工具，可以帮助开发者快速构建响应式和美观的登录页面。以下是三款基于 Bootstrap 的实用登录页面设计，让你轻松上手网站开发。

第一款：简洁风格登录页面

1.1 设计理念

简洁风格的登录页面注重功能性和易用性，界面设计简洁大方，减少不必要的装饰元素，让用户能够快速完成登录操作。

1.2 代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简洁风格登录页面</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <h5 class="card-title">登录</h5>
          </div>
          <div class="card-body">
            <form>
              <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" class="form-control" id="username" placeholder="请输入用户名">
              </div>
              <div class="form-group">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password" placeholder="请输入密码">
              </div>
              <button type="submit" class="btn btn-primary">登录</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

第二款：图片背景登录页面

2.1 设计理念

图片背景登录页面通过引入背景图片，使界面更具视觉冲击力，同时保持操作区域的简洁。

2.2 代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片背景登录页面</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <style>
    body {
      background: url('background.jpg') no-repeat center center fixed;
      background-size: cover;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <h5 class="card-title">登录</h5>
          </div>
          <div class="card-body">
            <form>
              <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" class="form-control" id="username" placeholder="请输入用户名">
              </div>
              <div class="form-group">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password" placeholder="请输入密码">
              </div>
              <button type="submit" class="btn btn-primary">登录</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

第三款：卡片堆叠登录页面

3.1 设计理念

卡片堆叠登录页面将登录表单以卡片的形式堆叠展示，使界面更具层次感，同时便于用户浏览和操作。

3.2 代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡片堆叠登录页面</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <style>
    .card-deck {
      margin-top: 50px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="card-deck">
          <div class="card">
            <div class="card-header">
              <h5 class="card-title">登录</h5>
            </div>
            <div class="card-body">
              <form>
                <div class="form-group">
                  <label for="username">用户名</label>
                  <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                  <label for="password">密码</label>
                  <input type="password" class="form-control" id="password" placeholder="请输入密码">
                </div>
                <button type="submit" class="btn btn-primary">登录</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

以上三款 Bootstrap 登录页面设计，分别展示了简洁、图片背景和卡片堆叠三种风格。开发者可以根据实际需求选择合适的风格，并结合自己的创意进行修改和完善。希望这些示例能够帮助你快速上手网站开发，打造出美观实用的登录页面！

-- 展开阅读全文 --