是否可以在Bootstrap的活动选项卡中添加箭头？

Question

在Photoshop中查看此图片：

上面是在Bootstrap中完成的导航栏，但我添加了指针以用于说明目的。

是否可以在Bootstrap中执行此操作？如果它太具有挑战性，是否有任何导航栏插件来完成这项工作？

其次，当我将鼠标悬停在导航链接上时，如何使悬停动画流畅地“滑动”而不是突然弹出到悬停的链接？

韩国社交协会！我也对任何插件等开放。

Answer 1

是的，您可以在Bootstrap的活动标签中添加一个箭头，这是一个示例代码，它可以帮助您。

.navbar-default .navbar-nav {
  margin-top:40px /*---*/
}
  
.navbar-default .navbar-nav > li.active{
    position: relative;
  }
  .navbar-default .navbar-nav > li.active:after{
    border-bottom: 10px solid #e7e7e7;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    content: "";
    height: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: -10px;
    width: 0;

  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div id="bs-example-navbar-collapse-6" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li class="active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div>
    </nav>