Bootstrap 3之美04-自定義CSS、Theme、Package

本文轉載自查看原文 2014-08-22 17:01 3031 Bootstrap/ css3/ Html5

本篇主要包括：

自定義CSS

有時候，需要自定義或重寫Bootstrap默認的CSS。
→在css文件夾下創建一個site.css
→假設要對container類重寫，在site.css中

.container {
    background-color: #eee;
}

→把site.css引用到index.html中，並放置在bootstrap.min.cs的下方

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

→瀏覽index.html，發現背景色已經變成灰色

自定義Theme

在<header>區域內，給id為menu的div添加屬性class="navbar navbar-default"，並調整如下：

        <header class="container">
            <div id="menu" class="navbar navbar-default">
                <div id="logo">
                    <a href=".">新浪體育</a>
                </div>
                <ul>
                    <li><a href="#">主頁</a></li>
                    <li><a href="#">關於我們</a></li>
                    <li><a href="#">聯系我們</a></li>
                </ul>
                <button class="btn">登錄</button>
            </div>
        </header>

把css文件夾下的bootstrap-theme.min.css樣式文件引入到index.html中，並放置在bootstrap.min.css下方。如下：

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

我們看到，導航內容都被框在一個圓角矩形框內。如果對當前的Theme不夠滿意，還可以去http://bootswatch.com/這個網站，該網站提供Bootstrap開源Theme。比如對Cyborg這個Theme感興趣，點擊Download按鈕，在打開的頁面中右鍵，選擇另存為，把文件名設置為Cyborg.bootstrap.min.css,並保存到網站的css文件夾。

用Cyborg.bootstrap.min.css文件替代掉原先的bootstrap-theme.min.css文件，變成如下：

    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/Cyborg.bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />

再次瀏覽index.html，Theme主題發生了很大的變化：