Я разрабатываю веб-приложение с использованием Spring MVC 4. Я создал базу приложения с Spring Roo. Прямо сейчас я работаю в передней части с Spring Tiles 2.2.2. Я загрузил отзывчивый шаблон и разбил код, чтобы он соответствовал каждой части шаблона.Стиль CSS игнорируется при вставленной странице в Spring Tiles
Проблема в том, что когда я пытаюсь загрузить индекс, стиль CSS игнорируется или что-то в этом роде.
Это оригинальный шаблон
И вот как это выглядит с весной
Обратите внимание, как база шаблона (заголовок и меню) идентична, возникают проблемы только с динамической страницей.
Вот мой код:
WEB-INF/плитка/плитка-definitions.xml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
"http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
<definition name="defaultTemplate" template="/WEB-INF/template/default/template.jsp">
<put-attribute name="header" value="/WEB-INF/template/default/header.jsp" />
<put-attribute name="menu" value="/WEB-INF/template/default/menu.jsp" />
<put-attribute name="body" value="/WEB-INF/views/index.jspx" />
<put-attribute name="footer" value="/WEB-INF/template/default/footer.jsp" />
</definition>
</tiles-definitions>
WEB-INF/просмотров/views.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
"http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
<tiles-definitions>
<definition name="index" extends="defaultTemplate">
<put-attribute name="body" value="/WEB-INF/views/index.jspx" />
</definition>
<definition name="dataAccessFailure" extends="defaultTemplate">
<put-attribute name="body" value="/WEB-INF/views/dataAccessFailure.jspx" />
</definition>
<definition name="resourceNotFound" extends="defaultTemplate">
<put-attribute name="body" value="/WEB-INF/views/resourceNotFound.jspx" />
</definition>
<definition name="uncaughtException" extends="defaultTemplate">
<put-attribute name="body" value="/WEB-INF/views/uncaughtException.jspx" />
</definition>
<definition name="home" extends="defaultTemplate">
<put-attribute name="body" value="/WEB-INF/views/home.jspx" />
</definition>
</tiles-definitions>
WEB-INF/шаблон/default/template.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<html>
<head>
<meta charset="UTF-8">
<title>AdminLTE | Dashboard</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href="/sirc/resources/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="/sirc/resources/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="/sirc/resources/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="/sirc/resources/css/AdminLTE.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body class="skin-blue">
<tiles:insertAttribute name="header" />
<div class="wrapper row-offcanvas row-offcanvas-left">
<tiles:insertAttribute name="menu" />
<tiles:insertAttribute name="body" />
</div>
<!-- jQuery 2.0.2 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="/sirc/resources/js/bootstrap.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="/sirc/resources/js/AdminLTE/app.js" type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<script src="/sirc/resources/js/AdminLTE/demo.js" type="text/javascript"></script>
</body>
</html>
WEB-INF/весна/webmvc-config.xml
<aside class="right-side">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard <small>Control panel</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Dashboard</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-aqua">
<div class="inner">
<h3>150</h3>
<p>New Orders</p>
</div>
<div class="icon">
<i class="ion ion-bag"></i>
</div>
<a href="#" class="small-box-footer"> More info <i
class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
...
</section>
<!-- /.content -->
</aside>
То, что я пытался поместить эти аннотации в index.jsp
<jsp:directive.page contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="false" autoFlush="true" />
<jsp:output omit-xml-declaration="yes" doctype-root-element="html"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
Также Я пробовал это stackoverflow question не повезло
Заранее спасибо!
UPDATE 1
Эти предложения @Tung Vo Я проверил CSS и JS URL, и я обнаружил, что я был опуская некоторые файлы. Также я не знаю, почему тег <textarea> </textarea> останавливал правильный рендеринг, поэтому я исправил добавление некоторого текста, как этот текст.С помощью этих корректировок моя страница выглядит сейчас так:
Но я не могу сделать эти значки оставаться скрытыми или подчиняться CSS
UPDATE 2 - вероятное решение (Testing фаза)
Я проверял порядок HTML элементов, и я нашел проблему с этим кодом
<li>
<a href="#">
<i class="fa fa-dashboard"></i>
Home
</a>
</li>
Я изменил порядок тегов и код, как это
<li>
<i class="fa fa-dashboard">
<a href="#"> Home</a>
</i>
</li>
Теперь Главная значок отображается правильно, я предполагаю, что решение изменить иконки заказ и только тогда CSS везут ,
Когда я меняю то, что вы предлагаете, значки больше и появляются спереди. Спасибо – Jessai
Рад что помог как-то; это выглядит нормально сейчас или у вас все еще есть проблемы с CSS? –
У меня все еще есть проблемы с CSS, когда я говорю, что значки больше, я пытался сказать, что выглядит хуже :(Я думаю, что это что-то вроде конфигурации в тот момент, когда страница вводится в шаблон или что-то в этом роде – Jessai