Question

如何创建类似Gmail标签导航栏的导航栏，其中包含主要，社交，促销，更新。我必须使用bootstrap而不使用angular js.这可能只通过bootstrap吗？

<!-- tabs -->
          <div class="container">
        <div class="tabbable">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#one" data-toggle="tab">One</a></li>
            <li><a href="#two" data-toggle="tab">Two</a></li>
            <li><a href="#twee" data-toggle="tab">Twee</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="one">Content for Tab 1.Content for Tab 1.Content for Tab 1.</div>
            <div class="tab-pane" id="two">Content for Tab 2.Content for Tab 2.Content for Tab 2.</div>
            <div class="tab-pane" id="twee">Content for Tab 3.Content for Tab 3.Content for Tab 3.</div>
           </div>
        </div>
              </div>
                <div class="container">
        <!-- /tabs -->

我需要为每个标签应用自定义背景，当标签处于活动状态时，标签顶部会有一条直线，就像gmail一样。我如何实现这一目标？

Answer 1

您可以使用标准的Bootstrap css / js / jquery和Font Awesome（或任何字体库）执行此操作。

它只是来自Bootstrap和一些CSS的标准导航丸，以实现GMailish外观并使其响应移动设备。

＆＃13;

body {
  padding: 20px;
}
#gmailTab .tab-content {
  color: #1c1c1c;
  background-color: #ccc;
  padding: 5px 15px;
}
#gmailTab .nav-pills > li > a {
  border-radius: 0;
  background-color: #eee;
  background-color: #ccc;
}
#gmailTab .nav-pills > li.active > a,
#gmailTab .nav-pills > li.active > a:focus,
#gmailTab .nav-pills > li.active > a:hover {
  border-top: 3px solid #f00;
}
@media (max-width: 767px) {
  .nav-pills > li {
    float: none;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <h1>GMail Menu  </h1>

</div>
<div id="gmailTab" class="container-fluid">
  <ul class="nav nav-pills">
    <li class="active"> <a href="#1" data-toggle="tab"><i class="fa fa-inbox"></i> Primary</a>

    </li>
    <li><a href="#2" data-toggle="tab"><i class="fa fa-users"></i> Social</a>

    </li>
    <li><a href="#3" data-toggle="tab"><i class="fa fa-tag"></i> Promotions</a>

    </li>
    <li><a href="#4" data-toggle="tab"><i class="fa fa-info-circle"></i> Updates</a>

    </li>
    <li><a href="#5" data-toggle="tab"><i class="fa fa-weixin"></i> Forums</a>

    </li>
  </ul>
  <div class="tab-content clearfix">
    <div class="tab-pane active" id="1">
      <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</h3>

    </div>
    <div class="tab-pane" id="2">
      <h3>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years.</h3>

    </div>
    <div class="tab-pane" id="3">
      <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</h3>

    </div>
    <div class="tab-pane" id="4">
      <h3>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years.</h3>

    </div>
    <div class="tab-pane" id="5">
      <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</h3>

    </div>
  </div>
</div>

＆＃13;

如何使用bootstrap创建像gmail标签导航栏一样的导航栏

1 个答案: