如何更改链接颜色(Bootstrap)

vnzz0bqm  于 2023-11-15  发布在  Bootstrap
关注(0)|答案(8)|浏览(180)

x1c 0d1x的数据

<div class="collapse navbar-collapse">
                    <ul class="nav pull-right">
                        <li class="active"><a href="#">О нас</a></li>
                        <li><a href="#">Как это работает</a></li>
                        <li><a href="#">Цены</a></li>
                        <li><a href="#">Контакты</a></li>
                    </ul>

字符串
我对Bootstrap很陌生。这里我有3个类指向。我至少有3个.css文件:styles.css,flat-ui.css,bootstrap.css。我不知道如何更改这些链接颜色。

w46czmvw

w46czmvw1#

ul.nav li a, ul.nav li a:visited {
    color: #anycolor !important;
}

ul.nav li a:hover, ul.nav li a:active {
    color: #anycolor !important;
}

ul.nav li.active a {
    color: #anycolor !important;
}

字符串
如你所愿改变风格。

nzkunb0c

nzkunb0c2#

对于直接更改,您可以在<a>标记中使用Bootstrap类(它在<div>中不起作用):

<h4 class="text-center"><a class="text-warning" href="#">Your text</a></h4>

字符串

hc8w905p

hc8w905p3#

如果您使用的是Bootstrap 4,您可以简单地使用color utility class(例如text-successtext-danger等)。
您也可以创建自己的类(例如text-my-own-color
这两个选项都显示在下面的示例中,运行 * 代码片段 * 以查看实时演示。

.text-my-own-color {
  color: #663300 !important; // Define your own color in your CSS
}
.text-my-own-color:hover, .text-my-own-color:active {
  color: #664D33 !important; // Define your own color's darkening/lightening in your CSS
}

个字符

6tqwzwtp

6tqwzwtp4#

我完全知道原始问题中的代码显示了与导航栏相关的情况。但是当你也深入到其他组件时,了解文本样式的类选项可能不起作用可能会有所帮助。
但是你仍然可以创建自己的帮助类来保持HTML中的“引导流”。这里有一个想法来帮助样式化位于panel-title区域中的链接。
下面的代码本身不会在您的锚链接上设置警告颜色.

<div class="panel panel-default my-panel-styles"> 
...    
  <h4 class="panel-title">
    <a class="accordion-toggle btn-block text-warning" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      My Panel title that is also a link
    </a>
  </h4>
 ...
 </div>

字符串
但是您可以通过添加您自己的类来扩展Bootstrap样式包,并使用适当的颜色,如下所示。

.my-panel-styles .text-muted {color:#777;}
.my-panel-styles .text-primary {color:#337ab7;}
.my-panel-styles .text-success {color:#d44950;}
.my-panel-styles .text-info {color:#31708f;}
.my-panel-styles .text-warning {color:#8a6d3b;}
.my-panel-styles .text-danger {color:#a94442;}


.现在您可以继续使用所需的Bootstrap颜色构建面板锚链接。

aydmsdu9

aydmsdu95#

使用bootstrap 4和SCSS,请查看此链接以获取完整的详细信息
https://getbootstrap.com/docs/4.0/getting-started/theming/
简而言之
打开lib/bootstrap/scss/_navbar.scss并找到创建这些变量的语句

.navbar-nav {
    .nav-link {
      color: $navbar-light-color;

      @include hover-focus() {
        color: $navbar-light-hover-color;
      }

      &.disabled {
        color: $navbar-light-disabled-color;
      }
    }

字符串
所以现在你需要

$navbar-light-color
$navbar-light-hover-color
$navbar-light-disabled-color


创建一个新的scss文件**_localVariables.scss**,并添加以下内容(以及颜色)

$navbar-light-color : #520b71
$navbar-light-hover-color: #F3EFE6;
$navbar-light-disabled-color: #F3EFE6;

@import "../lib/bootstrap/scss/functions";
@import "../lib/bootstrap/scss/variables";
@import "../lib/bootstrap/scss/mixins/_breakpoints";


在你的其他scss页面上,

@import "_localVariables";


而不是

@import "../lib/bootstrap/scss/functions";
@import "../lib/bootstrap/scss/variables";
@import "../lib/bootstrap/scss/mixins/_breakpoints";

lawou6xi

lawou6xi6#

你可以使用.text-reset类将颜色从默认的蓝色重置为你想要的任何颜色。希望这对你有帮助。
来源:https://getbootstrap.com/docs/4.5/utilities/text/#reset-color

uyto3xhc

uyto3xhc7#

现在在Bootstrap 5中,您可以使用彩色链接. See here

<a href="#" class="link-primary">Primary link</a>
<a href="#" class="link-secondary">Secondary link</a>
<a href="#" class="link-success">Success link</a>
<a href="#" class="link-danger">Danger link</a>
<a href="#" class="link-warning">Warning link</a>
<a href="#" class="link-info">Info link</a>
<a href="#" class="link-light">Light link</a>
<a href="#" class="link-dark">Dark link</a>

字符串

z0qdvdin

z0qdvdin8#

在bootstrap 5中,可以像这样更改链接颜色。

<a class="icon-link" style="--bs-link-color-rgb: 25, 135, 84;">

字符串

相关问题