2013-10-07 55 views
1

這是事情:我在IntellijIDEA(代碼如下)中創建了一些帶有bootstrap css的html文件。在瀏覽器中打開它,所有工作都正常。JSP不拾起bootstrap css(IDEA + Tomcat)

將該代碼複製到.jsp文件,啓動Tomcat服務器,並且css不起作用。

<html> 
<head> 
<title>Money Transfer</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<!-- Bootstrap --> 
<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
<link href="bootstrap/dist/css/bootstrap.css" rel="stylesheet" media="screen"> 

</head> 

<body> 
<form action="submit" method="get"> 
    <form class="form-horizontal" role="form"> 
     <div class="row"> 
      <div class="col-md-5 col-md-offset-4"> 
<h2 class="form-signing-heading">Money Transfer Form</h2></div> 
     </div> 

     <div class="form-group"> 
      <div class="row"> 
      <div class="col-md-1 col-md-offset-3"><label>Sender</label></div> 
      <div class="col-md-3"><select name="sender" class="form-control"> 
        <option value="John Doe">John Doe</option> 
        <option value="Mr.Smith">Mr.Smith</option> 
        <option value="ScratchCard">ScratchCard</option> 
      </select></div> 
     </div> 
     </div> 

     <div class="form-group"> 
      <div class="row"> 
      <div class="col-md-1 col-md-offset-3"><label>Receiver</label></div> 
      <div class="col-md-3"><select name="receiver" class="form-control"> 
        <option value="jane Doe">Jane Doe</option> 
        <option value="Mrs.Smith">Mrs.Smith</option> 
        <option value="System">System</option> 
      </select></div> 
     </div> 
     </div> 

     <div class="form-group"> 
     <div class="row"> 
      <div class="col-md-1 col-md-offset-3"><label>Amount</label></div> 
      <div class="col-md-3"> 
       <div class="input-group"> 
     <input type="amount" class="form-control" placeholder="Amount" name="amount"> 
        <span class="input-group-addon">$</span> 
       </div> 
      </div> 
     </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-md-offset-5"> 
       <button type="send" class="btn btn-success">Send</button> 
       <button type="cancel" class="btn btn-link">Cancel</button> 
      </div> 
     </div> 
    </form> 
</form> 

<script src="//code.jquery.com/jquery.js"></script> 
<script src="bootstrap/dist/js/bootstrap.min.js"></script> 

</body> 
</html> 

回答

1

我認爲存在相對路徑問題。 jsp和HTML文件的相對路徑的相對路徑是不同的。查看您的jsp頁面後,在瀏覽器中查看源代碼並嘗試打開這些css文件。您將收到一條錯誤消息。

我不知道你的項目文件/文件夾結構,但我建議在你的jsp文件中使用servlet上下文路徑來計算你的css文件的正確路徑。

使用request.getContextPath()獲取您的jsp文件中的上下文路徑,並使用此表達式構成css/javascript文件的完整路徑。

如果bootstrap文件夾位於你的網絡的應用程序文件夾的根目錄,然後使用這種結構:

<link href="<%=request.getContextPath()%>/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">