زبانه ها و آکاردئون ها توضیحات عنوان صفحه در اینجا می رود...

<ul class="nav nav-tabs">
  <li class="nav-item mr-1"><a href="#home" class="nav-link active" data-toggle="tab">Home</a></li>
  <li class="nav-item mr-1"><a href="#profile" class="nav-link" data-toggle="tab">Profile</a></li>
  <li class="nav-item mr-1 dropdown">
    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
      Dropdown
    </a>
    <div class="dropdown-menu">
      <a href="#dropdown1" class="dropdown-item" data-toggle="tab">@fat</a>
      <a href="#dropdown2" class="dropdown-item" data-toggle="tab">@mdo</a>
    </div> 
  </li>
</ul>
<div class="tab-content pt-3">
  <div class="tab-pane fade show active" id="home">...</div>
  <div class="tab-pane fade" id="profile">...</div>
  <div class="tab-pane fade" id="dropdown1">...</div>
  <div class="tab-pane fade" id="dropdown2">...</div>
</div>

<ul class="nav nav-tabs nav-tabs-v2">
  ...
</ul>

<!-- tab default with card -->
<div class="card">
  <ul class="nav nav-tabs pt-3 pl-4 pr-4">
    <li class="nav-item mr-1"><a href="#homeWithCard" class="nav-link active" data-toggle="tab">Home</a></li>
    <li class="nav-item mr-1"><a href="#profileWithCard" class="nav-link" data-toggle="tab">Profile</a></li>
  </ul>
  <div class="tab-content p-4">
    <div class="tab-pane fade show active" id="homeWithCard">...</div>
    <div class="tab-pane fade" id="profileWithCard">...</div>
  </div>
</div>

<!-- tab v2 with card -->
<div class="card">
  <ul class="nav nav-tabs nav-tabs-v2 pl-4 pr-4">
    <li class="nav-item mr-3"><a href="#homev2WithCard" class="nav-link active" data-toggle="tab">Home</a></li>
    <li class="nav-item mr-3"><a href="#profilev2WithCard" class="nav-link" data-toggle="tab">Profile</a></li>
  </ul>
  <div class="tab-content p-4">
    <div class="tab-pane fade show active" id="homev2WithCard">...</div>
    <div class="tab-pane fade" id="profilev2WithCard">...</div>
  </div>
</div>

<ul class="nav nav-pills mb-3" id="pills-tab">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">Contact</a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home">...</div>
  <div class="tab-pane fade" id="pills-profile">...</div>
  <div class="tab-pane fade" id="pills-contact">...</div>
</div>

<div class="accordion" id="accordionExample">
  <div class="card">
    <a class="card-header text-dark text-decoration-none" id="headingOne" href="#" data-toggle="collapse" data-target="#collapseOne">
      جمع کننده مورد شماره #1
    </a>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
      </div>
    </div>
  </div>
  <div class="card">
    <a class="card-header text-dark text-decoration-none collapsed" id="headingTwo" href="#" data-toggle="collapse" data-target="#collapseTwo">
      جمع کننده مورد شماره #2
    </a>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
      </div>
    </div>
  </div>
  <div class="card">
    <a class="card-header text-dark text-decoration-none collapsed" id="headingThree" href="#" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
      جمع کننده مورد شماره #3
    </a>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
      </div>
    </div>
  </div>
</div>