到官方網站複製a連結版本的範例

列表群組 (List group)

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>

放入已準備好的3欄空間之內，9欄是之前預先寫好的產品列表

<div class="container">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
    </div>
</div>

調整位置，使之滑動到頂時固定

<div class="list-group sticky-top">

在大區塊放入所需的tab標籤，並移動右側列表排版row以下的內容到tab-pane內

<div class="col-md-9">
        <div class="tab-content">
            <div class="tab-pane"></div>
            <div class="tab-pane"></div>
        </div>

移動後會發現原本內容消失，需要加上active才會出現，此處可以放在任一想當成第一頁的tab-pane上

<div class="tab-pane active">

補上 id ，可以自訂

<div class="tab-pane active" id="page-01">

把對應的控制項放入左側選單的選項內

<a data-toggle="list" href="#page-02" class="list-group-item list-group-item-action">
      選項B
</a>

加上預設的JQ即完成

$(function () {
    $('#myList a:last-child').tab('show')
  })

連結