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

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：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 有時(shí)候，需要自定義或重寫B(tài)ootstrap默認(rèn)的CSS。→在css文件夾下創(chuàng)建一個(gè)site.css→假設(shè)要對(duì)container類重寫，在site.css中 .container { background-

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Bootstrap3之美04-自定義CSS、Theme、Package_html/css_WEB-ITnose:本篇主要包括： ■ 自定義CSS■ 自定義Theme■ 自定義Package 自定義CSS 有時(shí)候，需要自定義或重寫B(tài)ootstrap默認(rèn)的CSS?！赾ss文件夾下創(chuàng)建一個(gè)site.css→假設(shè)要對(duì)container類重寫，在site.css中 .container { background-

本篇主要包括：

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

自定義CSS

有時(shí)候，需要自定義或重寫B(tài)ootstrap默認(rèn)的CSS。
→在css文件夾下創(chuàng)建一個(gè)site.css
→假設(shè)要對(duì)container類重寫，在site.css中

.container { background-color: #eee;}

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

→瀏覽index.html，發(fā)現(xiàn)背景色已經(jīng)變成灰色

自定義Theme

在

區(qū)域內(nèi)，給id為menu的div添加屬性class="navbar navbar-default"，并調(diào)整如下：

  新浪體育 主頁(yè)
 關(guān)于我們
 聯(lián)系我們

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

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

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

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

自定義Package

→打開網(wǎng)站：http://getbootstrap.com/
→點(diǎn)擊Customize菜單項(xiàng)
→勾選需要的選項(xiàng)
→最后點(diǎn)擊頁(yè)面下方的"Complie and Download"按鈕，這樣就會(huì)生成自定義的Package

參考資料：WilderMinds

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

Bootstrap 3之美01-下載并引入頁(yè)面

Bootstrap 3之美02-Grid簡(jiǎn)介和應(yīng)用

Bootstrap 3之美03-獨(dú)立行,文字環(huán)繞,圖片自適應(yīng),隱藏元素