ホームページ > 記事 > Java > Spring MVC でブートストラップを設定する具体的な手順の詳細な説明

Spring MVC でブートストラップを設定する具体的な手順の詳細な説明

PHPzオリジナル: 2017-07-18 17:55:592555ブラウズ

Spring MVC でブートストラップを構成するための具体的な手順は、次の手順に分けて説明されています。
1. 最新のブートストラップ

をダウンロードします。私がダウンロードしたバージョンは bootstrap-3.3.7-dist です

【関連ビデオ:

ブートストラップチュートリアル】

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-normal.woff2

クリックして詳細を表示します

4. Web ページの参照ブートストラップ

ここでは 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>

コードを表示

実行効果

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?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 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Java の FTPClient によってアップロードされた中国語のディレクトリ名とファイル名が文字化けする問題の解決策次の記事：Java の FTPClient によってアップロードされた中国語のディレクトリ名とファイル名が文字化けする問題の解決策

続きを見る

vue-cli プロジェクトでブートストラップを使用する手順の詳細な説明