webapp引入bootstrap - CSDN
精华内容
参与话题
  • 先在项目中创建webapp文件夹,然后把bootstrap导入到项目中,页面和bootstrap文件夹在同级别就直接按下来的写 页面和bootstrap文件夹不在同级别就需要让其进入到同级别,利用“../”来实现,如下面的WEB-INF...

     

    先在项目中创建webapp文件夹,然后把bootstrap导入到项目中,页面和bootstrap文件夹在同级别就直接按下来的写

     

    导入文件

     

    页面和bootstrap文件夹不在同级别就需要让其进入到同级别,利用“../”来实现,如下面的WEB-INF下面的页面利用“../”就让其到WEB-INF级别就和bootstrap同级别了。

    122

     

     

     

     

     

     

     

    展开全文
  • 简介SpringMVCSpring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架构,从而在使用Spring进行WEB开发时,...

    简介

    SpringMVC

    Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架构,从而在使用Spring进行WEB开发时,可以选择使用Spring的SpringMVC框架或集成其他MVC开发框架,如Struts1,Struts2等。

    BootStrap

    Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。[1] 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。[2] 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

    创建项目

    利用Maven创建WebApp

    在前面的文章中已经简单介绍了如何利用Maven创建WebApp,这里创建一个charleymavenweb01项目,创建之后项目结构如下:

    创建WebApp

    可以看到Maven已经为我们创建了WebApp的基本骨架了。

    添加BootStrap相关文件

    下载BootStrap

    下载地址:http://getbootstrap.com/getting-started/#download

    笔者下载的是编译并压缩后的BootStrap,版本是 3.3.7 。如果需要更仔细的学习BootStrap,可以下载BootStrap源码。

    因为BootStrap是基于jQuery的,所以还需要下载jQuery,然后把jQuery的.js文件放到BootStrap目录下js文件夹下。

    将BootStrap相关文件添加到项目中

    把BootStrap目录复制到项目webapp根目录下,如下图:

    BootStrap目录结构

    可以看到BootStrap中包括css样式,js脚本以及font字体文件。其中css和js是需要在页面中引用的。

    在页面中引用BootStrap

    Jsp页面模版如下:

    Jsp页面模版

    <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + path + "/";
    %>
    <html>
    <head>
        <base href="<%=basePath%>"/>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--页面标题-->
        <title>Title</title>
        <!--页面Logo-->
        <link rel="shortcut icon" href="<%=basePath%>images/voicecyber.ico"/>
        <!--引入bootstrap样式-->
        <link href="<%=basePath%>bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    <div class="container">
        <h1>Welcome, this is SpringMVC Bootstrap WebApp</h1>
    </div>
    
    <!--引入jquery脚本-->
    <script src="<%=basePath%>bootstrap/js/jquery.js" type="text/javascript"></script>
    <!--引入bootstrap脚本-->
    <script src="<%=basePath%>bootstrap/js/bootstrap.js" type="text/javascript"></script>
    </body>
    </html>

    注意:

    • 1、在head标签中使用link标签引用BootStrap的css文件
    • 2、最好将BootStrap的js脚本文件放到body标签结束之前,这样页面会优先加载html内容后再加载脚本文件
    • 3、一定要在引用BootStrap脚本之前引用jquery的脚本

    这样包含BootStrap的页面就创建成功了,运行效果如下:

    包含BootStrap的页面

    添加SpringMVC相关的jar库

    使用Maven添加SpringMVC库非常简单,首先在Maven Repository中查找SpringMVC组件。

    Maven Repository地址:http://mvnrepository.com/

    在搜索框中输入 spring web mvc 进行查找,然后选择一个版本,如:4.3.5 Release 。

    查找SpringMVC库

    将红框中的内容复制到pom文件的 dependencies节点中,然后点击一下Maven Project面板中的 同步 按钮,就会自动下载好SpringMVC相关的库文件,这样SpringMVC就引用成功了。

    引用SpringMVC库

        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-webmvc</artifactId>
          <version>4.3.5.RELEASE</version>
        </dependency>

    配置web.xml

    web.xml中主要配置两个内容,一是dispatcher servlet ,二是 servlet-mapping。

      <!--DispatcherServlet 需要在 WEB-INF 中创建 Spring 的配置文件 dispatcher-servlet.xml-->
      <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
      </servlet>
    
      <!--DispatcherServlet 的 Mapping-->
      <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>*.do</url-pattern>
      </servlet-mapping>

    配置dispatcher-servlet.xml

    需要在WEB-INF目录下创建一个配置文件dispatcher-servlet.xml,注意这个文件名应该Servlet的名称加上Servlet,如这里的 dispatcher-servlet。配置文件内容如下:

    <?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
           xmlns:context="http://www.springframework.org/schema/context"
           xmlns:p="http://www.springframework.org/schema/p"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
          http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd">
    
        <!-- 配置自动扫描的包 -->
        <context:component-scan base-package="pers.charley.demos.charleymavenweb01.controllers"></context:component-scan>
    
        <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
              p:prefix="/WEB-INF/views/"
              p:suffix=".jsp" />
    
    </beans>

    添加控制器

    新建一个控制器类如LoginController,在控制器里添加一个方法login。

    package pers.charley.demos.charleymavenweb01.controllers;
    
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    /**
     * Project charleymavenweb01
     * Package pers.charley.demos.charleymavenweb01.controllers
     * <p>
     * Created by Charley on 2017/1/12.
     */
    @Controller
    @RequestMapping("/login")
    public class LoginController {
        private static final String VIEW_LOGIN = "login";
    
        @RequestMapping("login")
        public String login() {
            return VIEW_LOGIN;
        }
    }
    

    注意,LoginController类要加上@controller注解,表示该类是一个控制器,再加上@requestmapping注解指定该控制器的匹配url路径,同样,方法login也要加上@requestmapping注解。

    添加视图页

    在WEB-INF中创建一个目录views用来存放视图页面,然后创建一个jsp页面login.jsp。

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + path + "/";
    %>
    <html>
    <head>
        <base href="<%=basePath%>"/>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--页面标题-->
        <title>Title</title>
        <!--页面Logo-->
        <link rel="shortcut icon" href="<%=basePath%>images/voicecyber.ico"/>
        <!--引入bootstrap样式-->
        <link href="<%=basePath%>bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    <div class="container">
        <h1>Welcome, this is Login page!</h1>
    </div>
    
    <!--引入jquery脚本-->
    <script src="<%=basePath%>bootstrap/js/jquery.js" type="text/javascript"></script>
    <!--引入bootstrap脚本-->
    <script src="<%=basePath%>bootstrap/js/bootstrap.js" type="text/javascript"></script>
    </body>
    

    注意:视图页的名子应该跟控制器中方法的返回值匹配。

    添加跳转连接

    在index页面中添加一个连接,连接到login页面。

    <div class="container">
        <h1>Welcome, this is SpringMVC Bootstrap WebApp</h1>
        <a href="login/login.do">login</a>
    </div>

    注意:连接地址为 controller/action.do 格式。

    测试

    在浏览器中输入 http://localhost:8080/charleymavenweb01 打开index页面。

    测试1

    点击 login 连接,跳转到 login 页面。

    测试2

    展开全文
  • SSM整合-引入Bootstrap前端框架

    千次阅读 2018-08-28 10:50:14
    Bootstrap的网址,到这里去下载 下载完后是一个名字叫bootstrap-3.3.7-dist .zip的压缩文件

    Bootstrap的网址,到这里去下载
    这里写图片描述
    这里写图片描述
    这里写图片描述
    下载完后是一个名字叫bootstrap-3.3.7-dist .zip的压缩文件
    解压后放到项目中,在webapp文件夹下新建一个static文件夹,把解压出来的文件放到这里就可以了
    还要在static文件夹中新建一个js文件夹,js文件夹中放jquery-3.3.1.min.js文件
    这里写图片描述
    然后在index.jsp中 记得引入就可以了

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

    然后测试一下,如果

    <button class="btn btn-success">按钮</button>

    运行页面出现以下样子就是成功了
    这里写图片描述

    展开全文
  • SSM项目中怎样引入并使用Bootstrap

    千次阅读 2018-12-16 15:37:39
    Bootstrap 官网 https://v3.bootcss.com/getting-started/#download 下载 进入官网,点击用于生产... ...SSM中使用Bootstrap ...SSM项目目录下的webapp目录下新建static目录,将下载后的bootstrap的文件复制到static...

    Bootstrap

    官网

    https://v3.bootcss.com/getting-started/#download

    下载

    进入官网,点击用于生产环境的Bootstrap下的下载Bootstrap

    点击下载并解压

    解压之后

    SSM中使用Bootstrap

    SSM项目目录下的webapp目录下新建static目录,将下载后的bootstrap的文件复制到static目录下。

    再在webapp下新建js目录,将jquery引入进来。

    如果没有jquery文件或者bootstrap下载不成功,github下载

    https://github.com/badaoliumang/StaticResourceCollection

    新建index.jsp

    在index.jsp中引入jquery与bootstrap

    <%
     pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <!-- web路径:
    不以/开始的相对路径,找资源,以当前资源的路径为基准,经常容易出问题。
    以/开始的相对路径,找资源,以服务器的路径为标准(http://localhost:3306);需要加上项目名
      http://localhost:3306/ssm-crud
     -->
    <script type="text/javascript"
     src="${APP_PATH }/static/js/jquery-1.12.4.min.js">
    </script>
    <link
     href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
     rel="stylesheet">
    <script
     src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js">
    </script>

    使用bootstrap

    要使用什么组件就参照官网文档添加什么组件。

    需要修改什么样式就参照官网全局CSS样式

    举例

    在index.jsp中加入巨幕组件

    只需要在jsp中加入

    <div class="jumbotron">
      <h1>Hello, world!</h1>
      <p>...</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>

    启动服务器,并查看index.jsp显示效果

     

     

    展开全文
  • 1.下载bootstrap,把bootstrap文件夹放在WebContent下时: 路径:&lt;link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt; 2.把bootstrap文件夹放到WEB-INF下面时...
  • jsp文件在在webapp/WEB_INF文件夹下, bootstrapwebapp文件夹下,如果web.xml 配置如下: <servlet-name>dispatch <url-pattern>/ 继续配置如下代码,即可:
  • 利用Intellij+MAVEN搭建Bootstrap+Spring+Mybatis+MySql+SpringMVC项目详解 在前篇文章中【http://blog.csdn.net/noaman_wgs/article/details/53893948】,已经利用Intelli+MAVEN搭建成功了Spring+Mybatis+SpringMVC...
  • 前端框架--bootstrap

    千次阅读 多人点赞 2020-05-15 15:56:18
    1.将bootstrap的js和css相关文件夹导入到webapp目录下,在spring-mvc.xml中放开静态资源 <!-- 放开静态资源 --> <!--location 配置静态资源的路径 mapping /** 代表/bootstrap/路径下所有的请求都放开--&...
  • 浅谈 Mobile Angular UI

    千次阅读 2015-03-12 22:07:28
    Angular UI +phoneGap+angularjs+bookstrap来进行webapp移动开发,首先在phonegap环境下来进行开发,运用Mobile Angular UI 的组件来进行开发能够方便的运用自带的组件,其实用jquerymobile+phoneGap也可以用来进行...
  • 在左项目时引入css文件、js文件时老是有点问题,相对路径绝对路径都试了,但是就是不生效。 查了许多人的资料也没找到解决办法。 自己再仔细分析 在网页中查看源代码,点击…/…/css/login.css链接,是空白,说明...
  • bootstrap table分页(前后端两种方式实现)

    万次阅读 多人点赞 2019-04-02 09:27:04
    bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要的那几条数据 ...
  • SpringMVC引入静态org.webjars中资源404

    万次阅读 2016-12-04 00:49:25
    SpringMVC引入静态org.webjars中资源404
  • boostrap table实现行拖拽调整排序

    千次阅读 2019-02-15 14:41:58
    1、引入相关的js文件 &lt;script type="text/javascript" src="${webAppPath}/static/js/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="tex...
  • 一、在项目中添加帆软使用的jar包。1. 安装FineReport包到本地仓库call mvn install:install-file -Dfile=E:\FinereReport\FineReport_9.0\WebReport\WEB-INF\lib\fr-core-9.0.jar -DgroupId=com.fr -...
  • Jsp引入bootstrap无法显示

    千次阅读 2019-06-07 14:58:59
    bootstrap 下载地址 ...在配置 SpringMVC 的时候返回的 jsp 页面无法显示bootstrap样式 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%...
  • WebJars介绍及使用

    千次阅读 2018-04-27 11:21:17
    WebJars是一个很神奇的东西,可以让大家以jar包的形式来使用前端的各种框架、组件。什么是WebJars什么是WebJars?WebJars是将客户端(浏览器)资源(JavaScript,Css等)打成jar包文件,以对资源进行统一依赖管理。...
  • 上传图片使用的是angularjs...需要在app.js中引入ngFileUpload 图片传到java,java保存到tomcat的webapp下面,启动该tomcat,可以修改端口为8082, 数据库保存地址http://127.0.0.1:8081/driverPic\1456909688584.jpg
  • 1.在webapp(而不是WEB-INF)下拖入bootstrap jar包 2.为了在jsp中使用jstl标签库导入jstl jar包 &lt;dependency&gt; &lt;groupId&gt;org.glassfish.web&lt;/groupId&gt; &lt;...
  • 用 requirejs 的 R.js 打包css + js

    千次阅读 2015-07-02 10:06:12
    用 requirejs 的 R.js 打包css + js
  • 我在之前呆过一家公司,他们前端封装了一套基于JQuery和bootstrap的单页面WebApp框架,虽然技术栈方面可能比较落后了,且是基于CSS,Html,JavaScript分层的。与现在的模块化开发有些不同。但是它的一些封装思想是...
1 2 3 4 5 ... 20
收藏数 2,532
精华内容 1,012
热门标签
关键字:

webapp引入bootstrap