如何解决Bulma-如何使用一个助手更改导航栏上所有链接的文本颜色?
在布尔玛,如何一次更改多个项目的文本颜色?
也就是说,我的视力较低,我想将导航栏上的所有文本更改为黑色,而不是较暗的灰色。
我是Bulma的新手,到目前为止,我可以使用“ has-text-black”帮助程序,但必须将它们添加到每个链接中。
<nav id="navbarMain" class="navbar is-spaced" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item is-size-4 has-text-black" href="/">
<span class="icon is-large is-circle">
<i class="fas fa-cube has-text-primary fa-lg"></i>
</span>
My Site
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item has-text-black" href="/about/">
<span class="icon has-text-link">
<i class="fas fa-info-circle"></i>
</span>
About
</a>
....
我希望将助手添加到包含导航栏链接项的一个div或容器中的类中的某个位置,但这似乎不起作用。
我查看了自定义文档,并尝试设置$ text:black;但这也不起作用。
是否可以将部分或容器中的所有灰色文本颜色设置为黑色?
而且,如何设置/自定义全局或站点范围内的文本颜色,从灰色变为黑色(或其他颜色)?
(否则,是否有所有颜色变量的详细说明以及如何以正确的顺序进行修改?)
先谢谢了。 拉尔夫
解决方法
关键是要注意文档。 Bulma 为其所有组件或元素提供了 SASS 变量,以供您进行自定义。目标是尽可能少地编写自定义 CSS。这是链接
https://bulma.io/documentation/components/navbar/#colors
在您项目的全局 SCSS 文件中,您可以添加这些 SCSS 变量并添加您选择的颜色:
$navbar-burger-color: #f1f1f1;
$navbar-background-color: #273643;
$navbar-item-hover-background-color: #3f4f62;
$navbar-item-hover-color: $white;
$navbar-item-color: #f1f1f1;
$navbar-dropdown-arrow: #f1f1f1;
$navbar-tab-active-color: #f1f1f1;
$navbar-tab-active-background-color: #273643;
$navbar-dropdown-background-color: $primary;
如果您对颜色组合感到困惑,请访问--> https://coolors.co
干杯!! :)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。