spring mvc配置bootstrap教程

本文实例为大家分享了spring mvc配置bootstrap教程，供大家参考，具体内容如下

1.下载bootstrap

到下面的链接下载最新的 http://getbootstrap.com/，我下载的版本是bootstrap-3.3.7-dist

2.解压bootstrap-3.3.7-dist.zip,把整个文件夹copy到项目的中。我创建的是maven项目，我的bootstrap资源文件放在webapp\res文件夹下。

bootstrap-3.3.7-dist本身没有包含jquery.js脚本文件，需要单独下载，下载地址http://jquery.com/download/。

具体文件目录结构请看下图：

3.修改web.xml,对客户端请求的静态资源，如js,css等，交由默认的servlet处理；*.tff,*.woff,*.woff2是bootstrap的font目录下的文件后缀。

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.jpg</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.js</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.css</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.html</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.ttf</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.woff</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.woff2</url-pattern>
  </servlet-mapping>

  <servlet-mapping>
    <servlet-name>springDispatcherServlet</servlet-name>
    <!-- 可以应答所有请求，也就是将所有的请求都交给Spring的DispatcherServlet来处理 -->
    <url-pattern>/</url-pattern>
  </servlet-mapping>

如果不添加，会报404错误，下面的报错的url和截图

http://localhost:8080/maven05/res/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.woff2

点击进去看详情

4.在web页面中引用bootstrap

这里没有使用cdn，直接引用本地文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引用本地资源 -->
<link rel="stylesheet"
  href="res/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script
  src="res/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script
  src="res/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  <!-- 引用cdn资源 -->
  <!-- <link rel="stylesheet"
  href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
  src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
</head>
<body>

  <p>
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-sort-by-attributes"></span>
    </button>
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
    </button>
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-sort-by-order"></span>
    </button>
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-sort-by-order-alt"></span>
    </button>
  </p>
  <button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-user"></span> User
  </button>
  <button type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-user"></span> User
  </button>
  <button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-user"></span> User
  </button>
</body>
</html>

运行效果

5.如果使用cdn，很简单，直接在web页面引用即可，不需要配置web.xml

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引用本地资源 -->
<!-- <link rel="stylesheet"
  href="res/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script
  src="res/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script
  src="res/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> -->
  <!-- 引用cdn资源 -->
  <link rel="stylesheet"
  href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
  src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

  <p>
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-sort-by-attributes"></span>
    </button>
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
    </button>
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-sort-by-order"></span>
    </button>
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-sort-by-order-alt"></span>
    </button>
  </p>
  <button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-user"></span> User
  </button>
  <button type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-user"></span> User
  </button>
  <button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-user"></span> User
  </button>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

    基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

    前言 基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页.模糊查询(非DataTables Search),页面异步刷新. 说明:sp:message标签是使用了SpringMVC国际化 效果 DataTable表格 关键字查询 自定义关键字查询,非DataTable Search 代码 HTML代码 查询条件代码 <!-- 查询.添加.批量删除.导出.刷新 --> <div class="row-fluid"> <di

  • AJAX +SpringMVC 实现bootstrap模态框的分页查询功能

    AJAX +SpringMVC 实现bootstrap模态框的分页查询功能

    一 .效果图 二.JS function getManagerList(dealerId,page2){ macAddress = document.getElementById("activeXDemo").getMac(); $.get("${ctxPath}/common/dealer/manager?"+Math.random(), { page2: page2, pageSize2: 9, dealerId: dealerId, macAddress:ma

  • Spring MVC下 bootStrap服务器分页代码

    因为Spring 对于ajax直接返回对象,到了WEB页面就转换成json 所以不需要使用JSON转换封装可以直接使用 <span style="white-space:pre"> </span>@RequestMapping(value = "/searchList.cqzk") @ResponseBody public BootPage<IllegalParkInfo> search(BootPage<IllegalPa

  • bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

    bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

    整合前的准备步骤 1.搭建好基础框架,本文用的是SSM(Spring+SpringMVC+Mybatis),这里的过程就不在本文中讲了,之前我做个一个demo(ssm整合+用户模块),可以参考这个搭建好. 2.下载bootstrap fileinput组件源码: https://github.com/kartik-v/bootstrap-fileinput/ 搭建后的效果图 图1. 图2. 图3. 图4. 图5. 在需要编写的jsp页面引入组件 本工程的路径界面如下: 在jsp引入组件需要的js

  • BootStrap与validator 使用笔记(JAVA SpringMVC实现)

    BootStrap与validator 使用笔记(JAVA SpringMVC实现)

    BootStrap 是一个强大的前面框架,它用优雅的方式解决了网页问题.最近正在使用其开发网站的表单验证,一点体会记录如下: 注:本文中借鉴了博客Franson 的文章使用bootstrap validator的remote验证代码经验分享(推荐) 一.准备工作 1.你的网站环境中要有 BootStrap,中文网地址:http://www.bootcss.com/ 2.下载BootStrap Validator相关材料,地址:http://bv.doc.javake.cn/ 当然,如果你不想一个

  • SpringMVC+bootstrap table实例详解

    SpringMVC+bootstrap table实例详解

    bootstrap-table下载地址:https://github.com/wenzhixin/bootstrap-table/ 先来看一张效果图: 下载下来后,需要导入的css:由于需要bootstrap的支持,所以需要导入bootstrap的css <!-- Bootstrap --> <link href="${contextPath }/static/bootstrap/css/bootstrap.min.css" rel="external no

  • 基于Bootstrap的Java开发问题汇总（Spring MVC）

    基于Bootstrap的Java开发问题汇总（Spring MVC）

    第一次接触Bootstrap框架,特别生疏.但是在慢慢了解了之后会发现bootstrap是一个前端的技术框架.结合了JQuery从而实现了非常丰富.美观的界面效果.此次项目是基于Spring MVC模式下. 1.菜单 在Bootstrap中构建一个菜单是一件非常容易的事情.因为有专门的菜单管理,所以相比以前做过的菜单相对来说就轻松的多.只需要点开菜单管理,进行需求菜单的添加.如下图所示: 添加完菜单之后还不能显示,因为没有为菜单分配权限.接下来在角色权限管理里面为菜单进行授权.之后用授权过的账户

  • spring MVC + bootstrap实现文件上传示例（带进度条）

    spring MVC + bootstrap实现文件上传示例（带进度条）

    最近学习了bootstrap,有结合了spring MVC写了个文件上传的示例,留做笔记,废话不多说,直接上代码 监听器类FileUploadProgressListener.Java package com.gpl.web.listener; import javax.servlet.http.HttpSession; import org.apache.commons.fileupload.ProgressListener; import org.springframework.stereo

  • spring mvc配置bootstrap教程

    spring mvc配置bootstrap教程

    本文实例为大家分享了spring mvc配置bootstrap教程,供大家参考,具体内容如下 1.下载bootstrap 到下面的链接下载最新的 http://getbootstrap.com/,我下载的版本是bootstrap-3.3.7-dist 2.解压bootstrap-3.3.7-dist.zip,把整个文件夹copy到项目的中.我创建的是maven项目,我的bootstrap资源文件放在webapp\res文件夹下. bootstrap-3.3.7-dist本身没有包含jquery.

  • Spring MVC温故而知新系列教程之请求映射RequestMapping注解

    RequestMapping注解说明 @RequestMapping注解的作用将Web请求映射到特定处理程序类和/或处理程序方法,这个注解可以用于类或者方法上,并通过属性value指定请求路径.用在Controller类上表示提供初步的URL请求映射信息,相对于Web应用的根目录,这是一个前置请求路径.用在Controller中方法上,表示提供详细的URL映射.如果Controller类上没有加RequestMapping注解,则方法上注解标记的URL则是相对于Web应用的根目录. @Reque

  • Spring MVC配置双数据源实现一个java项目同时连接两个数据库的方法

    前言 本文主要介绍的是关于Spring MVC配置双数据源实现一个java项目同时连接两个数据库的方法,分享出来供大家参考学习,下面来看看详细的介绍: 实现方法: 数据源在配置文件中的配置 <pre name="code" class="java"><?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.spring

  • Spring MVC温故而知新系列教程之从零开始

    Spring MVC简介 Spring MVC是一款基于MVC架构模式的轻量级Web框架,目的是将Web开发模块化,对整体架构进行解耦. Spring MVC有一下优点: 作为Spring框架的一部分,拥有Spring的优点(IOC,AOP等) 支持灵活的URL到页面控制器的映射 提供灵活的数据验证.格式化.数据绑定机制 支持RESTful风格 Spring MVC请求流程 Spring MVC框架的整体请求流程如下: 上图中涉及到Spring MVC的几个功能组件: 前端控制器(Dispatc

  • spring Mvc配置xml使ResponseBody返回Json的方法示例

    前言 学习了spring mvc后,发现spring mvc返回json数据比struts2要方便,使用@ResponseBody就可以了 @ResponseBody 在返回的数据不是html标签的页面,而是其他某种格式的数据时(如json.xml等)使用: 不在springMvc中配置json的处理的话,我们通常会在Controller层中获取到数据之后进行类型转化,将数据转成json字符串,比如调用fastjson进行转化,如下 @RequestMapping("/getCategoryTr

  • Spring MVC 框架搭建配置方法及详解

    现在主流的Web MVC框架除了Struts这个主力 外,其次就是Spring MVC了,因此这也是作为一名程序员需要掌握的主流框架,框架选择多了,应对多变的需求和业务时,可实行的方案自然就多了.不过要想灵活运用Spring MVC来应对大多数的Web开发,就必须要掌握它的配置及原理. 一.Spring MVC环境搭建:(Spring 2.5.6 + Hibernate 3.2.0) 1. jar包引入 Spring 2.5.6:spring.jar.spring-webmvc.jar.comm

  • Eclipse使用maven搭建spring mvc图文教程

    Eclipse使用maven搭建spring mvc图文教程

    本文为大家介绍了Eclipse使用maven搭建spring mvc的详细步骤,供大家参考,具体内容如下 1. 环境配置 a). Java 1.7 b). Eclipse luna c). Maven3.2.5 d). Spring 4.1.4 2. 创建maven工程 a). 打开eclipse,file->new->project->Maven->Maven Project b). 下一步 c). 选择创建的工程为webapp,下一步 d). 填写项目的group id和art

  • Spring MVC的web.xml配置详解

    Spring MVC的web.xml配置详解

    spring是目前最流行的框架.创建java web项目时,我们首先会遇到的配置文件就是web.xml,这是javaweb为我们封装的逻辑,不在今天的研究中.下面我们将简单讲讲web.xml中的配置. 一.一个空的web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" xmlns:xsi="http://www.w3.org/2001/

  • spring MVC搭建及配置详解

    现在主流的Web MVC框架除了Struts这个主力 外,其次就是Spring MVC了,因此这也是作为一名程序员需要掌握的主流框架,框架选择多了,应对多变的需求和业务时,可实行的方案自然就多了.不过要想灵活运用Spring MVC来应对大多数的Web开发,就必须要掌握它的配置及原理. 一.Spring MVC环境搭建:(Spring 2.5.6 + Hibernate 3.2.0) 1. jar包引入 Spring 2.5.6:spring.jar.spring-webmvc.jar.comm

随机推荐