Question

我在我的angular 6应用程序开发中使用bootstrap 4和sass。

我试图通过自定义引导程序nav-tabs和nav-link类在应用程序中创建一个nav选项卡。但是，自定义的引导程序类没有反映出来。因此，我的问题是我们可以在角度应用程序开发中自定义引导程序类吗？如果是这样，我们该怎么做？以下是我的角度组件的代码片段。

myComponent.html：

<div class="profile-head">
    <h5>
       Sreehari
    </h5>
    <h6>
       Developer
    </h6>

    <ul class="nav nav-tabs" id="myTab" role="tablist">
       <li class="nav-item">
          <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">About</a>
       </li>
       <li class="nav-item">
          <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
       </li>
    </ul>
</div>

已更新：我的主要问题是，当我单击“关于和配置文件”选项卡时，蓝色边框底部应移至活动选项卡。但是，它根本没有动。

myComponent.scss：

.profile-head {
h5 {
    color: #333;
}

h6{
    color: #0062cc;
}

p{
    font-size: 12px;
    color: #818182;
    margin-top: 5%;
    span{
        color: #495057;
        font-size: 15px;
        font-weight: 600;
    }
}

.nav-tabs{
    margin-bottom:5%;

    .nav-link{
        font-weight:600;
        border: none;
        &.active{                
            border: none;
            border-bottom:2px solid #0062cc;
        }
    }
}

}

我已经在我的styles.scss中导入了引导程序，如下所示。

@import "../node_modules/bootstrap/scss/bootstrap";

Answer 1

您的款式已经很好地导入。但是您不能在active语句之间切换，因为引导程序需要Jquery和bootstrap.js来切换类。

为了使带有选项卡的活动语句的路径成角度。在您的项目中使用Jquery和BootstrapJs（不推荐），或者在component.ts中构建逻辑，这里有一个示例，您可以这样做：{{ 3}}

在Angular开发中自定义引导程序类

1 个答案: