文档章节

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

Vinicle
 Vinicle
发布于 2016/10/06 22:44
字数 430
阅读 636
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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
419
0
.NET MVC 学习笔记(二)— Bootstrap框架

二、.NET MVC 学习笔记(一)—— Bootstrap框架 在实际开发过程中,页面的样式问题是让人很头疼的问题,良好的用户界面可以大大提高用户体检,而在你没有前端开发人员的火力支援情况下,并不...

osc_z5nf1pyi
2019/02/25
6
0
Bootstrap学习笔记

Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集。开始学习Bootstrap之前,需要具备HTML,CSS,JS的知识。具备这些前端知识后,可以通过Bootstrap的官...

davidwbnu
2019/02/19
25
0
BootStrap学习笔记

一、BootStrap是什么 BootStrap是基于HTML、CSS和JavaScript的框架,使你只需要写简单的代码就可以很快的搭建一个还不错的前端界面,它是后端程序员的福音,使他们只需要专注业务逻辑,而无须...

风铃渡LOVE
2018/06/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

西安索命拉土车!(又遇上一场车祸)

西安是一座厚重的古城。 1、拉土车 大家知道我是陕西人,现在也定居到西安。 其实在2010-2013年在西安工作过3年,那段时间真的是见识到了西安拉土车的疯狂。 那时候西安软件园还比较偏僻,高...

osc_1ls4yaq1
21分钟前
6
0
大牛聊Java并发编程原理之 线程的互斥与协作机制

可能在synchronized关键字的实现原理中,你已经知道了它的底层是使用Monitor的相关指令来实现的,但是还不清楚Monitor的具体细节。本文将让你彻底Monitor的底层实现原理。 管程 一个管程可以...

osc_9gohs268
22分钟前
8
0
Linux进程内存管理对程序开发者的影响详谈

本章首先以应用程序开发者的角度审视Linux的进程内存管理,在此基础上逐步深入到内核中讨论系统物理内存管理和内核内存的使用方法。力求从外到内、水到渠成地引导网友分析Linux的内存管理与使...

linuxprobe2020
23分钟前
15
0
小伙子,你懂线程池的创建吗?

为什么阿里巴巴要禁用Executors创建线程池?看阿里巴巴开发手册并发编程这块有一条:线程池不允许使用Executors去创建,而是通过ThreadPoolExecutor的方式,通过源码分析禁用的原因 一、线程...

osc_uie90flw
23分钟前
9
0
Java连载129-广播数据包、网络编程总结

一、广播数据包 1.特性 这种通信类似于广播,要想实现这个功能,需要使用特殊的IP地址,要想实现多播或者广播通信的主机必须加入一个D类地址,D类地址的十进制表示范围为224.0.0.0~239.255.2...

osc_8nnvoyb1
24分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部