实习见闻（4）——bootstrap实现登陆功能

在实习期间，我被分配了使用Bootstrap前端框架来实现登录功能的任务。我理解这涉及到创建一个包含用户名和密码字段的表单，并在成功提交后将用户重定向至欢迎页面。Bootstrap是基于HTML、CSS和JavaScript的，对于初学者来说，它提供了快速构建响应式和移动设备优先的网页设计的工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

师傅留了一个新任务，利用bootstrap前端框架实现登陆功能。

bootstrap 是基于 HTML、CSS、JAVASCRIPT 的

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>登陆界面</title>

	<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
      <form action="#" class="form-signin" role="form">
        <h2 class="form-signin-heading">用户登录</h2>
        
        <input type="text" class="form-control" placeholder="请输入用户名" required autofocus>
            <div style="height:10px;clear:both;display:block"></div>
        <input type="password" class="form-control" placeholder="请输入密码" required>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> 记住登录状态
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
      </form>
    </div>
</body>
</html>

前端我就选择这个从网上找的了

后端的工作才刚开始，为完成任务，我计划先创建一个只存用户名密码的表单，跳转到一个欢迎界面就ok