如何使用bootstrap-sass自定義引導程序css

我想更改許多內容，例如按鈕顏色或例如更改導航欄（標題）上的背景圖像顏色。我用的自舉 - 薩斯寶石，所以我不能使用自舉的網站」 Customize page 如何使用bootstrap-sass自定義引導程序css

我應該真正覆蓋所有這些在我的文件custom.css.scss或者我可以改變這些地方更低水平？我沒有找到允許我在項目文件中做到的.css文件（我搜索了所有庫，應用程序和供應商/資產，但現在我找到了boostrap的css，我懷疑這是因爲它們不在那裏，但它們直接在寶石文件中）我有很多變化，所以我覺得過多的東西不是最好的選擇。

這樣做的最好方法是什麼？謝謝

來源

2013-05-01 Mathieu

你不應該修改Boostrap的原始文件。最好的選擇是用自己的類覆蓋他們的類。您可以通過在資產/樣式表文件夾中創建一個css文件來做到這一點，該文件夾會自動包含在您的應用程序中。

來源

2013-05-01 20:11:55 amb110395

嗨！比方說，我想改變顏色，背景等導航風格，我該怎麼做。你能舉個例子嗎？ – 2014-08-24 12:50:53

我已經開始使用Twitter Bootstrap的Sass風格，並且我只是想出了一個明智的方式來構建我的文件，這樣我就可以製作自己的自定義覆蓋而不會混淆核心文件，並將所有CSS保存在一個文件中加載更快。

簡而言之，我將所有sass文件放入assets/sass文件中，併爲核心文件創建一個名爲bootstrap的子目錄。然後爲我的自定義scss文件創建一個名爲主題的兄弟目錄。

轉到/bootstrap，在這個目錄內有一個名爲bootstrap.scss的文件，其中包含所有的核心組件。此文件重命名爲theme.scss，並把它放在這樣的父目錄：

file structure

正如你可以看到我已經有了一些定製覆蓋青菜已經包括在主題目錄中的文件。這些將在編譯時加入到默認引導程序CSS的底部。

當您進入theme.scss並更改包含路徑like so時會發生奇蹟。朝向圖像的底部查看覆蓋，並朝着自定義變量引用的頂部查看。

注：如果你想在引導編輯的變量，這是一個好主意，使你自己的_variables.scss文件在您theme目錄，包括它你theme.scss文件的頂部。通過這種方式，您可以覆蓋將來隨更新而保留的引導程序變量。

然後只包括theme.css在您的網頁和瞧。這就是我已經開始這樣做，並沒有遇到任何錯誤。

我覺得這是我見過的方法中最簡單的。而當新的更新下來，我只會更新核心引導文件，並保持我的編輯！

來源

2013-10-27 05:40:57 gillytech

謝謝，這很有道理！你有沒有深入的教程分享？ – Dieterg 2014-09-30 08:51:02

不幸的不是。我希望我有更多的時間來分享我學到的技巧和竅門。 – gillytech 2015-01-26 22:39:22

我也有這個相同的問題，我喜歡gillytech的答案，但我想補充說，你不需要從_variables複製所有的東西。scss文件放到你自己的變量文件中。您只需聲明和使用Bootstrap正在使用的相同變量，並確保在加載Bootstrap的_variables.scss文件之前，您將加載變量文件。

您會注意到許多Bootstrap變量在給它賦值之後有一個「！default」。這意味着如果sass已經定義了，sass不會覆蓋它。

所以我theme.scss文件看起來像這樣：

@import "superhero-variables"; 
@import "bootstrap"; 
@import "superhero-theme";

「與變量造型引導」下找到此位置：http://pivotallabs.com/sass-with-bootstrap/

來源

2014-10-10 19:58:15

如何使用bootstrap-sass自定義引導程序css

回答

相關問題