html - 是否可以向 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>