如何讓ExtJS 4.1.1免於搞砸Twitter Bootstrap 2.2.1佈局？

我真的不喜歡ExtJS，但我不得不使用它。我想使用Twitter Bootstrap 2.2.1作爲主佈局，使用ExtJS作爲網格和JS（策略）。如何讓ExtJS 4.1.1免於搞砸Twitter Bootstrap 2.2.1佈局？

我有一個很棒的Bootstrap設計，但是當我加載ExtJS，導航欄，字體等等時，所有的東西都會被遮住。

有沒有辦法讓我的兩個人一起工作，而無需進入ExtJS並調整大量的CSS？

我使用的CSS文件是在以下路徑（ExtJS的）：

js/extjs/4.1.1/resources/css/ext-all-gray.css

感謝

來源

2012-11-06 cbmeeks

後你試圖加載引導ç ss最後？ – dbrin

嘗試[extjs-theme-bootstrap]（https://github.com/NewbridgeGreen/extjs-theme-bootstrap） - Twitter的Bootstrap主題爲ExtJS 4 –

這裏是我的解決方案：
1.使用EXT-全scoped.css代替EXT-all.css
2.加下面的代碼加載EXT-all.js前

<script type='text/javascript'> 
Ext = { 
    buildSettings:{ 
     "scopeResetCSS": true 
    } 
}; 
</script> 
<script type='text/javascript' src='http://xxx.com/extjs/ext-all.js'></script>

3.取出在EXT-全scoped.css以下聲明，以防止ExtJS的重新渲染與衝突的CSS聲明人體引導已加載

.x-body { 
    ... 
}

來源

2013-02-23 18:16:28 pickan

的問題是，規則

.x-border-box .x-reset,.x-border-box .x-reset * {box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;}

以某種方式被應用於所有頁面元素，也用於Twitter Bootstrap輸入（在FF，Chrome上測試）。因此，您應該簡單地提供所有Twitter輸入的

box-sizing:content-box !important; 
-moz-box-sizing:content-box !important; /* Firefox */ 
-webkit-box-sizing:content-box !important; /* Safari */

。有關box-sizing的其他信息。

我希望這有助於。

來源

2012-11-28 14:48:56

如何讓ExtJS 4.1.1免於搞砸Twitter Bootstrap 2.2.1佈局？

回答

相關問題