本篇主要包括:
■ 自定义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之美”系列类包括:
bootstrap 3之美01-下载并引入页面 bootstrap 3之美02-grid简介和应用 bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素 bootstrap 3之美04-自定义css、theme、package bootstrap 3之美05-排版、button、icon、nav和navbar、list、table、form