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之美”系列类包括: