Fuel UX是Bootstrap的一個擴展,但是官方文檔寫的不是很容易引用,所以想要引用非常麻煩,下面總結一下引用Fuel UX的方法
1.將html中Bootstrap得引用全部刪除
2.將jquery包,Bootstrap包,Fuel UX包加入工程
3.修改<html>標籤
< html lang ="en" class="fuelux" >
4.引用FuelUX得css文件
<link href="css/fuelux.css" rel= "stylesheet">
<link href="css/fuelux-responsive.css" rel= "stylesheet">
5.引用jquery FuelUX
<script src="js/jquery-1.8.0.js" ></script>
<script src="js/loader.js" ></script>
這裏要說明一下,我們不需要引用任何Bootstrap的js文件,如果引用了會導致交互失效;
而FuelUX只需要導入一個loader.js文件;
這裏多引用任何一個文件都可能導致顯示問題或事件失效;
6.下載underscore.js並導入
<script type="text/javascript" src= "js/underscore.js"></script >
這裏官方文檔引用了一個外網文件,如果在沒有互聯網的環境將無法使用,所以選擇將其下載導入工程中;
下載地址:
http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js
這裏還要將其重命名爲underscore.js;
導入到工程;
到這裏就將FuelUX引用到工程中了
完整的配置如下
<link href="css/fuelux.css" rel= "stylesheet">
<link href="css/fuelux-responsive.css" rel= "stylesheet">
<script src="js/jquery-1.8.0.js" ></script>
<script src="js/loader.js" ></script>
<script type="text/javascript" src= "js/underscore.js"></script >
當然你也可以使用官方用的requirejs導入項目,但是總覺得那樣代碼被鎖在了框框裏面非常不爽;