32 #navtabs Bootstrap: Nav tabs

Implementation of bootstrap nav tabs.

Example

Content of Actions tab

Content of Latest tab

Content of Details tab

<script src="public/js/libraries/jquery-accessible-tabs.js"></script>
<div class="js-tabs bootstrap-nav-wrapper">
  <ul class="js-tablist nav nav-tabs nav-tabs--with-content nav-tabs-processed">
    <li class="js-tablist__item active">
      <a href="#bootstrap-fieldgroup-nav-item--actions" class="js-tablist__link" data-toggle="tab">Actions</a>
    </li>
    <li class="js-tablist__item">
      <a href="#bootstrap-fieldgroup-nav-item--latest" class="js-tablist__link" data-toggle="tab">Latest</a>
    </li>
    <li class="js-tablist__item">
      <a href="#bootstrap-fieldgroup-nav-item--details" class="js-tablist__link" data-toggle="tab">Details</a>
    </li>
  </ul>

  <div class="tab-content">
    <div id="bootstrap-fieldgroup-nav-item--actions" class="js-tabcontent">
      Content of Actions tab
    </div>
    <div id="bootstrap-fieldgroup-nav-item--latest" class="js-tabcontent">
      Content of Latest tab
    </div>
    <div id="bootstrap-fieldgroup-nav-item--details" class="js-tabcontent">
      Content of Details tab
    </div>
  </div>
</div>

32.1 #navtabs.nav-tabs-right Bootstrap: Nav tabs right.

Implementation of bootstrap nav tabs for the CWS.

Example

Navigation tabs title

Content of Actions tab

Content of Latest tab

Content of Details tab

<div class="js-tabs bootstrap-nav-wrapper">
  <h3>Navigation tabs title</h3>
  <ul class="js-tablist nav nav-tabs nav-tabs--with-content nav-tabs-right">
    <li class="js-tablist__item active">
      <a href="#bootstrap-fieldgroup-nav-item--actions2" class="js-tablist__link" data-toggle="tab">Actions</a>
    </li>
    <li class="js-tablist__item">
      <a href="#bootstrap-fieldgroup-nav-item--latest2" class="js-tablist__link" data-toggle="tab">Latest</a>
    </li>
    <li class="js-tablist__item">
      <a href="#bootstrap-fieldgroup-nav-item--details2" class="js-tablist__link" data-toggle="tab">Details</a>
    </li>
  </ul>

  <div class="tab-content">
    <div id="bootstrap-fieldgroup-nav-item--actions2" class="js-tabcontent">
      Content of Actions tab
    </div>
    <div id="bootstrap-fieldgroup-nav-item--latest2" class="js-tabcontent">
      Content of Latest tab
    </div>
    <div id="bootstrap-fieldgroup-nav-item--details2" class="js-tabcontent">
      Content of Details tab
    </div>
  </div>
</div>