首页 文章

在Angular开发中自定义bootstrap类

提问于
浏览 次
0

我在我的角度6应用程序开发中使用bootstrap 4和sass .

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

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

@import "../node_modules/bootstrap/scss/bootstrap";
angular sass bootstrap-4 angular-bootstrap

1 回答

  • 0

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

    为了使用标签的角度为活动语句进行路由 . 在项目中使用 Jquery 和 BootstrapJs （ not recommended ）或在 component.ts 中构建逻辑这里是一个如何执行此操作的示例：Routable twitter bootstrap tabs made with Angular

    回复于

相关问题