آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

ناو پایه 

ناوبری در Bootstrap به اشتراک گذاری و سبک های عمومی، از کلاس پایه nav. به حالت فعال و غیرفعال موجود است. کلاس های مبادله  برای تغییر بین هر سبک مبادله می شود.

اجزء پایه nav. با flexbox ساخته شده و یک پایه قوی برای ساخت تمام انواع اجزای ناوبری است. این شامل برخی از لغات سبک، برخی از پلاگین لینک برای مناطق بزرگتر ضربه، و سبک اولیه غیر فعال است.

 <ul class="nav"> <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>

کلاس ها در سراسر استفاده می شود، بنابراین نشانه گذاری شما می تواند فوق العاده انعطاف پذیر باشد. از <ul> مانند بالا استفاده کنید یا خود را با عنصر <nav> بگویید. از آنجا کهnav. از صفحه نمایش استفاده می کند: flex، پیوندی رفتار مشابهی با items nav دارد، اما بدون نشانه گذاری اضافی. است.

 <nav class="nav"> <a class="nav-link active" href="#">Active</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#">Disabled</a> </nav>

 

سبک های موجود 

سبک کامپوننت navs. را با اصلاح کننده ها و ابزارهای نرم افزاری تغییر دهید. مخلوط کردن و مطابقت با نیازها، یا ساختن خودتان است.

 

تراز افقی 

تنظیم هماهنگی افقی خود را با سرویسهای flexbox تغییر دهید. به طور پیش فرض، navs در سمت چپ تراز هستند، اما شما می توانید آنها را به راحتی به مرکز یا راست تراز کنید.

با justify-content-center. متمرکز شده است:

 <ul class="nav justify-content-center"> <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>

راست با justify-content-end.:

 <ul class="nav justify-content-end"> <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>

 

عمودی 

 <ul class="nav flex-column"> <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>

همانطور که همیشه، ناوبری عمودی بدون ul> s> نیز امکان پذیر است.

 <nav class="nav flex-column"> <a class="nav-link active" href="#">Active</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#">Disabled</a> </nav>

 

زبانه ها 

پایه را از بالا گرفته و کلاس nav-tabs. را اضافه می کند تا یک رابط tabbed ایجاد شود. از آنها برای ایجاد مناطق قابل برنامه ریزی با پلاگین جاوا اسکریپت استفاده کنید.

 <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>

 

قرص ها 

نگاهی همزمان HTML، اما به جای استفاده ازnav-pills.

 <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>

 

پر کردن و توجیه ها 

محتویات nav. خود را برای گسترش عرض کامل در یکی از دو کلاس اصلاح کنید. برای به طور مناسب همه فضای موجود را با خود nav-items. پر کنید، از nav-fill. استفاده کنید. توجه داشته باشید که تمام فضای افقی اشغال شده است، اما هر item nav دارای همان عرض است.

 <ul class="nav nav-pills nav-fill"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Longer nav 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>

هنگام استفاده از ناوبری مبتنی بر <nav>، مطمئن شوید که item -nav را در لنگرها قرار دهید.

 <nav class="nav nav-pills nav-fill"> <a class="nav-item nav-link active" href="#">Active</a> <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link disabled" href="#">Disabled</a> </nav>

برای عناصر برابر با استفاده از nav-justified. تمام فضای افقی توسط پیوندهای نوری اشغال می شوند، اما بر خلاف nav-fill. در بالا، هر قلم نوری همان عرض خواهد بود.

 <nav class="nav nav-pills nav-justified"> <a class="nav-link active" href="#">Active</a> <a class="nav-link" href="#">Longer nav link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#">Disabled</a> </nav>

همانند مثال nav-fill. با استفاده از ناوبری مبتنی بر <nav>، مطمئن شوید که شامل موارد nav. در لنگرها باشد.

 <nav class="nav nav-pills nav-justified"> <a class="nav-item nav-link active" href="#">Active</a> <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link disabled" href="#">Disabled</a> </nav>

 

کار با فشرده سازی ابزار 

اگر از Navs برای ارائه نوار ناوبری استفاده می کنید، مطمئن شوید که یک "role="navigation  را به کانال اصلی منطقی <ul> اضافه کنید یا عنصر <nav> را در اطراف کل ناوبری قرار دهید. این نقش را به خودتان اضافه نکنید، زیرا این امر باعث جلوگیری از معرفی آن به عنوان یک لیست واقعی توسط فن آوری های کمک کننده می شود.

 <nav class="nav nav-pills flex-column flex-sm-row"> <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a> <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a> <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a> <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Disabled</a> </nav>

با توجه به دسترسی 

اگر از Navs برای ارائه نوار ناوبری استفاده می کنید، مطمئن شوید که یک "role="navigation  را به کانال اصلی منطقی <ul> اضافه کنید یا عنصر <nav> را در اطراف کل ناوبری قرار دهید. این نقش را به خودتان اضافه نکنید، زیرا این امر باعث جلوگیری از معرفی آن به عنوان یک لیست واقعی توسط فن آوری های کمک کننده می شود.

 

با استفاده از منوی کشویی 

منوهای کشویی را با یک HTML  اضافی و پلاگین جاوا اسکریپت کشویی اضافه کنید.

 

زبانه ها با رها کردن 

 <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="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</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>

 

قرص ها با رها کردن 

 <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="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</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>

 

رفتار جاوا اسکریپت 

استفاده از تب افزونه جاوا اسکریپت - شامل آن به صورت جداگانه یا از طریق فایل compiled file bootstrap.js است - برای گسترش زبانه های ناوبری و قرص ها برای ایجاد پوسته های tabbable از محتویات محلی، حتی از طریق منوهای کشویی استفاده کنید.

اگر جاوا اسکریپت خود را از منبع ایجاد می کنید، به util.js نیاز دارد.

واسط های tabbed پویا، همانطور که در عملکردهای نوشتن WAI ARIA شرح داده شده، نیاز به نقش = "tablist"، role = "tab"، role = "tabpanel" و aria-attributes دیگر برای انتقال ساختار، عملکرد و وضعیت فعلی آنها به کاربران از تکنیک های کمک دارند.

توجه داشته باشید که اینترفیس های tabbed پویا نباید حاوی منوهای منقطبی باشد، زیرا این باعث می شود که مسائل مربوط به قابلیت استفاده و دسترسی نیز مورد استفاده قرار گیرد. از دیدگاه قابلیت استفاده، این واقعیت که عنصر نمایش داده شده در حال حاضر نمایش داده نمی شود بلافاصله قابل مشاهده است، می تواند باعث سردرگمی شود. از نقطه نظر دسترسی، در حال حاضر روش معقولی برای نقشه برداری این ساختار به یک الگوی استاندارد WAI ARIA وجود ندارد، به این معنی که به راحتی قابل فهم برای کاربران تکنولوژی های کمک کننده نیست.

 <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div> </div>

برای کمک به تناسب نیازهایتان، این کار با نشانه گذاری مبتنی بر <ul> به کار می رود، همانطور که در بالا نشان داده شده است، یا با نشانه گذاری دلخواه «خودتان». توجه داشته باشید که اگر از <nav> استفاده می کنید، نباید لیست"role = "tablist را مستقیما به آن اضافه کنید، زیرا این کار نقش بومی عنصر را به عنوان یک عنصر ناوبری جایگزین می کند. در عوض، به یک عنصر جایگزین بروید و <nav> را در اطراف آن قرار دهید.

 <nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div> </div>

پلاگین زبانه ها نیز با قرص ها کار می کند.

 <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div> </div>

و با قرصهای عمودی:

 <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> </div> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div> <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div> <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div> <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div> </div>

 

استفاده از ویژگی داده ها 

شما می توانید یک نشانه یا پیمان ناوبری بدون نوشتن هیچ جاوا اسکریپت را فقط با مشخص کردن data-toggle = "tab" یا data-toggle = "pill" در یک عنصر فعال کنید. از این ویژگی های داده ها بر روی .nav-tabs یا nav-tablets. استفاده کنید.

 <!-- Nav tabs --> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> </li> <li class="nav-item"> <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div> <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div> </div>

 

استفاده از جاوا اسکریپت

زبانه های tabbable را از طریق جاوا اسکریپت فعال کنید:

 $('#myTab a').on('click', function (e) { e.preventDefault() $(this).tab('show') })

شما می توانید جداول فردی را به روش های مختلف فعال کنید:

 $('#myTab a[href="#profile"]').tab('show') // Select tab by name $('#myTab li:first-child a').tab('show') // Select first tab $('#myTab li:last-child a').tab('show') // Select last tab $('#myTab li:nth-child(3) a').tab('show') // Select third tab

 

اثر محو شدن 

برای ایجاد زبانه ها در محو شدن، اضافه کردن به هر tab. اولین صفحه برگه نیز باید نمایش داده شود تا مطالب اولیه قابل مشاهده باشد..

 <div class="tab-content"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div> <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div> </div>

 

متد ها 

$().tab

یک عنصر تب و محتوا را فعال می کند. برگه باید یک هدف داده یا یک href داشته باشد و یک گره کانتینر را در DOM هدف قرار دهد.

 <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a> </li> <li class="nav-item"> <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div> <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div> </div> <script> $(function () { $('#myTab li:last-child a').tab('show') }) </script>

 

.tab(‘show’)

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

 $('#someTab').tab('show')

 

.tab(‘dispose’)

برگه ی عنصر را از بین می برد.

 

مناسبت ها 

هنگام نمایش یک برگه جدید، حوادث در دستورالعمل زیر آتش میگیرند:

1-hide.bs.tab

2-show.bs.tab

3-hidden.bs.tab

4-shown.bs.tab

اگر هیچ زبانه در حال حاضر فعال نبود، پس رویداد hide.bs.tab و hidden.bs.tab خارج نخواهد شد.

Event Type Description
show.bs.tab This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
shown.bs.tab This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
hide.bs.tab This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
hidden.bs.tab This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively.

 

 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // newly activated tab e.relatedTarget // previous active tab })