찾다

집  >  기사  >  Java  >  Spring MVC에서 부트스트랩을 구성하는 특정 단계에 대한 자세한 설명

Spring MVC에서 부트스트랩을 구성하는 특정 단계에 대한 자세한 설명

PHPz
PHPz원래의
2017-07-18 17:55:592621검색

  1. spring mvc에서 부트스트랩을 구성하는 구체적인 단계는 다음 단계로 나누어져 있습니다.

  2. 1. 최신 버전은 bootstrap-3.3.7-dist

    3. 를 다운로드하려면 아래 링크로 bootstrap

을 다운로드하세요. 2 .bootstrap-3.3.7-dist.zip의 압축을 풀고 전체 폴더를 프로젝트에 복사합니다. Maven 프로젝트를 생성하고 부트스트랩 리소스 파일을 webappres 폴더에 배치했습니다. bootstrap-3.3.7-dist 자체에는 jquery.js 스크립트 파일이 포함되어 있지 않으며 별도로 다운로드해야 합니다. 다운로드 주소.

특정 파일 디렉터리 구조는 아래 그림을 참조하세요.

3 web.xml을 수정하면 js, css 등 클라이언트가 요청한 정적 리소스가 기본 서블릿 *.tff, *.woff, *.woff2는 부트스트랩 글꼴 디렉토리의 파일 접미사입니다. 

<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. 부트스트랩을 참조하세요.

여기서는 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?1.1.11"><scriptsrc="res/bootstrap-3.3.7-dist/js/jquery.min.js?1.1.11"></script><scriptsrc="res/bootstrap-3.3.7-dist/js/bootstrap.min.js?1.1.11"></script><!-- 引用cdn资源 --><!-- <link rel="stylesheet"
    href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css?1.1.11">
<script
    src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js?1.1.11"></script>
<script
    src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js?1.1.11"></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>

코드 보기
Running effect

5. cdn을 사용한다면 매우 간단합니다. 인용만 하면 됩니다. 웹 페이지에서 직접 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?1.1.11">
<script
    src="res/bootstrap-3.3.7-dist/js/jquery.min.js?1.1.11"></script>
<script
    src="res/bootstrap-3.3.7-dist/js/bootstrap.min.js?1.1.11"></script> --><!-- 引用cdn资源 --><link rel="stylesheet"href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css?1.1.11"><scriptsrc="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js?1.1.11"></script><scriptsrc="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js?1.1.11"></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>

코드 보기

위 내용은 Spring MVC에서 부트스트랩을 구성하는 특정 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Java에서 FTPClient에 의해 업로드된 중국어 디렉토리 및 파일 이름이 왜곡되는 문제에 대한 솔루션다음 기사：Java에서 FTPClient에 의해 업로드된 중국어 디렉토리 및 파일 이름이 왜곡되는 문제에 대한 솔루션

관련 기사

더보기