【Bootstrap+JSP+Mysql学习笔记（四）】Bootstrap开发框架的使用

最新推荐文章于 2024-05-25 10:04:36 发布

weixin_33724059

最新推荐文章于 2024-05-25 10:04:36 发布

阅读量230

点赞数 1

CC 4.0 BY-SA版权

文章标签：数据库 javascript 开发工具 ViewUI

原文链接：https://my.oschina.net/scutzx/blog/754820

本文介绍了一个简单的电商平台登录页面的搭建过程，包括导入Bootstrap和jQuery框架、设置编码、配置头标签信息及完整的页面代码实现。

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

为什么80%的码农都做不了架构师？>>>

1、导入bootstrap开发框架

http://v3.bootcss.com/getting-started/#download

2、导入jQuery开发框架

http://jquery.com/download/

3、编码设置

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>

4、头标签信息配置

  <head>
    <title>电商平台商品配送管理系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,intial-scale=1">
    <script type="text/javascript" src="jQuery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <link href="bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet">
  </head>

5、完整页面代码

<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2016/10/6
  Time: 21:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
  <head>
    <title>电商平台商品配送管理系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,intial-scale=1">
    <script type="text/javascript" src="jQuery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <link href="bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <%-- 本次不写row样式 --%>
      <form id="loginForm" action="check.jsp" method="post" class="form-horizontal">
        <fieldset>
          <legend><label><span class="glyphicon glyphicon-user">&nbsp;用户登录</span></label></legend>
          <div class="form-group" id="myIdDiv">
            <label class="col-md-3 control-label" for="myId">用户名：</label>
            <div class="col-md-5">
              <%-- id是为javascript服务的，而name是为了JSP的接收数据服务的 --%>
              <input type="text" id="myId" name="myId" class="form-control" placeholder="请输入用户名">
            </div>
            <div clss="col-md-4" id="myIdSpan"></div>
          </div>

          <div class="form-group" id="myPsdDiv">
            <label class="col-md-3 control-label" for="myPsd">密码：</label>
            <div class="col-md-5">
              <%-- id是为javascript服务的，而name是为了JSP的接收数据服务的 --%>
              <input type="password" id="myPsd" name="myPsd" class="form-control" placeholder="请输入密码">
            </div>
            <div clss="col-md-4" id="myPsdSpan"></div>
          </div>
          <div class="form-group" id="myBtnDiv">
            <div class="col-md-5 col-md-offset-3">
              <button type="submit" id="loginBtn" class="btn btn-sm btn-primary">登录</button>
              <button type="reset" id="resetBtn" class="btn btn-sm btn-warning">重置</button>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </body>
</html>