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

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

2. 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 は使用されていません。ローカル ファイルを直接参照します

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><title>Insert title here</title><meta><!-- 引用本地资源 --><link><scriptsrc><scriptsrc><!-- 引用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> --><p><button><span></span></button><button><span></span></button><button><span></span></button><button><span></span></button></p>
<button><span></span> User</button><button><span></span> User</button><button><span></span> User</button></scriptsrc></scriptsrc>

コードを表示

実行効果

5 cdn を使用する場合は、非常に簡単です。引用するだけです。 Web ページ上で直接、web.xml を設定する必要はありません

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><title>Insert title here</title><meta><!-- 引用本地资源 --><!-- <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><scriptsrc><scriptsrc><p><button><span></span></button><button><span></span></button><button><span></span></button><button><span></span></button></p>
<button><span></span> User</button><button><span></span> User</button><button><span></span> User</button></scriptsrc></scriptsrc>

コードを表示

以上がSpring MVC でブートストラップを設定する具体的な手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。