2013-04-11 77 views
5

我試圖使用燃料UX嚮導組件作爲示例所示:燃料UX嚮導組件未正確顯示

http://exacttarget.github.io/fuelux/#wizard

但它不正確顯示。

我的代碼是:

<!doctype html> 
<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<link href="css/bootstrap.css" rel="stylesheet"> 
<link href="css/fuelux.css" rel="stylesheet"> 
<script src="js/jquery-1.9.1.js" type="text/javascript"></script> 
<script src="js/fuelux/require.js"></script> 
<script src="js/fuelux/all.js"></script> 
</head> 

<body> 
    <div class="container"> 
     <div id="workflowWizard" class="wizard"> 
     <ul class="steps"> 
     <li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li> 
     <li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li> 
     <li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li> 
     <li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li> 
     <li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li> 
     </ul> 
     <div class="actions"> 
     <button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button> 
     <button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button> 
     </div> 
     <div class="step-content"> 
     <div class="step-pane active" id="step1">This is step 1</div> 
     <div class="step-pane" id="step2">This is step 2</div> 
     <div class="step-pane" id="step3">This is step 3</div> 
     <div class="step-pane" id="step4">This is step 4</div> 
     <div class="step-pane" id="step5">This is step 5</div> 
     </div> 
    </div> 
</body> 

上是缺少什麼,我的任何想法?

回答

17

好吧,我發現了這個問題。

標籤

<html lang="en"> 

需要包括fuelux類:

<html lang="en" class="fuelux"> 
+1

不一定是整個標記。 fuelux組件的父級中需要'fuelux'類(由於框架中使用了CSS選擇器)。 – fracz 2014-07-08 12:09:16

0

如果使用PHP的預處理,在CSS文件的開頭加入這一行:

<?php header('content-type: text/css'); ?> 


[Lighttpd and phph]