1. صفحه اصلی
  2. مقالات
  3. منوهای Nav در بوت استرپ

منوهای Nav در بوت استرپ

امیر زوارمی امیر زوارمی
29 خرداد 1398
درسنامه درس 14 از سری آموزش Bootstrap

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

منوهای Nav (مخفف Navigation) در فارسی اسم خاصی ندارند و معمولا با نام های منوهای جهت یابی یا نوار مسیریابی و... شناخته می شوند؛ این منوها استفاده های خاصی دارند که رایج ترین آن ها نوار موقعیت سایت و منوهای سربرگی هستند.

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Nav</h2>
  <p>Basic horizontal menu:</p>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

زمانی که منوی مورد نظر خود را ایجاد کردید می توانید آن را ترازبندی کرده و در قسمت خاصی از صفحه قرار دهید. به طور مثال کلاس justify-content-center. برای وسط قرار دادن منو و کلاس justify-content-end. برای سمت راست قرار دادن منو است. در مثال زیر چند حالت مختلف را برایتان آورده ایم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Nav</h2>
  <p>Left-aligned nav (default):</p>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
  
  <p class="text-center">Centered nav:</p>
  <ul class="nav justify-content-center">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
    
  <p class="text-right">Right-aligned nav:</p>
  <ul class="nav justify-content-end">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

Nav های عمودی

اگر بخواهید منوی شما به صورت عمودی نمایش داده شود می توانید از کلاس flex-column. استفاده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Vertical Nav</h2>
  <p>Use the .flex-column class to create a vertical nav:</p>
  <ul class="nav flex-column">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

منوهای سربرگ دار (Tab)

منوهای سربرگ دار منوهایی هستند که چندین صفحه ی مختلف را در خود جا داده اند و با کلیک روی هر سربرگ، محتویات مخصوص آن نمایش داده می شود. ما برای تبدیل منوهای Nav ساده به منوهای Tab (سربرگ دار) از کلاس nav-tabs. استفاده می کنیم. سپس با استفاده از کلاس active. سربرگی که در حال حاضر روی آن هستیم (سربرگ فعال) را مشخص می کنیم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Navigation Tabs</h2>
  <p>Turn the nav menu into navigation tabs with the .nav nav-tabs class. Add the active class to the active/current link. If you want the tabs to be togglable, see the last example on the tutorial page.</p>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

نوع دیگری از این منوها به منوهای pill (به معنی قرص) مشهور هستند. این نوع منو در بوت استرپ به جای داشتن سربرگ، دکمه هایی دارد که کمی شبیه به قرص است. برای ساخت این منوها باید از کلاس nav-pills. استفاده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Navigation Pills</h2>
  <p>Turn the nav menu into navigation pills with the .nav nav-pills class:</p>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

از هر کدام از این منوها که استفاده کرده باشید برای ترازبندی و مرتب کردن محتوایشان باید از کلاس nav-justified. استفاده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Justified Tabs/Pills</h2>
  <p>To justify tabs/pills (equal width), use the .nav-justified class:</p>
  <ul class="nav nav-pills nav-justified">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul><br>

  <p>Justified tabs:</p>
  <ul class="nav nav-tabs nav-justified">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

ترکیب Tab ها و Pill ها با منوهای آبشاری

برای ترکیب Pill ها و یا Tab ها با منوهای آبشاری نیاز به انجام کار خاصی نیست بلکه باید از همان کلاس های جلسات قبل (یعنی nav-item  و dropdown و...) استفاده کنید.

ترکیب با Pill ها:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Pills with Dropdown</h2>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a></div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

ترکیب با Tab ها:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Tabs with Dropdown</h2>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a></div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

سربرگ های پویا (Toggleable)

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

برای ایجاد این سربرگ های پویا به attribute خاصی به نام "data-toggle="tab نیاز داریم و باید آن را به تک تک لینک های سربرگی منو بدهیم. سپس کلاس tab-pane. را با یک id یکتا به هر سربرگ اضافه کنید و آن را در یک تگ <div> با کلاس tab-content. قرار دهید. در ضمن اگر می خواهید محتویات با حالت نرمی محو شوند، کلاس fade. را به tab-pane. اضافه کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<br>

<div class="container">
  <h2>Toggleable Tabs</h2>
  <br>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

اگر بخواهید همین کار را برای Pill ها انجام دهید می توانید از "data-toggle="pill استفاده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<br>

<div class="container">
  <h2>Toggleable Pills</h2>
  <br>
  <!-- Nav pills -->
  <ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

برچسب‌ها: بوت استرپ bootstrap
تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش Bootstrap توصیه می‌کند:

آشنایی با Bootstrap 4

1

سیستم Grid در بوت استرپ 4

2

متون و تایپوگرافی در بوت استرپ 4

3

طراحی جدول ها در بوت استرپ

4

کار با تصاویر و رنگ ها در Bootstrap 4

5

Jumbotron، دکمه ها و هشدارها در بوت استرپ

6

مجموعه دکمه ها و نشان ها (badge) در بوت استرپ

7

نوار پیشرفت (Progress Bar) در بوت استرپ

8

spinner ها و صفحه بندی (Pagination) در بوت استرپ

9

آشنایی با List Group در بوت استرپ

10

Card ها در بوت استرپ 4

11

منوهای آبشاری (dropdown) در بوت استرپ

12

منوهای مخفی شونده و آکاردئونی در بوت استرپ

13

منوهای Nav در بوت استرپ

14

فرم ها در بوت استرپ 4

15

Input Group ها در بوت استرپ 4

16

فرم های سفارشی در بوت استرپ 4

17

ساخت اسلایدر تصاویر و پنجره های modal در بوت استرپ

18

کار با Tooltip و Popover در بوت استرپ

19

Toast ها و Scrollspy در بوت استرپ

20

utility (کلاس های کمکی) در بوت استرپ - قسمت اول

21

utility (کلاس های کمکی) در بوت استرپ - قسمت دوم

22

مدل Flex در بوت استرپ 4

23

Media Object و فیلترها در بوت استرپ 4

24

سیستم Grid در بوت استرپ 4

25

Gridهای بسیار کوچک در بوت استرپ 4

26

نکات تکمیلی سایزها در Grid

27
نویسنده شوید
دیدگاه‌های شما (1 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

علی
11 بهمن 1398
با سلام در بعضی از فیلم های اموزشی در بخش منو یک سری کلاس ها تحت عنوان navbar navbar-defualt navbar-header مورد استفاده قرار میگیرد آیا این کلاس ها در ورژن 4 حذف شده است ؟

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیر زوارمی
13 بهمن 1398
سلام دوست عزیز، navbar-header و navbar-defualt از بوت استرپ 4 حذف شدن اما خود کلاس navbar هنوز هست. اطلاعات بیشتر: https://getbootstrap.com/docs/4.0/components/navbar/

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

دوره‌های آموزشی مرتبط
VIP
آموزش HTML و CSS از صفر تا صد + پروژه محور
آموزش HTML و CSS از صفر تا صد + پروژه محور
265000 تومان
مقالات مرتبط
ویژگی z-index چیست و چگونه کار می کند؟
ساخت لودینگ فقط با CSS
ساخت لودینگ فقط با CSS
15 اردیبهشت 1401
طراحی ریسپانسیو با CSS
آموزش جامع و کامل کار با CSS Grid
CSS با طعم تاکو؛ آموزش ساخت ساندویچ تاکو با HTML و CSS
آخرین سوالات کاربران
alidniry در 8 ماه قبل پرسیده:
خطای مسیردهی در HTML و css
ما را دنبال کنید
اینستاگرام روکسو تلگرام روکسو ایمیل و خبرنامه روکسو