覆蓋預設 CSS

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

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

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

  1. 建立一個 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>
    
  2. 開始定製。例如,我們想要更改預設按鈕的顏色。如果你想使用 bootstrap 的預設按鈕樣式,你需要在 <button class="btn">Sample</button> 標籤上新增 btn 類。只需在 custom.css 上編寫以下程式碼即可。

    .btn{
        background-color:red;
    }
    

    上面的程式碼將生成這樣的東西。

    預設值:

    StackOverflow 文件

    定製:

    StackOverflow 文件

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