Bootstrap 3之美04-自訂CSS、Theme、Package，bootstrap04-

Bootstrap 3之美04-自訂CSS、Theme、Package，bootstrap04-

本篇主要包括：

■  自訂CSS
■  自訂Theme
■  自訂Package

 

  自訂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主題發生了很大的變化：

 

  自訂Package

→開啟網站：http://getbootstrap.com/
→點擊Customize功能表項目
→勾選需要的選項
→最後點擊頁面下方的"Complie and Download"按鈕，這樣就會產生自訂的Package

 

參考資料：WilderMinds  

 

“Bootstrap 3之美”系列類包括:

Bootstrap 3之美01-下載並引入頁面Bootstrap 3之美02-Grid簡介和應用Bootstrap 3之美03-獨立行,文字環繞,圖片自適應,隱藏元素Bootstrap 3之美04-自訂CSS、Theme、PackageBootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、FormBootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns類比Select、Input Groups、Thumbnails、Panels、Wells
bootstrap使用，怎找到引用的js與css是那個??

Firefox或者Google遊覽器中開啟開發人員工具（F12）。找到相應的元素，在右邊就會有來源！



 
bootstrapcssmap 這個檔案是幹嘛用的？

這個是source map檔案。
因為bootstrap是用less寫的，less會編譯成css顯示在頁面上。
但有個麻煩，瀏覽器裡看的都是css第幾排，而你編輯的又是less檔案，很難對上。
這個時候有了source map，瀏覽器裡直接顯示less，非常方便。