【Bootstrap+JSP+Mysql学习笔记(四)】Bootstrap开发框架的使用
博客专区 > Vinicle 的博客 > 博客详情
【Bootstrap+JSP+Mysql学习笔记(四)】Bootstrap开发框架的使用
Vinicle 发表于1年前
【Bootstrap+JSP+Mysql学习笔记(四)】Bootstrap开发框架的使用
  • 发表于 1年前
  • 阅读 15
  • 收藏 0
  • 点赞 0
  • 评论 0

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>

以上

共有 人打赏支持
粉丝 0
博文 16
码字总数 4072
×
Vinicle
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: