تب های خطی
نمونه پایه
از کلاس .nav و .nav-tab با کلاس nav-tabs-line استفاده کنید تا یک جزء تب خط سفارشی داشته باشید.
متن ساختگی لورم ایپسوم صنعت چاپ و تحریر. لورم ایپسوم از 1500 تا به امروز متن استاندارد ساختگی این صنعت است.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
Lorem Ipsum has been the industry's standard. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
<ul class="nav nav-tabs nav-tabs-line">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1">فعال</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2">لینک</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
دراپ دان
</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3">اکشن</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3">اکشن دیگر</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3">اکشن سوم</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3">جداکننده</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#kt_tab_pane_4" tabindex="-1" aria-disabled="true">غیرفعال</a>
</li>
</ul>
<div class="tab-content mt-5" id="myTabContent">
<div class="tab-pane fade show active" id="kt_tab_pane_1" role="tabpanel" aria-labelledby="kt_tab_pane_2">Tab content 1</div>
<div class="tab-pane fade" id="kt_tab_pane_2" role="tabpanel" aria-labelledby="kt_tab_pane_2">Tab content 2</div>
<div class="tab-pane fade" id="kt_tab_pane_3" role="tabpanel" aria-labelledby="kt_tab_pane_3">Tab content 4</div>
<div class="tab-pane fade" id="kt_tab_pane_4" role="tabpanel" aria-labelledby="kt_tab_pane_4">Tab content 5</div>
</div>گزینه های فونت
استفاده .nav-semi-bold, .nav-bold, .nav-bolder و .nav-boldest
<ul class="nav nav-tabs nav-tabs-line nav-semi-bold">
...
</ul>
<ul class="nav nav-tabs nav-tabs-line nav-bold">
...
</ul>
<ul class="nav nav-tabs nav-tabs-line nav-bolder">
...
</ul>
<ul class="nav nav-tabs nav-tabs-line nav-boldest">
...
</ul>
ترازبندی
تراز افقی خود را با آن تغییر دهید
flexbox utilities.
.
.justify-content-center.
<ul class="nav nav-tabs nav-tabs-line justify-content-center">
...
</ul>
چپ-aligned with .justify-content-end.
<ul class="nav nav-tabs nav-tabs-line justify-content-end">
...
</ul>
Card تب های خطی
استفاده .card-header با .card-header-tabs-line
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
Aldus PageMaker including versions lorem Ipsum has been the industry's standard. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
<div class="card card-custom gutter-b">
<div class="card-header card-header-tabs-line">
<div class="card-title">
<h3 class="card-label">Card تب های خطی</h3>
</div>
<div class="card-toolbar">
<ul class="nav nav-tabs nav-bold nav-tabs-line">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1_2">هفته</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2_2">ماه</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
سال
</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_2">اکشن</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_2">اکشن دیگر</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_2">اکشن سوم</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_2">جداکننده</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_1_2" role="tabpanel" aria-labelledby="kt_tab_pane_2">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_2_2" role="tabpanel" aria-labelledby="kt_tab_pane_2">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_3_2" role="tabpanel" aria-labelledby="kt_tab_pane_3">
...
</div>
</div>
</div>
</div>
تب های خطی همراه با آیکون
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
Aldus PageMaker including versions lorem Ipsum has been the industry's standard. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
<div class="card card-custom gutter-b">
<div class="card-header card-header-tabs-line">
<div class="card-title">
<h3 class="card-label"> تب های خطی همراه با آیکون</h3>
</div>
<div class="card-toolbar">
<ul class="nav nav-tabs nav-bold nav-tabs-line">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1_3">
<span class="nav-icon"><i class="flaticon2-chat-1"></i></span>
<span class="nav-text">هفته</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2_3">
<span class="nav-icon"><i class="flaticon2-drop"></i></span>
<span class="nav-text">ماه</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon"><i class="flaticon2-gear"></i></span>
<span class="nav-text">سال</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_3">اکشن</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_3">اکشن دیگر</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_3">اکشن سوم</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_3">جداکننده</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_1_3" role="tabpanel" aria-labelledby="kt_tab_pane_1_3">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_2_3" role="tabpanel" aria-labelledby="kt_tab_pane_2_3">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_3_3" role="tabpanel" aria-labelledby="kt_tab_pane_3_3">
...
</div>
</div>
</div>
</div>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
Aldus PageMaker including versions lorem Ipsum has been the industry's standard. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
<div class="card card-custom gutter-b">
<div class="card-header card-header-tabs-line">
<div class="card-toolbar">
<ul class="nav nav-tabs nav-bold nav-tabs-line">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1_4">
<span class="nav-icon"><i class="flaticon2-chat-1"></i></span>
<span class="nav-text">هفته</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2_4">
<span class="nav-icon"><i class="flaticon2-drop"></i></span>
<span class="nav-text">ماه</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon"><i class="flaticon2-gear"></i></span>
<span class="nav-text">سال</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_4">اکشن</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_4">اکشن دیگر</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_4">اکشن سوم</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_4">جداکننده</a>
</div>
</li>
</ul>
</div>
<div class="card-toolbar">
<div class="dropdown dropdown-inline">
<button type="button" class="btn btn-hover-light-primary btn-icon btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ki ki-more-hor"></i>
</button>
<div class="dropdown-menu dropdown-menu-sm">
<a class="dropdown-item" href="#">اکشن</a>
<a class="dropdown-item" href="#">اکشن دیگر</a>
<a class="dropdown-item" href="#">اکشن سوم</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">جداکننده</a>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_1_4" role="tabpanel" aria-labelledby="kt_tab_pane_1_4">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_2_4" role="tabpanel" aria-labelledby="kt_tab_pane_2_4">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_3_4" role="tabpanel" aria-labelledby="kt_tab_pane_3_4">
...
</div>
</div>
</div>
</div>
آیکون
تب ها با آیکون.
<ul class="nav nav-tabs nav-tabs-line mb-5">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1">
<span class="nav-icon"><i class="flaticon2-chat-1"></i></span>
<span class="nav-text">فعال</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2">
<span class="nav-icon"><i class="flaticon2-pie-chart-4"></i></span>
<span class="nav-text">لینک</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon"><i class="flaticon2-drop"></i></span>
<span class="nav-text">دراپ دان</span>
</a>
<div class="dropdown-menu">
...
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#kt_tab_pane_4" tabindex="-1" aria-disabled="true">
<span class="nav-icon"><i class="flaticon2-protected"></i></span>
<span class="nav-text">غیرفعال</span>
</a>
</li>
</ul>
تب با آیکون اس وی جی.
<ul class="nav nav-tabs nav-tabs-line justify-content-center">
...
</ul>
خط گزینه ها
استفاده .nav-tabs-line-2x و.nav-tabs-line-3x
<ul class="nav nav-tabs nav-tabs-line nav-tabs-line-2x">
...
</ul>
<ul class="nav nav-tabs nav-tabs-line nav-tabs-line-3x">
...
</ul>
رنگی
استفاده از کلاس .nav-{color}
<ul class="nav nav-tabs nav-tabs-line nav-tabs-primary">
...
</ul>
<ul class="nav nav-tabs nav-tabs-line nav-tabs-success">
...
</ul>
<ul class="nav nav-tabs nav-tabs-line nav-tabs-danger">
...
</ul>
<ul class="nav nav-tabs nav-tabs-line nav-tabs-warning">
...
</ul>
<ul class="nav nav-tabs nav-tabs-line nav-tabs-dark">
...
</ul>
<ul class="nav nav-tabs nav-tabs-line nav-tabs-info">
...
</ul>
معکوس
از گزینه .nav-tabs-inverse برای گزینه برگه خط معکوس استفاده کنید.
<ul class="nav nav-tabs nav-tabs-line nav-tabs-inverse">
...
</ul>
