این فصل به بررسی ناوبری ها (navs) و تب ها (tabs) در بوت استرپ می پردازد. برای ساخت منوی ناوبری از کلاس .nav و برای ساخت منوی تب از کلاس .tab استفاده می شود.
ناوبری در بوت استرپ
تمام انواع اجزای ناوبری در بوت استرپ بر پایه کلاس .nav ساخته می شوند. این اجزا با استفاده از فلکس باکس (flexbox) طراحی شده اند. شما می توانید از این اجزا برای افزودن فهرستی از لینک ها استفاده کنید تا کاربران بتوانند به صفحات مختلف وب سایت هدایت شوند.
- برای افزودن آیتم ها در منوی ناوبری، باید از کلاس
.nav-itemاستفاده کنید. - برای قرار دادن لینک ها داخل هر آیتم نیز باید از کلاس
.nav-linkاستفاده کنید.
در اجزای .nav هیچ حالت فعال (.active) به صورت پیش فرض وجود ندارد. در مثال های بعدی این کلاس را به کار می بریم تا نشان دهیم که بوت استرپ برای آن استایل ویژه ای تعریف نکرده است.
برای اینکه لینک های فعال به فناوری های کمکی مانند صفحه خوان ها (screen readers) به درستی منتقل شوند، باید از ویژگی aria-current استفاده کنید. مقدار این ویژگی برای صفحه جاری، page است و در صورتی که آیتم فعال باشد، مقدار آن true قرار می گیرد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="nav bg-warning mt-2"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">sourcebaran</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link disabled">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About us</a> </li> </ul> </body> </html> |
در صورتی که ترتیب آیتم ها اهمیت دارد، از تگ <ul> یا <ol> استفاده کنید، یا می توانید ساختار دلخواه خود را با تگ <nav> ایجاد کنید. لینک های ناوبری (nav links) عملکردی مشابه آیتم های ناوبری (nav items) دارند، زیرا کلاس .nav از نمایش فلکس (display: flex) استفاده می کند و به کد اضافه نیازی ندارد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="nav bg-light mt-2"> <a class="nav-link active" aria-current="page" href="#">Sourcebaran</a> <a class="nav-link" href="#">Home</a> <a class="nav-link disabled">Services</a> <a class="nav-link" href="#">About us</a> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
استایل های موجود
برای تغییر ظاهر کامپوننت .navs می توانید از کلاس های کمکی (modifiers) و ابزارهای کاربردی (utilities) استفاده کنید. در بخش های بعدی، این موارد را مشاهده خواهید کرد.
چینش افقی منو ناوبری در بوت استرپ
برای تغییر نحوه چینش افقی منوی ناوبری، از ابزارهای فلکس باکس (flexbox utilities) استفاده کنید. به صورت پیش فرض، ناوبری ها در سمت چپ چینش می شوند. با این حال، می توانید آن ها را به راحتی در وسط یا سمت راست صفحه قرار دهید.
برای چینش وسط، از کلاس CSS به نام .justify-content-center استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="nav justify-content-center bg-warning mt-2"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Sourcebaran</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link disabled">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About us</a> </li> </ul> </body> </html> |
برای قرار دادن منوی ناوبری در سمت راست، از کلاس CSS به نام .justify-content-end استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="nav justify-content-end bg-light mt-2"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Sourcebaran</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link disabled">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About us</a> </li> </ul> </body> </html> |
چینش عمودی منو ناوبری در بوت استرپ
برای چیدن آیتم های ناوبری به صورت عمودی، از کلاس کمکی .flex-column استفاده کنید. این کلاس جهت آیتم های فلکس را تغییر می دهد و باعث می شود آیتم های ناوبری به صورت ستونی در کنار هم قرار بگیرند. همچنین می توانید از نسخه های واکنش گرا (responsive) این کلاس استفاده کنید تا در اندازه های مختلف صفحه، منو به صورت عمودی نمایش داده شود. به عنوان مثال، کلاس .flex-sm-column برای این منظور کاربرد دارد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="nav flex-column bg-light mt-2"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Sourcebaran</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link disabled">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About us</a> </li> </ul> </body> </html> |
حتی بدون استفاده از تگ <ul> نیز می توانید منوی ناوبری را به صورت عمودی ایجاد کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="nav flex-column bg-light mt-2"> <a class="nav-link active" aria-current="page" href="#">Sourcebaran</a> <a class="nav-link" href="#">Home</a> <a class="nav-link disabled">Services</a> <a class="nav-link" href="#">About us</a> </nav> </body> </html> |
تب در بوت استرپ
برای ساخت منوی تب، کلاس .nav-tabs را به همراه کلاس .nav استفاده کنید. با این روش می توانید منویی به صورت تب ایجاد کنید. همچنین می توانید با استفاده از افزونه جاوا اسکریپت تب، بخش های قابل پیمایش (tabbable regions) در صفحه بسازید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="nav nav-tabs mt-2"> <li class="nav-item"> <a class="nav-link active bg-light" aria-current="page" href="#">Sourcebaran</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link disabled">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About us</a> </li> </ul> </body> </html> |
پیل در بوت استرپ
برای ساخت منوی ناوبری به صورت پیل، به جای استفاده از کلاس .nav-tabs، کلاس .nav-pills را داخل کلاس .nav قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Sourcebaran</a> </li> <li class="nav-item"> <a class="nav-link " href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link disabled">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About us</a> </li> </ul> </body> </html> |
منوی زیرخط دار
برای ساخت منوی ناوبری با زیر خط، از کلاس .nav-underline استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="nav nav-underline mt-2"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Sourcebaran</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link disabled">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About us</a> </li> </ul> </body> </html> |
پر کردن و تراز کردن منوی ناوبری در بوت استرپ
برای اینکه آیتم های ناوبری به طور یکنواخت تمام فضای موجود را پر کنند، از کلاس .nav-fill استفاده کنید. با این کار، فضای افقی به طور کامل پر می شود، حتی اگر عرض هر آیتم ناوبری متفاوت باشد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="nav nav-pills nav-fill bg-light mt-2"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Sourcebaran</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link disabled">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About us</a> </li> </ul> </body> </html> |
در ناوبری هایی که با تگ <nav> ساخته می شوند، می توانید از کلاس .nav-item صرف نظر کنید و تنها با استفاده از کلاس .nav-link، تگ های <a> را استایل دهی کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="nav nav-pills nav-fill bg-light mt-2"> <a class="nav-link active" aria-current="page" href="#">Sourcebaran</a> <a class="nav-link" href="#">Home</a> <a class="nav-link disabled">Services</a> <a class="nav-link" href="#">About us</a> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
از کلاس .nav-justified برای ایجاد آیتم هایی با عرض مساوی استفاده کنید. با این کلاس، لینک های ناوبری به طور کامل فضای افقی را پر می کنند و هر آیتم ناوبری عرض یکسانی خواهد داشت. این رفتار با کلاس .nav-fill که پیشتر توضیح داده شد، تفاوت دارد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="nav nav-pills nav-justified bg-light mt-2"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Sourcebaran</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link disabled">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About us</a> </li> </ul> </body> </html> |
یک مثال مشابه با نمونه استفاده از .nav-fill، اما این بار با ناوبری ای که بر پایه تگ <nav> ساخته شده است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="nav nav-pills nav-justified bg-light mt-2"> <a class="nav-link active" aria-current="page" href="#">Sourcebaran</a> <a class="nav-link" href="#">Home</a> <a class="nav-link disabled">Services</a> <a class="nav-link" href="#">About us</a> </nav> </body> </html> |
کار با ابزارهای فلکس در بوت استرپ
در صورتی که به نسخه های واکنش گرا برای منوی ناوبری نیاز دارید، از ابزارهای فلکس باکس (flexbox utilities) استفاده کنید.
این ابزارها امکان سفارشی سازی بیشتر را در تمام نقاط شکست (breakpoints) مختلف فراهم می کنند. با این روش، منوی ناوبری در کوچک ترین اندازه صفحه به صورت عمودی نمایش داده می شود و از نقطه شکست کوچک به بعد، به یک چیدمان افقی که تمام عرض صفحه را می پوشاند، تغییر می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav class="nav nav-pills flex-column flex-sm-row bg-warning mt-2"> <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Sourcebaran</a> <a class="flex-sm-fill text-sm-center nav-link" href="#">Home</a> <a class="flex-sm-fill text-sm-center nav-link disabled">Services</a> <a class="flex-sm-fill text-sm-center nav-link" href="#">About us</a> </nav> </body> </html> |
دسترس پذیری نوار های ناوبری در بوت استرپ
- برای نوارهای ناوبری که از کامپوننت nav استفاده می کنند، ویژگی
role="navigation"را به عنصر والد تگ<ul>اضافه کنید یا کل منوی ناوبری را داخل یک تگ<nav>قرار دهید. توجه داشته باشید که این ویژگی را نباید به خود تگ<ul>بدهید، چون در این صورت فناوری های کمکی (assistive technologies) آن را به عنوان یک فهرست (list) اعلام می کنند. - برای نوارهای ناوبری که با کلاس
.nav-tabsطراحی شده اند، نباید از ویژگی هایrole="tablist"،role="tab"یاrole="tabpanel"استفاده کنید. این نکته مخصوصاً برای رابط های کاربری تب بندی شده دینامیک صدق می کند. - در رابط های تب بندی شده دینامیک، نیازی به استفاده از ویژگی
aria-currentوجود ندارد، زیرا جاوا اسکریپت به طور خودکار وضعیت انتخاب شده (selected state) را با ویژگیaria-selected="true"روی تب فعال مدیریت می کند.
استفاده از منوی کشویی
می توانید با استفاده از HTML و افزونه جاوا اسکریپت dropdowns، منوهای کشویی به منوی ناوبری اضافه کنید.
تب با منوی کشویی در بوت استرپ
برای ایجاد تب همراه با منوی کشویی، کلاس .nav-tabs را به عنصر <ul> اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="nav nav-tabs bg-warning mt-2"> <li class="nav-item"> <a class="nav-link active bg-light" aria-current="page" href="#">Sourcebaran</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Home</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Sign in</a></li> <li><a class="dropdown-item" href="#">Sign out</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About us</a> </li> </ul> </body> </html> |
پیل با منوی کشویی در بوت استرپ
برای نمایش منوی کشویی به صورت پیل، کلاس .nav-pills را به عنصر <ul> اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="nav nav-pills bg-warning mt-2"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Sourcebaran</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Home</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Sign in</a></li> <li><a class="dropdown-item" href="#">Sign out</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About us</a> </li> </ul> </body> </html> |
رفتار جاوا اسکریپت
برای ایجاد پنل های محلی قابل پیمایش با استفاده از تب ها و پیل های ناوبری، از فایل bootstrap.js و افزونه جاوا اسکریپت تب (tab JavaScript plugin) استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="nav nav-tabs bg-warning mt-2" id="myTab" role="list"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="tutTab" data-bs-toggle="tab" data-bs-target="#tutorialspoints" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Sourcebaran</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="homeTab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="servicesTab" data-bs-toggle="tab" data-bs-target="#services" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Services-disabled</button> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active bg-light" id="tutorialspoints" role="tabpanel" aria-labelledby="tutTab" tabindex="0">Sourcebaran Tab Contents</div> <div class="tab-pane fade bg-light" id="home" role="tabpanel" aria-labelledby="homeTab" tabindex="0">Home Tab Contents</div> <div class="tab-pane fade bg-light" id="services" role="tabpanel" aria-labelledby="servicesTab" tabindex="0">Services Tab Content</div> </div> </body> </html> |
- این قابلیت هم با ساختار مبتنی بر
<ul>کار می کند و هم با هر نوع ساختار سفارشی که خودتان طراحی می کنید. - برای اینکه نقش اصلی تگ
<nav>به عنوان یک نشانگر ناوبری (navigation landmark) حفظ شود، ویژگیrole="tablist"را مستقیماً به آن اضافه نکنید. به جای آن، از یک عنصر جایگزین (مانند یک<div>ساده) استفاده کنید و تگ<nav>را داخل آن قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav> <div class="nav nav-tabs bg-warning" id="nav-tab" role="tablist"> <button class="nav-link active" id="navTutTab" data-bs-toggle="tab" data-bs-target="#navTut" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Sourcebaran</button> <button class="nav-link" id="navHomeTab" data-bs-toggle="tab" data-bs-target="#navHome" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Home</button> <button class="nav-link" id="navServicesTab" data-bs-toggle="tab" data-bs-target="#navServices" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Services-disabled</button> </div> </nav> <div class="tab-content bg-light" id="nav-tabContent"> <div class="tab-pane fade show active" id="navTut" role="tabpanel" aria-labelledby="navTutTab" tabindex="0">Sourcebaran Tab Content</div> <div class="tab-pane fade" id="navHome" role="tabpanel" aria-labelledby="navHomeTab" tabindex="0">Home Tab Content</div> <div class="tab-pane fade" id="navServices" role="tabpanel" aria-labelledby="navServicesTab" tabindex="0">Services Tab Content</div> </div> </body> </html> |
می توانید از پیل ها (pills) همراه با افزونه تب (tabs plugin) استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="nav nav-pills mb-3 bg-warning mt-2" id="pilltablist" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="pillsTutTab" data-bs-toggle="pill" data-bs-target="#pillsTut" type="button" role="tab" aria-controls="pillsTut" aria-selected="true">Sourcebaran</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pillsHomeTab" data-bs-toggle="pill" data-bs-target="#pillsHome" type="button" role="tab" aria-controls="pillsHome" aria-selected="false">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pillsServicesTab" data-bs-toggle="pill" data-bs-target="#pillsServices" type="button" role="tab" aria-controls="pillsServices" aria-selected="false" disabled>Services-disabled</button> </li> </ul> <div class="tab-content bg-light" id="pills-tabContent"> <div class="tab-pane fade show active" id="pillsTut" role="tabpanel" aria-labelledby="pillsTutTab" tabindex="0">Sourcebaran Tab Contents</div> <div class="tab-pane fade" id="pillsHome" role="tabpanel" aria-labelledby="pillsHomeTab" tabindex="0">Home Tab Contents</div> <div class="tab-pane fade" id="pillsServices" role="tabpanel" aria-labelledby="pillsServicesTab" tabindex="0">Services Tab Contents</div> </div> </body> </html> |
برای تب های عمودی، بهتر است ویژگی aria-orientation="vertical" را به عنصر والد لیست تب ها اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="d-flex align-items-start mt-2"> <div class="nav flex-column nav-pills me-3 bg-warning" id="vTabs" role="tablist" aria-orientation="vertical"> <button class="nav-link active" id="verticalTutTab" data-bs-toggle="pill" data-bs-target="#vTut" type="button" role="tab" aria-controls="vTut" aria-selected="true">Sourcebaran</button> <button class="nav-link" id="verticalHomeTab" data-bs-toggle="pill" data-bs-target="#vHome" type="button" role="tab" aria-controls="vHome" aria-selected="false">Home</button> <button class="nav-link" id="verticalServicesTab" data-bs-toggle="pill" data-bs-target="#vServices" type="button" role="tab" aria-controls="vServices" aria-selected="false" disabled>Services-disabled</button> </div> <div class="tab-content bg-light" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="vTut" role="tabpanel" aria-labelledby="verticalTutTab" tabindex="0">Sourcebaran Tabs Contents</div> <div class="tab-pane fade" id="vHome" role="tabpanel" aria-labelledby="verticalHomeTab" tabindex="0">Home Tab Contents</div> <div class="tab-pane fade" id="vServices" role="tabpanel" aria-labelledby="verticalServicesTab" tabindex="0">Services Tab Contents</div> </div> </div> </body> </html> |
دسترس پذیری
- برای اینکه کاربران فناوری های کمکی بتوانند ساختار، عملکرد و وضعیت فعلی تب ها را به درستی درک کنند، از ویژگی های
role="tablist"،role="tab"،role="tabpanel"و سایر ویژگی های aria استفاده کنید. - به عنوان یک روش پیشنهادی، از تگ
<button>برای ایجاد تب ها استفاده کنید. این نوع کنترل ها تغییرات دینامیک در صفحه ایجاد می کنند و کاربر را به صفحه دیگری منتقل نمی کنند. - بر اساس راهنمای نگارش ARIA Authoring Practices، تنها تب فعال باید فوکوس صفحه کلید را دریافت کند. هنگام مقداردهی اولیه، جاوا اسکریپت ویژگی
tabindex="-1"را روی تب های غیر فعال تنظیم می کند.
برای بهبود ناوبری با صفحه کلید، توصیه می شود پنل های تب (tab panels) قابلیت فوکوس داشته باشند، مگر اینکه اولین عنصر معنادار داخل آن ها از قبل قابلیت فوکوس داشته باشد. افزونه جاوا اسکریپت این موضوع را مدیریت نمی کند، بنابراین باید خودتان ویژگی tabindex="0" را به پنل های تب اضافه کنید تا امکان فوکوس فراهم شود.
افزونه جاوا اسکریپت تب ها، با رابط های تب بندی شده ای که شامل منوی کشویی هستند، به خوبی کار نمی کند. این موضوع به دلیل نگرانی های مربوط به کاربردپذیری (usability) و دسترس پذیری (accessibility) مطرح می شود. منوهای کشویی، عنصر فعال تب را مخفی می کنند و همین مسأله باعث سردرگمی کاربران می شود.
استفاده از ویژگی های داده
برای فعال کردن ناوبری تب یا پیل، ویژگی data-bs-toggle="tab" یا data-bs-toggle="pill" را روی عنصری که دارای کلاس .nav-tabs یا .nav-pills است، اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="nav nav-tabs bg-light" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="tutTab" data-bs-toggle="tab" data-bs-target="#tutorialspoints" type="button" role="tab" aria-controls="tutorialspoints" aria-selected="true">Sourcebaran</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="homeTab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="false">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="servicesTab" data-bs-toggle="tab" data-bs-target="#services" type="button" role="tab" aria-controls="services" aria-selected="false">Services</button> </li> </ul> <div class="tab-content bg-warning"> <div class="tab-pane active" id="tutorialspoints" role="tabpanel" aria-labelledby="tutTab" tabindex="0"> <h4>Sourcebaran</h4> <p>Sourcebaran Content</p> </div> <div class="tab-pane" id="home" role="tabpanel" aria-labelledby="homeTab" tabindex="0"> <h4>Home</h4> <p>Home Contents</p></div> <div class="tab-pane" id="services" role="tabpanel" aria-labelledby="servicesTab" tabindex="0"> <h4>Services</h4> <p>Services Contents</p> </div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
فعالسازی از طریق جاوا اسکریپت
برای فعال کردن تب های قابل پیمایش (tabbable tabs)، از جاوا اسکریپت استفاده کنید. با این روش می توانید هر تب را به صورت جداگانه فعال کنید.
|
1 2 3 4 5 6 7 8 9 |
const triggerTabList = document.querySelectorAll('#tabButton') triggerTabList.forEach(triggerEl => { const tabTrigger = new bootstrap.Tab(triggerEl) triggerEl.addEventListener('click', event => { event.preventDefault() tabTrigger.show() }) }) |
می توانید تب های جداگانه را به روش های مختلف فعال کنید.
|
1 2 3 4 5 |
const triggerElement = document.querySelector('#myTab button[data-bs-target="#profile"]') bootstrap.Tab.getInstance(triggerElement).show() // Select tab by name const triggerFirstTabElement = document.querySelector('#myTab li:first-child button') bootstrap.Tab.getInstance(triggerFirstTabElement).show() // Select first tab |
افکت محو شدن تب در بوت استرپ
برای ایجاد افکت محو شدن هنگام نمایش تب ها، کلاس .fade را به هر .tab-pane اضافه کنید. برای اینکه محتوای تب اول از ابتدا قابل مشاهده باشد، باید روی آن کلاس .show را نیز اعمال کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Navs and Tabs</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <ul class="nav nav-pills bg-light" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="tutTab" data-bs-toggle="tab" data-bs-target="#tut" type="button" role="tab" aria-controls="tutorialspoints" aria-selected="true">Sourcebaran</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="homeTab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="false">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="servicesTab" data-bs-toggle="tab" data-bs-target="#services" type="button" role="tab" aria-controls="services" aria-selected="false">Services</button> </li> </ul> <div class="tab-content bg-warning mt-2"> <div class="tab-pane fade show active p-2" id="tut" role="tabpanel" aria-labelledby="tutTab" tabindex="0"><h4>Sourcebaran</h4>Fade effect is used to fade the visible element.</div> <div class="tab-pane fade p-2" id="home" role="tabpanel" aria-labelledby="homeTab" tabindex="0"><h4>Home</h4>Use .fade to each .tab-pane to make the tabs fade in.</div> <div class="tab-pane fade p-2" id="services" role="tabpanel" aria-labelledby="servicesTab" tabindex="0"><h4>Services</h4>The first tab pane must use .show to make the initial content visible.</div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
اگر به دنبال یادگیری حرفه‌ای این فریم ورک هستید، پیشنهاد می‌کنیم از یک دوره تخصصی بوت استرپ استفاده کنید تا علاوه بر مباحث پایه، با تکنیک‌های پیشرفته در طراحی تب ها، منوهای کشویی و ناوبری های واکنش گرا نیز آشنا شوید.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
دوره آموزش برنامه نویسی پایتون در 24 ساعت + ساخت ربات تلگرامی
- انتشار: ۱۷ خرداد ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
