2013-01-11 37 views
0

我用custom.css文件擴展了Bootstrap提供的CSS模板。不過,我注意到,在加載站點時,您可以看到由bootstrap提供的舊CSS,然後站點使用新的CSS進行調整。Twitter Bootstrap延遲的CSS效果

我覺得這讓用戶分散注意力讓div的字體/位置不斷變化。 Web開發人員如何通過Bootstrap來解決這個問題?我知道您不要直接修改Bootstrap CSS文件,因爲這會在更新到達時產生問題。

參考:

<link href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet"> 
<link href="{{ STATIC_URL }}css/bootstrap-responsive.css" rel="stylesheet"> 
<link href="{{ STATIC_URL }}css/custom.css" rel="stylesheet"> 

回答

1

結合所有3個CSS文件轉換成1將是一個解決方案。有各種各樣的方式來做到這一點。低科技的方法是開始一個新的combined.css文件,然後將你的3個CSS文件複製並粘貼到這個新文件中。最好按照他們目前出現的順序進行操作。然後在你的文件的頭,用

<link href="{{ STATIC_URL }}css/combined.css" rel="stylesheet"> 

更換三個CSS文件鏈接您可能還略有加快頁面加載以及因爲你現在載入只是一個文件。

如果您想更進一步,請嘗試縮小組合CSS。這裏也有選項種種,一種可能性是http://www.cssminifier.com

好運

+0

人們可以通過使用.LESS文件和添加自定義CSS的作爲.LESS文件採取這樣的想法一步。然後,所有的.less文件被編譯。 https://github.com/twitter/bootstrap –

+0

是的,我同意@Scott,少就是輝煌。多一點學習曲線,但絕對值得。 –