Twitter Bootstrap自定義CSS包含

當使用自定義css和Twitter Bootstrap覆蓋某些樣式時，將自定義css鏈接放置在引導響應css之前或之後會更好嗎？Twitter Bootstrap自定義CSS包含

<link rel="stylesheet" href="css/bootstrap.min.css"> 
<link rel="stylesheet" href="css/bootstrap-responsive.min.css"> 

<!-- Your custom css --> 
<link rel="stylesheet" href="css/style.css">

或

<link rel="stylesheet" href="css/bootstrap.min.css"> 
<!-- Your custom css --> 
<link rel="stylesheet" href="css/style.css"> 
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">

，什麼是各自的利弊？

如果我編輯，像這樣的自舉responsive.css身體後填充：

<link rel="stylesheet" href="css/bootstrap.min.css"> 
<link rel="stylesheet" href="css/bootstrap-responsive.min.css"> 

/* Add padding for navbar-top-fixed */ 
body { 
    padding-top: 60px; 
    padding-bottom: 40px; 
}

然後，我還必須使用一個媒體查詢，因爲我已覆蓋全球的車身風格修復響應式佈局。

/* Fix to remove top padding for narrow viewports */ 
@media (max-width: 979px) { 
    body { 
    padding-top: 0; 
    } 
}

來源

2013-01-31 TheGwa

它通常是更好地被重寫在Bootstrap CSS之後放置您的自定義CSS。我想象你想要自定義CSS覆蓋Bootstrap CSS。

在Bootstraps之後放置自定義樣式的優點是，您可以使用與它們相同的選擇器更改Bootstraps CSS中設置的任何內容。改變小事情很容易。如果您使用相同的選擇器，則瀏覽器將使用應用於元素的最後一個規則。

我實在看不出放置引導CSS自定義CSS後的任何好處，它不會真正使多大意義，寫你自己的風格，然後用引導的覆蓋它們...

例如，這不是引導CSS，但它的工作方式相同，如果你有你的頭部分以下內容：

<link href="framework.css" rel="stylesheet" type="text/css" /> 
<link href="custom-styles.css" rel="stylesheet" type="text/css" />

然後在framework.css你有以下幾點：

div.row { 
    border: 1px solid #eee; 
    border-radius: 3px; 
    margin-bottom: 50px; 
    padding: 15px; 
}

但你意識到你想添加一個紅色背景（爲什麼，爲什麼...）並更改圓角半徑，你可以在custom-styles.css如下：

div.row { 
    background-color: red; 
    border-radius: 10px; 
}

應用於元素的最終的CSS將是這樣的：

div.row { 
    background-color: red; 
    border: 1px solid #eee; 
    border-radius: 10px; 
    margin-bottom: 50px; 
    padding: 15px; 
}

因爲從custom-styles.css覆蓋在framework.css的現有的樣式和附加會被應用呢！ :)

來源

2013-01-31 10:33:04 Seer

我同意在bootstrap.css之後放置自定義css，但我的問題更多的是bootstrap-responsive.css。例如，如果我在bootstrap-responsive.css之後更改了主體填充，則必須添加其他媒體查詢來修復已損壞的內容。我將編輯問題更清楚。 – TheGwa

如果您在自定義CSS之後放置自適應CSS，它會如何反應？ – Seer

如果您要通過添加自定義樣式來對這些樣式進行更改，那麼您還必須添加自定義樣式來處理響應式視圖，這只是維護響應式設計的一部分，使用響應式CSS確實意味着您有爲每個角色添加更多的CSS，但是恐怕沒有辦法解決這個問題。 :( – Seer

我想，如果你把style.css的頂部，然後bootstarp樣式將覆蓋它。如果你把style.css中在底部，那麼引導風格將與您的自定義樣式

來源

2013-01-31 10:29:40 PSR

Twitter Bootstrap自定義CSS包含

回答

相關問題