2017-03-13 59 views

回答

2

我會建議製作新的類,並將該類添加到除引導類以外的HTML元素。這樣,你可以覆蓋並添加信息到引導類,並根據需要修改元素。

爲什麼這樣?

這是一種更清晰的方式,因爲如果其他知道引導程序的人進來並在您的項目中工作,您希望能夠訪問默認的未更改的引導程序類。

+0

我不同意,內聯樣式不是很長期可維護,和實際上擊敗了CSS本身的目的。 –

+1

@NathanielFlick我是absolutley,不鼓勵內聯樣式。我想你誤解了我的評論。我鼓勵在自定義.css文件中創建另一個類,您可以在ADDITION中將其用於使用並需要修改的引導類。 – Olof

+1

內聯樣式的答案中沒有提及。我認爲hes指的是用一個新類來引導bootstraps類,當然在一個css文件中。 – Anders

1

根據您的要求,如果需要所有輸入更改,然後在custom.css中獲得引導類或添加您自己的類只有一個或兩個元素。

+0

感謝您的回答!所以這意味着通常會使用原始的引導類。如果我只想改變單個元素,顯然我必須使用特殊的選擇器。 –

+0

是的,我同意這一點。不要1.直接更改bootstrap或2.使用內聯樣式,或3.使用ID,只需創建一個custom.css,並確保它總是在bootstrap.css之後加載; custom.css總是覆蓋引導類。 –

+0

您的歡迎,請接受答案。 @yN –

0

您應該先收取引導程序,然後收取自定義更改。您可以覆蓋引導程序的類,但是您應該在另一個文件上執行它。

這應該是一個很好的做法,因爲你可以升級引導的圖書館沒有任何問題,也不會丟失你的代碼

+0

Ty,但我不是在談論重載引導類的位置。問題是應該使用原始類還是使用新類來覆蓋它們。 –

1

1.不要修改bootstrap.css文件

你當這會複雜化你的生活需要升級bootstrap(並且您將需要這樣做)。

2.創建自己的CSS文件並覆蓋時,你想要原來的引導東西

,如果他們設置了頂欄,讓我們說,color: black;但你婉它白色的,爲此創建一個新的非常具體的選擇頂欄並在特定頂欄上使用此規則。例如,對於表格,它將是<table class="zebra-striped mycustomclass">。如果你在bootstrap.css之後聲明你的css文件,這會覆蓋你想要的任何東西。

添加自定義樣式表

創建你的引導CSS文件夾中的新文件,並將其命名爲custom.css。

custom css

現在,在您的網站的一部分,默認引導樣式表後裝入新的自定義CSS文件。它應該看起來像這樣。

<head> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="css/custom.css"> 
</head> 

應用自定義樣式 要修改或應用額外的樣式到您的網頁,只需將適當的代碼添加到您的custom.css文件。沒有必要直接編輯任何原始的Bootstrap樣式。例如,如果您決定不喜歡按鈕上的圓角,則可以在custom.css文件中應用以下樣式。

.btn { 
    border-radius: 0px; 
} 

現在,如果你添加一個按鈕到您的網頁使用默認的引導樣式(.btn類),邊角不圓。這是由於您的自定義樣式表覆蓋了默認的Bootstrap樣式表。

Buttons Bootstrap square

的上攻至缺省引導樣式表後添加自定義的樣式表是在引導被升級的情況下,你可以簡單地用更換新的引導樣式和自定義樣式將保持不變。請注意,對於重大升級,您可能需要修改自定義樣式。儘管如此,使用這種方法即使是重大的升級仍然會更容易。

+0

我已經在其他地方見過這個答案了!它會導致「取決於」,如果理解正確,不是嗎? –

+0

使用這個自己的類,是最好的未來版本@yN。 – JMF