文档章节

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

Vinicle
 Vinicle
发布于 2016/10/06 22:44
字数 430
阅读 45
收藏 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>

以上

© 著作权归作者所有

共有 人打赏支持
Vinicle
粉丝 1
博文 16
码字总数 4072
作品 0
广州
程序员
啦啦啦哈利路亚/laravel_biji

采用Laravel5.1框架的在线笔记系统 演示地址 http://120.27.102.104/auth/login 项目介绍 基于Laravel+Bootstrap+MariaDB开发系统架构 功能说明 在线笔记系统基于B/S结构的社区性质的协调信息...

啦啦啦哈利路亚
2017/03/08
0
0
Bootstrap响应式前端框架笔记四——表单

Bootstrap响应式前端框架笔记四——表单 一、基本表单样式 在Bootstrap框架中,可以为表单标签添加form-control属性来为其设置默认样式,默认表单控件的宽度将充满父容器标签。需要注意,在布...

珲少
2016/12/06
126
0
《前台框架BootStrap学习》系列技术文章整理收藏

《前台框架BootStrap学习》系列技术文章整理收藏 前台框架BootStrap学习系列整理了关于前台框架BootStrap方面的技术文章,一些实用的BootStrap使用示例,供大家学习BootStrap时参考 1CSS——...

开元中国2015
2015/06/22
218
0
Bootstrap响应式前端框架笔记十一——分页与标签

Bootstrap响应式前端框架笔记十一——分页与标签 在开发搜索结果页、列表页时通常会使用到分页器控件,Bootstrap中提供了方便的类来进行分页器的创建,示例如下: 效果如下: 为li元素添加d...

珲少
2016/12/13
58
0
Bootstrap响应式前端框架笔记十四——媒体对象与列表组

Bootstrap响应式前端框架笔记十四——媒体对象与列表组 在移动开发中经常会使用到列表,使用媒体对象可以方便的创建列表中每一行元素,常规的媒体对象实例如下:

珲少
2016/12/20
51
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Go语言_通神之路(2)

1、包 每个Go程序都是由包构成,从main包开始运行,就是我上一篇讲到的,都是从main函数开始执行,但是必须在main包下面! package mainimport ( "fmt" "math/rand")func ...

木九天
昨天
5
0
51.php-fpm的pool 慢日志 open_basedir 进程管理

12.21 php-fpm的pool 12.22 php-fpm慢执行日志(测试时报错) 12.23 open_basedir 12.24 php-fpm进程管理 12.21 php-fpm的pool: php-fpm里的pool也叫池子,咱们之前加入过www的配置,这个w...

王鑫linux
昨天
0
0
java内存模型概述

1、Java虚拟机运行时数据分区图 程序计数器:线程私有,是一块较小的内存空间,它是当前线程所执行的字节码文件的行号指示器 java虚拟机栈:线程私有,其生命周期与线程相同,这也就是我们平...

京一
昨天
1
0
shell学习之test语法

因为if-then语句不能测试退出状态码之外的条件,所以提供了test, 如果test命令中列出的条件成立,test命令就会退出并返回退出状态码0;如果条件不成立,test命令就会退出并返回非零的退出状态...

woshixin
昨天
0
0
openJDK之如何下载各个版本的openJDK源码

如果我们需要阅读openJDK的源码,那么需要下载,那么该去哪下载呢? 现在JDK已经发展到版本10了,11已经处于计划中,如果需要特定版本的openJDK,它们的下载链接在哪呢? 1.openJDK的项目 链接...

汉斯-冯-拉特
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部