覆蓋預設 CSS

Created: November-22, 2018

每個人都喜歡 twitter bootstrap ，但我們中的一些人不喜歡它的預設設計。所以這裡有一個關於如何開始定製 boostrap 設計的簡單指南。克隆時的 Twitter boostrap 提供了一組我們可以覆蓋的預設 css 檔案。

我們需要覆蓋的郵件 css 檔案是 boostrap/dist/css 目錄下的 boostrap.min.css。

要覆蓋 boostrap 的預設設計，請遵循以下 2 個簡單步驟。

建立一個 custom.css（或者你可以任意命名）並將它連結到你的 index.html

<html>
<head>
    <title>Customize Bootstrap</title>

    <link rel="stylesheet" type="text/css" href="path/to/bootstrap.min.css">
    <!-- This mus be declared after the bootstrap.min.css -->
    <link rel="stylesheet" type="text/css" href="path/to/your/custom.css">
</head>
<body>
    <!-- Do something -->
</body>
</html>

開始定製。例如，我們想要更改預設按鈕的顏色。如果你想使用 bootstrap 的預設按鈕樣式，你需要在 <button class="btn">Sample</button> 標籤上新增 btn 類。只需在 custom.css 上編寫以下程式碼即可。
```
.btn{
    background-color:red;
}
```
上面的程式碼將生成這樣的東西。

預設值：

定製：

這種技術將使我們無法重寫已由 boostrap 貢獻者編寫的整個按鈕樣式。這也使我們免於編寫自己的 css 類，這對我來說不那麼乏味。