脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → spring mvc配置bootstrap

spring mvc配置bootstrap教程

 更新时间：2017年07月06日 08:06:53   作者：Chester Huang  
这篇文章主要为大家详细介绍了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>

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

您可能感兴趣的文章:

相关文章

  • 聊聊Java三种常见的分布式锁

    聊聊Java三种常见的分布式锁

    目前分布式锁的实现方案主要包括三种，本文就来介绍一下这三种常见的分布式锁以及这三种锁的性能等，具有一定的参考价值，感兴趣的可以了解一下
    2023-06-06
  • Springboot application.yml配置文件拆分方式

    Springboot application.yml配置文件拆分方式

    这篇文章主要介绍了Springboot application.yml配置文件拆分方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • Springboot中@RequestParam和@PathVariable的用法与区别详解

    Springboot中@RequestParam和@PathVariable的用法与区别详解

    这篇文章主要介绍了Springboot中@RequestParam和@PathVariable的用法与区别详解,RESTful API设计的最佳实践是使用路径参数来标识一个或多个特定资源,而使用查询参数来对这些资源进行排序/过滤,需要的朋友可以参考下
    2024-01-01
  • java反射深入剖析(推荐)

    java反射深入剖析(推荐)

    下面小编就为大家带来一篇java反射深入剖析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JAVA面向对象之继承 super入门解析

    JAVA面向对象之继承 super入门解析

    在JAVA类中使用super来引用父类的成分，用this来引用当前对象，如果一个类从另外一个类继承，我们new这个子类的实例对象的时候，这个子类对象里面会有一个父类对象。怎么引用里面的父类对象呢？用super来引用，this指当前对象的引用，super是当前对象里面的父对象的引用
    2022-01-01
  • Springboot+redis+Interceptor+自定义annotation实现接口自动幂等

    Springboot+redis+Interceptor+自定义annotation实现接口自动幂等

    本篇文章给大家介绍了使用springboot和拦截器、redis来优雅的实现接口幂等，对于幂等在实际的开发过程中是十分重要的，因为一个接口可能会被无数的客户端调用，如何保证其不影响后台的业务处理，如何保证其只影响数据一次是非常重要的，感兴趣的朋友跟随小编一起看看吧
    2019-07-07
  • 自己写的简易版Java日志类分享

    自己写的简易版Java日志类分享

    这篇文章主要介绍了自己写的简易版Java日志类分享,本文直接给出实现代码,需要的朋友可以参考下
    2015-06-06
  • Spring Boot提高开发效率必备工具lombok使用

    Spring Boot提高开发效率必备工具lombok使用

    这篇文章主要为大家介绍了Spring Boot提高开发效率的必备工具lombok使用方法示例及步骤说明，有需要的朋友可以借鉴参考下，希望能够有所帮助
    2022-03-03
  • Spring内存缓存Caffeine的基本使用教程分享

    Spring内存缓存Caffeine的基本使用教程分享

    Caffeine作为当下本地缓存的王者被大量的应用再实际的项目中，可以有效的提高服务吞吐率、qps，降低rt，本文就来简单介绍下Caffeine的使用姿势吧
    2023-03-03
  • springMVC框架下JQuery传递并解析Json数据

    springMVC框架下JQuery传递并解析Json数据

    json作为一种轻量级的数据交换格式，在前后台数据交换中占据着非常重要的地位，这篇文章主要介绍了springMVC框架下JQuery传递并解析Json数据，有兴趣的可以了解一下。
    2017-01-01

最新评论