Fuel UX使用

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導入項目,但是總覺得那樣代碼被鎖在了框框裏面非常不爽;



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章