Detailed explanation of the specific steps to configure bootstrap in spring mvc

1. spring mvc The specific steps for configuring bootstrap are explained in detail. It is divided into the following steps. Friends who like it can pay attention.
   

2. 1. Download bootstrap

Go to the link below to download the latest version. The version I downloaded is bootstrap-3.3.7- dist

【Related video recommendation: Bootstrap tutorial】

2. Unzip bootstrap-3.3.7-dist.zip and copy the entire folder copy to the project. I created a maven project and placed my bootstrap resource files in the webapp\res folder.

bootstrap-3.3.7-dist itself does not contain the jquery.js script file and needs to be downloaded separately, download address.

Please see the figure below for the specific file directory structure:

3. Modify web.xml to static resources requested by the client , such as js, css, etc., are processed by the default servlet; *.tff, *.woff, *.woff2 are the file suffixes in the font directory of bootstrap.

<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>

View Code

If you do not add it, a 404 error will be reported. The following error URL and screenshot are

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

Click to view details

4. Reference bootstrap in the web page

No cdn is used here, direct reference to the local file

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>

View Code

Running effect

5. If you use cdn, it is very simple, just quote it directly on the web page. No need to configure 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>

View Code

The above is the detailed content of Detailed explanation of the specific steps to configure bootstrap in spring mvc. For more information, please follow other related articles on the PHP Chinese website!