【问题标题】:How to change link color (Bootstrap)如何更改链接颜色(引导程序)
【发布时间】:2014-07-19 22:20:08
【问题描述】:

<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。我不知道如何更改这些链接颜色。

【问题讨论】:

标签: twitter-bootstrap colors hyperlink navbar


【解决方案1】:
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;
}

根据需要更改样式。

【讨论】:

    【解决方案2】:

    对于直接更改,您可以在 &lt;a&gt; 标记中使用 Bootstrap 类(在 &lt;div&gt; 中不起作用):

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

    【讨论】:

    • 从 Bootstrap 3.3.6 开始,向面板标题区域内的锚链接添加文本警告或任何文本样式都不起作用。
    • 对悬停做出反应并改变颜色
    • 面板与这个问题有什么关系?仅供参考,在 Bootstrap 4 中,面板已被卡片替换。这种技术适用于它们。
    【解决方案3】:

    我完全清楚原始问题中的代码显示了与导航栏相关的情况。但是,当您还深入研究其他组件时,了解文本样式的类选项可能不起作用可能会有所帮助。

    但您仍然可以创建自己的帮助类来保持 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;}
    

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

    【讨论】:

      【解决方案4】:

      如果您使用的是Bootstrap 4,您可以简单地使用color utility class(例如text-successtext-danger等...)。

      您也可以创建自己的类(例如text-my-own-color

      两个选项都显示在下面的示例中,运行 code sn-p 以查看现场演示。

      .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
      }
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
      <div class="navbar-collapse">
        <ul class="nav pull-right">
      
          <!-- Bootstrap's color utility class -->
          <li class="active"><a class="text-success" href="#">О нас</a></li>
      
          <!-- Bootstrap's color utility class -->
          <li><a class="text-danger" href="#">Как это работает</a></li>
      
          <!-- Bootstrap's color utility class -->
          <li><a class="text-warning" href="#">Цены</a></li>
      
          <!-- Custom color utility class -->
          <li><a class="text-my-own-color" href="#">Контакты</a></li>
      
        </ul>
      </div>

      【讨论】:

      • 警告:此自定义颜色示例无法像原生 Bootstrap 颜色(主要、危险...)那样处理悬停/活动/焦点时的变暗/变亮。
      • 嗨@Theophany,答案已扩展为包括如何通过悬停/活动CSS选择器处理变暗/变亮,省略了焦点,因为通常仅用于输入元素,但您可以修改代码根据需要。
      【解决方案5】:

      使用引导程序 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";
      

      【讨论】:

        【解决方案6】:

        您可以使用.text-reset 类将颜色从默认蓝色重置为您想要的任何颜色。希望这会有所帮助。

        来源:https://getbootstrap.com/docs/4.5/utilities/text/#reset-color

        【讨论】:

          【解决方案7】:

          现在在 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>
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 2016-02-20
            • 1970-01-01
            • 2014-03-04
            • 1970-01-01
            • 1970-01-01
            • 2020-07-09
            • 2021-10-07
            相关资源
            最近更新 更多