بوت اسپرینگ 5 ناویگیشن

منوی ناوبری

اگر می‌خواهید یک منوی افقی ساده ایجاد کنید، .nav کلاس اضافه کنید به <ul> عنصر، سپس برای هر یک از <li> عنصر اضافه کنید .nav-item و .nav-link کلاس به لینک‌های آن‌ها اضافه کنید:

实例

<ul class="nav">
  
  • 
    <a class="nav-link" href="#">لینک</a>
  
    • 
  
  • 
    <a class="nav-link" href="#">لینک</a>
  
    • 
  
  • 
    <a class="nav-link" href="#">لینک</a>
  
    • 
  
  • 
    <a class="nav-link disabled" href="#">غیرفعال</a>
  
    •

    亲自试一试

    ناوبری را راست چین می‌کند

    افزودن .justify-content-center کلاس ناوبری را وسط قرار می‌دهد، سپس .justify-content-end کلاس ناوبری را سمت راست قرار می‌دهد.

    实例

    <!-- ناوبری وسط -->
<ul class="nav justify-content-center">
<!-- ناوبری سمت راست -->
<ul class="nav justify-content-end">

    亲自试一试

    نواری عمودی

    افزودن .flex-column کلاس می‌تواند هدایت‌کننده‌های عمودی ایجاد کند:

    实例

    <ul class="nav flex-column">

    亲自试一试

    کارت‌های انتخابی

    لطفاً از .nav-tabs کلاس منوهای هدایت‌کننده را به کارت‌های انتخابی هدایت‌کننده تبدیل می‌کند. و .active کلاس به لینک فعلی/لینک فعلی اضافه کنید. اگر می‌خواهید کارت‌های انتخابی قابل تغییر باشند، لطفاً به آخرین مثال این صفحه مراجعه کنید.

    实例

    <ul class="nav nav-tabs">
  
  • 
    <a class="nav-link active" href="#">فعال</a>
  
    • 
  
  • 
    <a class="nav-link" href="#">لینک</a>
  
    • 
  
  • 
    <a class="nav-link" href="#">لینک</a>
  
    • 
  
  • 
    <a class="nav-link disabled" href="#">غیرفعال</a>
  
    •

    亲自试一试

    کپسول

    از .nav-pills کلاس‌ها می‌توانند منوهای هدایت‌کننده را به کپسول‌های هدایت‌کننده تبدیل کنند. اگر می‌خواهید کپسول‌ها قابل تغییر باشند، لطفاً به آخرین مثال این صفحه مراجعه کنید.

    实例

      
  
    • 
    <a class="nav-link active" href="#">فعال</a>
  
      • 
  
    • 
    <a class="nav-link" href="#">لینک</a>
  
      • 
  
    • 
    <a class="nav-link" href="#">لینک</a>
  
      • 
  
    • 
    <a class="nav-link disabled" href="#">غیرفعال</a>
  
      •

    亲自试一试

    برچسب‌های انتخابی همسان‌سازی شده/کپسول‌های انتخابی همسان‌سازی شده استفاده کنید.

    لطفاً از .nav-justified کلاس (همسان‌سازی) برای مرتب‌سازی برچسب‌ها/کپسول‌ها:

    实例

    <ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>

    亲自试一试

    منوی کپسول

    实例

      
  
    • 
    <a class="nav-link active" href="#">فعال</a>
  
      • 
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">لینک 1</a></li>
      <li><a class="dropdown-item" href="#">لینک 2</a></li>
      <li><a class="dropdown-item" href="#">لینک 3</a></li>
    
    
  
  
  • 
    <a class="nav-link" href="#">لینک</a>
  
    • 
  
  • 
    <a class="nav-link disabled" href="#">غیرفعال</a>
  
    •

    亲自试一试

    منوی کارت‌های انتخابی

    实例

    <ul class="nav nav-tabs">
  
  • 
    <a class="nav-link active" href="#">فعال</a>
  
    • 
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">لینک 1</a></li>
      <li><a class="dropdown-item" href="#">لینک 2</a></li>
      <li><a class="dropdown-item" href="#">لینک 3</a></li>
    
  
  
  • 
    <a class="nav-link" href="#">لینک</a>
  
    • 
  
  • 
    <a class="nav-link disabled" href="#">غیرفعال</a>
  
    •

    亲自试一试

    کارت‌های انتخابی قابل تغییر / کارت‌های انتخابی پویا

    برای اینکه کارت‌های انتخابی قابل تغییر باشند، لطفاً data-toggle="tab" ویژگی به هر لینک اضافه کنید. سپس برای هر کارت انتخابی لینکی با شناسه منحصر به فرد اضافه کنید. .tab-pane کلاس‌ها را درون بسته‌ای با .tab-content کلاس <div> عنصر اضافه کنید.

    اگر می‌خواهید کارت‌های انتخابی در کلیک کردن بتوانند کم‌رنگ و پررنگ شوند، لطفاً .fade کلاس اضافه کنید به .tab-pane:

    实例

    <!-- Nav tabs -->
<ul class="nav nav-tabs">
  
  • 
    Home
  
    • 
  
  • 
    Menu 1
  
    • 
  
  • 
    Menu 2
  
    • 



    
  
    ...

    亲自试一试

    可切换的 / 动态胶囊导航

    相同的代码适用于导航；仅将 data-toggle 属性更改为 data-toggle="pill" 即可：

    实例

    



    
  
    ...

    亲自试一试