قالب Finder | قالب چند منظوره فایندر

پیش فرض

<!-- Nav pills -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

// Nav pills
ul(class="nav nav-pills")
  li.nav-item
    a(href="#", class="nav-link active")
      | Active
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link disabled", tabindex="-1", aria-disabled="true")
      | Disabled

Fill و justify

<!-- Nav pills: Fill -->
<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

<!-- Nav pills: Justified -->
<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

// Nav pills: Fill
ul(class="nav nav-pills nav-fill")
  li.nav-item
    a(href="#", class="nav-link active")
      | Active
  li.nav-item
    a(href="#", class="nav-link")
      | Much longer nav link
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link disabled",  tabindex="-1", aria-disabled="true")
      | Disabled

// Nav pills: Justified
ul(class="nav nav-pills nav-justified")
  li.nav-item
    a(href="#", class="nav-link active")
      | Active
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link disabled",  tabindex="-1", aria-disabled="true")
      | Disabled

پیل ها در منو های کشویی

<!-- Pills with dropdowns -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu my-1">
      <a href="#" class="dropdown-item">Action</a>
      <a href="#" class="dropdown-item">Another action</a>
      <a href="#" class="dropdown-item">Something else here</a>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

// Pills with dropdowns
ul(class="nav nav-pills")
  li.nav-item
    a(href="#", class="nav-link active")
      | Active
  li.nav-item.dropdown
    a(href="#", class="nav-link dropdown-toggle", data-bs-toggle="dropdown", role="button", aria-haspopup="true", aria-expanded="false")
      | Dropdown
    .dropdown-menu.my-1
      a(href='#').dropdown-item Action
      a(href='#').dropdown-item Another action
      a(href='#').dropdown-item Something else here
      .dropdown-divider
      a(href='#').dropdown-item Separated link
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link disabled",  tabindex="-1", aria-disabled="true")
      | Disabled

پیل های عمودی

<!-- Vertical pills -->
<ul class="nav nav-pills flex-column">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

// Vertical pills
ul(class="nav nav-pills flex-column")
  li.nav-item
    a(href="#", class="nav-link active")
      | Active
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link disabled", tabindex="-1", aria-disabled="true")
      | Disabled

نسخه روشن

<!-- Nav pills -->
<ul class="nav nav-pills nav-pills-light">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

// Nav pills
ul(class="nav nav-pills nav-pills-light")
  li.nav-item
    a(href="#", class="nav-link active")
      | Active
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link disabled", tabindex="-1", aria-disabled="true")
      | Disabled

پیل ها در تب

کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.

در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.

<!-- Nav pills -->
<ul class="nav nav-pills mb-3" role="tablist">
  <li class="nav-item">
    <a href="#" class="nav-link active" id="pills-home1" data-bs-toggle="pill" role="tab" aria-controls="home1" aria-selected="true">
      <i class="fi-home me-2"></i>
      Home
    </a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link" id="pills-profile1" data-bs-toggle="pill" role="tab" aria-controls="profile1" aria-selected="false">
      <i class="fi-user me-2"></i>
      Profile
    </a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link" id="pills-messages1" data-bs-toggle="pill" role="tab" aria-controls="messages1" aria-selected="false">
      <i class="fi-chat-left me-2"></i>
      Messages
    </a>
  </li>
</ul>

<!-- Pills content -->
<div class="tab-content">
  <div id="home1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="pills-home1">
    ...
  </div>
  <div id="profile1" class="tab-pane fade" role="tabpanel" aria-labelledby="pills-profile1">
    ...
  </div>
  <div id="messages1" class="tab-pane fade" role="tabpanel" aria-labelledby="pills-messages1">
    ...
  </div>
</div>