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

Question

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

我正在尝试通过自定义bootstrap nav-tabs，nav-link类在我的应用程序中创建一个nav标签。但是，定制的引导程序类没有反映。所以，我的问题是，我们可以在angular应用程序开发中定制bootstrap类吗？如果是这样的话，我们怎么做呢？下面是我的angular组件的代码片段。

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>

更新:我的主要问题是，当我点击"About“和”Profile“标签时，蓝色边框底部应该移动到活动标签。然而，它一点也不动。

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中导入了bootstrap，如下所示。

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

Answer 1

你的风格已经是很好的进口了。但是您不能在active语句之间切换，因为bootstrap需要Jquery和bootstrap.js来切换类。

以便在您的标签页中使用活动语句进行路由。在你的项目中使用Jquery和BootstrapJs (不推荐使用)或者在你的component.ts中构建你的逻辑这里是一个如何做到这一点的例子：Routable twitter bootstrap tabs made with Angular