منو و تب

<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-tabs mb-3">
	<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 mb-3">
	<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 mb-3">
	<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>

<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>

<!-- Tabs START -->
<ul class="nav nav-pills nav-pill-soft mb-3" id="pills-tab" role="tablist">
	<li class="nav-item ms-2 ms-sm-5" role="presentation">
		<button class="nav-link active" id="pills-tab-1" data-bs-toggle="pill" data-bs-target="#pills-tab1" type="button" role="tab" aria-controls="pills-tab1" aria-selected="true">خانه</button>
	</li>
	<!-- Tab item -->
	<li class="nav-item ms-2 ms-sm-5" role="presentation">
		<button class="nav-link" id="pills-tab-2" data-bs-toggle="pill" data-bs-target="#pills-tab2" type="button" role="tab" aria-controls="pills-tab2" aria-selected="false">پروفایل</button>
	</li>
	<!-- Tab item -->
	<li class="nav-item ms-2 ms-sm-5" role="presentation">
		<button class="nav-link" id="pills-tab-3" data-bs-toggle="pill" data-bs-target="#pills-tab3" type="button" role="tab" aria-controls="pills-tab3" aria-selected="false">پیام ها</button>
	</li>
</ul> 
<!-- Tabs contents -->
<div class="tab-content" id="pills-tabContent">
	<!-- Content -->
	<div class="tab-pane fade show active" id="pills-tab1" role="tabpanel" aria-labelledby="pills-tab-1">
		با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
	</div>
	<!-- Content -->
	<div class="tab-pane fade" id="pills-tab2" role="tabpanel" aria-labelledby="pills-tab-2">
		با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
	</div>
	<!-- Content -->
	<div class="tab-pane fade" id="pills-tab3" role="tabpanel" aria-labelledby="pills-tab-3">
		با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
	</div>
</div>
<!-- Tabs END -->

<!-- Tabs START -->
<ul class="nav nav-pills nav-pill-dark-soft mb-3" id="pills-tab" role="tablist">
	<li class="nav-item ms-2 ms-sm-5" role="presentation">
		<button class="nav-link active" id="pills-tab-5" data-bs-toggle="pill" data-bs-target="#pills-tab5" type="button" role="tab" aria-controls="pills-tab5" aria-selected="true">Home</button>
	</li>
	<!-- Tab item -->
	<li class="nav-item ms-2 ms-sm-5" role="presentation">
		<button class="nav-link" id="pills-tab-6" data-bs-toggle="pill" data-bs-target="#pills-tab6" type="button" role="tab" aria-controls="pills-tab6" aria-selected="false">Profile</button>
	</li>
	<!-- Tab item -->
	<li class="nav-item ms-2 ms-sm-5" role="presentation">
		<button class="nav-link" id="pills-tab-7" data-bs-toggle="pill" data-bs-target="#pills-tab7" type="button" role="tab" aria-controls="pills-tab7" aria-selected="false">Message</button>
	</li>
</ul> 
<!-- Tabs contents -->
<div class="tab-content" id="pills-tabContent">
	<!-- Content -->
	<div class="tab-pane fade show active" id="pills-tab5" role="tabpanel" aria-labelledby="pills-tab-5">
		با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
	</div>
	<!-- Content -->
	<div class="tab-pane fade" id="pills-tab6" role="tabpanel" aria-labelledby="pills-tab-6">
		با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
	</div>
	<!-- Content -->
	<div class="tab-pane fade" id="pills-tab7" role="tabpanel" aria-labelledby="pills-tab-7">
		با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
	</div>
</div>
<!-- Tabs END -->

<!-- Tabs START -->
<ul class="nav nav-pills  nav-pills-bg-soft mb-3 px-3" id="pills-tab" role="tablist">
	<li class="nav-item ms-2 ms-sm-5" role="presentation">
		<button class="nav-link mb-0 active" id="pills-tab-8" data-bs-toggle="pill" data-bs-target="#pills-tab8" type="button" role="tab" aria-controls="pills-tab8" aria-selected="true">خانه</button>
	</li>
	<!-- Tab item -->
	<li class="nav-item ms-2 ms-sm-5" role="presentation">
		<button class="nav-link mb-0" id="pills-tab-9" data-bs-toggle="pill" data-bs-target="#pills-tab9" type="button" role="tab" aria-controls="pills-tab9" aria-selected="false">پروفایل</button>
	</li>
	<!-- Tab item -->
	<li class="nav-item ms-2 ms-sm-5" role="presentation">
		<button class="nav-link mb-0" id="pills-tab-10" data-bs-toggle="pill" data-bs-target="#pills-tab10" type="button" role="tab" aria-controls="pills-tab10" aria-selected="false">پیام ها</button>
	</li>
</ul> 
<!-- Tabs contents -->
<div class="tab-content" id="pills-tabContent">
	<!-- Content -->
	<div class="tab-pane fade show active" id="pills-tab8" role="tabpanel" aria-labelledby="pills-tab-8">
		با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
	</div>
	<!-- Content -->
	<div class="tab-pane fade" id="pills-tab9" role="tabpanel" aria-labelledby="pills-tab-9">
		با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
	</div>
	<!-- Content -->
	<div class="tab-pane fade" id="pills-tab10" role="tabpanel" aria-labelledby="pills-tab-10">
		با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
	</div>
</div>
<!-- Tabs END -->