文档章节

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

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

没有更多内容

加载失败,请刷新页面

加载更多

搬瓦工最新国内可访问镜像网址:bwh8.net

昨天搬瓦工之前的国内备用镜像网址bwh1.net被域名污染了,在国内打不开了。搬瓦工发布了最新的国内可访问的镜像地址:bwh8.net。 消息来源:搬瓦工优惠网->搬瓦工最新国内可访问镜像网址:b...

flyzy2005
37分钟前
0
0
大数据学习之-NN,SNN和DN的作用

NameNode(名称节点,简称NN)作用: 文件系统命名空间,维护文件系统目录树 存储文件名称, 文件目录结构, 文件属性(权限,大小,创建时间,副本数及大小....), 文件对应的数据块及这些块所...

hnairdb
41分钟前
1
0
TypeScript基础入门之声明合并(三)

转发 TypeScript基础入门之声明合并(三) 声明合并 将命名空间与类,函数和枚举合并 命名空间足够灵活,也可以与其他类型的声明合并。 为此,命名空间声明必须遵循它将与之合并的声明。 生成的...

durban
49分钟前
0
0
webSocket前台实现

webSocket前台实现 简单实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="application/javascript" src="js/base64.js"></script......

Airship
59分钟前
1
0
从零到一,使用实时音视频 SDK 一起开发一款 Zoom 吧

zoom(zoom.us) 是一款受到广泛使用的在线会议软件。相信各位一定在办公、会议、聊天等各种场景下体验或者使用过,作为一款成熟的商业软件,zoom 提供了稳定的实时音视频通话质量,以及白板、...

七牛云
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部