Bootstrap3之美04-自定義CSS、Theme、Package_html/css_WEB-ITnose

來源：懂視網責編：小采時間：2020-11-27 15:55:00

Bootstrap3之美04-自定義CSS、Theme、Package_html/css_WEB-ITnose

Bootstrap3之美04-自定義CSS、Theme、Package_html/css_WEB-ITnose:本篇主要包括： ■ 自定義CSS■ 自定義Theme■ 自定義Package 自定義CSS 有時候，需要自定義或重寫Bootstrap默認的CSS。→在css文件夾下創建一個site.css→假設要對container類重寫，在site.css中 .container { background-

推薦度：

點擊下載本文 文檔為doc格式

導讀Bootstrap3之美04-自定義CSS、Theme、Package_html/css_WEB-ITnose:本篇主要包括： ■ 自定義CSS■ 自定義Theme■ 自定義Package 自定義CSS 有時候，需要自定義或重寫Bootstrap默認的CSS。→在css文件夾下創建一個site.css→假設要對container類重寫，在site.css中 .container { background-

本篇主要包括：

■ 自定義CSS
■ 自定義Theme
■ 自定義Package

自定義CSS

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

.container { background-color: #eee;}

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

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

自定義Theme

在

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

  新浪體育 主頁
 關于我們
 聯系我們

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

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

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

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

自定義Package

→打開網站：http://getbootstrap.com/
→點擊Customize菜單項
→勾選需要的選項
→最后點擊頁面下方的"Complie and Download"按鈕，這樣就會生成自定義的Package

參考資料：WilderMinds

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