Bootstrap 3之美04-自定义CSS、Theme、Package
2023-09-11 14:16:51 时间
本篇主要包括:
■ 自定义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、Package
Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form
Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells
Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel
相关文章
- 四款免费好用的Bootstrap ui编辑器
- bootstrap-modal 学习笔记 源码分析
- Angularjs与bootstrap.datetimepicker结合实现日期选择器
- [CSS] Purgecss to remove unused css
- SPSS分析:Bootstrap
- Bootstrap 提示工具(Tooltip)插件
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- 上传图片 展示进度条 bootstrap
- 关于 Angular 应用的 Bootstrap 过程
- Bootstrap Studio 6.0.2 Crack
- BootStrap后台管理常用文档存档
- 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题
- 分页器的js实现代码 bootstrap Paginator.js
- CSS_使用css布局
- 【CSS】css常用复杂选择器都有哪些?看这一篇就够了_07
- 【CSS】css转换、css过渡、css动画_09
- 【CSS】css概述、语法规范、基础选择器_01