在 Bootstrap 4.5 中创建自己的主题
Create your own theme in Bootstrap 4.5
我刚刚从 getbootstrap.com 下载了 SASS 个源文件,并安装了编译器 Koala。
据我了解,方法是
- 创建您自己的 sass 文件。
- 在文件开头包含覆盖。
- 导入文件末尾的'bootstrap.scss。
- 编译您的 css 文件并用此 css 文件替换标准 cdn。
实际上,这是可行的,但是当我尝试使用自己的样式创建导航栏时,我意识到仅仅创建一个主题是不够的。一个例子是导航栏文本颜色显示为一种完全不适合主题的奇怪颜色。那么我还需要做些什么呢?下面是我的自定义 scss.
// Custom.scss
// Make overrides and customizations
$myown: #0066CC !default;
$theme-colors: ("myown": #0066CC);
// Include all of Bootstrap
@import "bootstrap.scss";
只有 navbar-light
和 navbar-dark
影响导航栏的文本颜色。使用 navbar-dark 应该可以正常工作:http://codeply.com/p/UAWVfUy3VX -- 因为蓝色更深。
SASS
$myown: #0066CC;
$theme-colors: ("myown": #0166CC);
@import "bootstrap";
HTML
<nav class="navbar navbar-expand-md navbar-dark bg-myown">...</nav>
另见:Customizing Bootstrap CSS template
我刚刚从 getbootstrap.com 下载了 SASS 个源文件,并安装了编译器 Koala。
据我了解,方法是
- 创建您自己的 sass 文件。
- 在文件开头包含覆盖。
- 导入文件末尾的'bootstrap.scss。
- 编译您的 css 文件并用此 css 文件替换标准 cdn。
实际上,这是可行的,但是当我尝试使用自己的样式创建导航栏时,我意识到仅仅创建一个主题是不够的。一个例子是导航栏文本颜色显示为一种完全不适合主题的奇怪颜色。那么我还需要做些什么呢?下面是我的自定义 scss.
// Custom.scss
// Make overrides and customizations
$myown: #0066CC !default;
$theme-colors: ("myown": #0066CC);
// Include all of Bootstrap
@import "bootstrap.scss";
只有 navbar-light
和 navbar-dark
影响导航栏的文本颜色。使用 navbar-dark 应该可以正常工作:http://codeply.com/p/UAWVfUy3VX -- 因为蓝色更深。
SASS
$myown: #0066CC;
$theme-colors: ("myown": #0166CC);
@import "bootstrap";
HTML
<nav class="navbar navbar-expand-md navbar-dark bg-myown">...</nav>
另见:Customizing Bootstrap CSS template