标签：web 网页 JavaWeb 样式 bootstrap sce servlet 众筹

一、bootstrap

本项目采用bootstrap3

bootstrap中文网 https://www.bootcss.com/

使用bootstrap三步：

1.导入jQuery

2.导入bootstrap自己的css样式

3.导入bootstrap自己的js文件

<script type="text/javascript" src="js/jquery-3.2.1.min.js"</script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

bootstrap定义了大量的样式库，要使用样式，只要将元素的class指定为样式库中的值。

 

二、第一个网页

index.jsp

和css等资源文件一起放在web层的webapp下

新建plugin文件夹，bootstrap放在里面

此时启动项目，发现样式不对

 

 

 F12控制台报错

 

 

 

资源路径进行配置

样式在网页推荐写绝对路径 

写监听器

web层创建

 

 

 编写监听器

package com.atguigu.scw.manager.listener;

import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;

/**
 * 项目启动时，将一些常用数据放在application域中，大家都能用
 * @ClassName MyAppListener
 * @Description TODO(这里用一句话描述这个类的作用)
 * @version 1.0.0
 */
public class MyAppListener implements ServletContextListener{

    public void contextInitialized(ServletContextEvent sce) {
        ServletContext servletContext = sce.getServletContext();
        //1.将项目放在application域中
        servletContext.setAttribute("ctp", servletContext.getContextPath());
        
    }

    public void contextDestroyed(ServletContextEvent sce) {
        //2.项目关闭，销毁application域中所有数据
        
    }

}

在web.xml中进行配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">
    
    <!-- 启动自己的listener -->
    <listener>
        <listener-class>com.atguigu.scw.manager.listener.MyAppListener</listener-class>
    </listener>
    
    <!-- 启动spring容器 -->
    <!-- needed for ContextLoaderListener -->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring-*.xml</param-value>
    </context-param>

    <!-- Bootstraps the root web application context before servlet initialization -->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    

    <!-- The front controller of this Spring Web application, responsible for 
        handling all application requests -->
    <servlet>
        <servlet-name>springDispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <!-- Map all requests to the DispatcherServlet for handling -->
    <servlet-mapping>
        <servlet-name>springDispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    
    <!-- 加上字符编码过滤器 -->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <!-- 只是指定了编码格式 -->
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
        <!-- 进行请求乱码解决 -->
        <init-param>
            <param-name>forceRequestEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>forceResponseEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>


</web-app>

index.jsp中资源的路径都如下面所示，将路径和实际资源位置一一检查

css

 

 

 js

 

 

 

 重新运行

网页显示正常

 

标签：web,网页,JavaWeb,样式,bootstrap,sce,servlet,众筹
来源： https://www.cnblogs.com/aidata/p/11465253.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。