منو و تب

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">فعال</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">لینک 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">لینک 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">غیرفعال</a>
  </li>
</ul>

<ul class="nav nav-divider align-items-center">
  <li class="nav-item">
    <div class="nav-link">
      <div class="d-flex align-items-center position-relative">
        <div class="avatar avatar-sm">
          <img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
        </div>
        <span class="ms-3">با <a href="#" class="stretched-link text-reset btn-link">نیلوفر</a></span>
      </div>
    </div>
  </li>
  <li class="nav-item">15 بهمن، 1400</li>
  <li class="nav-item">5 دقیقه زمان مطالعه</li>
</ul>

<ul class="nav nav-tabs">
	<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-1-1"> جستجو </a> </li>
	<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-1-2"> طراحی </a> </li>
	<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-1-3"> توسعه </a> </li>
</ul>
<div class="tab-content">
	<div class="tab-pane show active" id="tab-1-1">
		لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
	</div>
	<div class="tab-pane" id="tab-1-2">
		لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
	</div>
	<div class="tab-pane" id="tab-1-3">
		لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
	</div>
</div>

<ul class="nav nav-tabs nav-justified">
	<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-2-1"> جستجو </a> </li>
	<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-2-2"> طراحی </a> </li>
	<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-2-3"> توسعه </a> </li>
</ul>
<div class="tab-content">
	<div class="tab-pane show active" id="tab-2-1">
		با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
	</div>
	<div class="tab-pane" id="tab-2-2">
		با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
	</div>
	<div class="tab-pane" id="tab-2-3">
		با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
	</div>
</div>

<ul class="nav nav-tabs nav-tabs-line">
	<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-3-1"> جستجو </a> </li>
	<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-3-2"> طراحی </a> </li>
	<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-3-3"> توسعه </a> </li>
</ul>
<div class="tab-content">
	<div class="tab-pane show active" id="tab-3-1">
		با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
	</div>
	<div class="tab-pane" id="tab-3-2">
		با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
	</div>
	<div class="tab-pane" id="tab-3-3">
		با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
	</div>
</div>

<ul class="nav nav-tabs nav-tabs-dark">
	<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-6-1"> جستجو </a> </li>
	<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-6-2"> طراحی </a> </li>
	<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-6-3"> توسعه </a> </li>
</ul>
<div class="tab-content">
	<div class="tab-pane show active" id="tab-6-1">
		با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
	</div>
	<div class="tab-pane" id="tab-6-2">
		با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
	</div>
	<div class="tab-pane" id="tab-6-3">
		با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
	</div>
</div>

<div class="row">
  <div class="col-4 col-sm-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">خانه</a>
      <a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">پروفایل</a>
      <a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">پیام ها</a>
      <a class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">تنظیمات</a>
    </div>
  </div>
  <div class="col-8 col-sm-9">
    <div class="tab-content pt-0" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
      	با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
    	</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
      	با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
    	</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
      	با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
    	</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
      	با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
    	</div>
    </div>
  </div>
</div>