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

مثال :

مثال زیر چگونگی ایجاد nav bar استاتیک با مسیریابی پایه را نشان می دهد.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
۸۰
۸۱
۸۲
۸۳
۸۴
۸۵

<!– Brand and toggle get grouped for better mobile display –>

<div class=”navbar-header”>

<button class=”navbar-toggle”>

<span class=”sr-only”>

Toggle navigation

</span>

<span class=”icon-bar”>

</span>

<span class=”icon-bar”>

</span>

<span class=”icon-bar”>

</span>

</button>

<a class=”navbar-brand” href=”#”>

Brand

</a>

</div>

<!– Collection of nav links and other content for toggling –>

<div id=”navbarCollapse” class=”collapse navbar-collapse”>

<ul class=”nav navbar-nav”>

<li class=”active”>

<a href=”#”>

Home

</a>

</li>

<li>

<a href=”#”>

Profile

</a>

</li>

<li>

<a href=”#”>

Messages

</a>

</li>

</ul>

<ul class=”nav navbar-nav navbar-right”>

<li>

<a href=”#”>Login</a>

</li>

</ul>

</div>

خروجی مثال بالا مانند زیر می باشد .
Bootstrap

همچنین می توانید فرم جستجو در داخل nav بارها اضافه کنید.

مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
۸۰
۸۱
۸۲
۸۳
۸۴
۸۵
۸۶
۸۷
۸۸
۸۹
۹۰
۹۱
۹۲
۹۳
۹۴
۹۵
۹۶
۹۷
۹۸
۹۹
۱۰۰
۱۰۱
۱۰۲
۱۰۳
۱۰۴
۱۰۵
۱۰۶
۱۰۷
۱۰۸
۱۰۹
۱۱۰
۱۱۱
۱۱۲
۱۱۳
۱۱۴
۱۱۵
۱۱۶
۱۱۷
۱۱۸
۱۱۹
۱۲۰
۱۲۱
۱۲۲
۱۲۳
۱۲۴
۱۲۵
۱۲۶
۱۲۷
۱۲۸
۱۲۹
۱۳۰
۱۳۱
۱۳۲
۱۳۳
۱۳۴
۱۳۵
۱۳۶
۱۳۷
۱۳۸
۱۳۹
۱۴۰
۱۴۱
۱۴۲
۱۴۳
۱۴۴
۱۴۵
۱۴۶
۱۴۷

<!– Brand and toggle get grouped for better mobile display –>

<div class=”navbar-header”>

<button class=”navbar-toggle”>

<span class=”sr-only”>

Toggle navigation

</span>

<span class=”icon-bar”>

</span>

<span class=”icon-bar”>

</span>

<span class=”icon-bar”>

</span>

</button>

<a class=”navbar-brand” href=”#”>

Brand

</a>

</div>

<!– Collection of nav links, forms, and other content for toggling –>

<div id=”navbarCollapse” class=”collapse navbar-collapse”>

<ul class=”nav navbar-nav”>

<li class=”active”>

<a href=”#”>

Home

</a>

</li>

<li>

<a href=”#”>

Profile

</a>

</li>

<li class=”dropdown”>

<a class=”dropdown-toggle” href=”#”>

Messages <strong class=”caret”>

</strong>

</a>

<ul class=”dropdown-menu”>

<li>

<a href=”#”>

Inbox

</a>

</li>

<li>

<a href=”#”>

Drafts

</a>

</li>

<li>

<a href=”#”>

Sent Items

</a>

</li>

<li class=”divider”>

</li>

<li>

<a href=”#”>

Trash

</a>

</li>

</ul>

</li>

</ul>

<div class=”form-group”>

<input class=”form-control” type=”text”>

</div>

<ul class=”nav navbar-nav navbar-right”>

<li>

<a href=”#”>Login</a>

</li>

</ul>

</div>

خروجی مثال بالا مانند زیر می باشد .
Bootstrap
نکته:

برای ایجاد navbar هایی که در بالا ثابت نیستند، آن را در هرجایی در داخل .containerقرار دهید که عرض سایت و محتوای شما را تنظیم می کند.
Nav bar ثابت تویتر بوت استرپ

تویتربوت استرپ مکانیزمی برای ایجاد nav bar ارائه می دهد که در بالا یا پایین ViewPort ثابت است و با محتوای روی صفحه اسکرول می کند.
ایجاد nav bar ثابت در بالا

برای ایجاد nav bar هایی که در بالا ثابت هستند، به علاوه ی گروه پایه ی .nav bar and .nav bar-defaultیک گروه .nav bar-fixed-top نیز اضافه کنید.
ایجاد nav bar ثابت در بالا

برای ایجاد nav bar هایی که در بالا ثابت هستند، به علاوه ی گروه پایه ی .nav bar and .nav bar-defaultیک گروه .nav bar-fixed-top نیز اضافه کنید.

مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
۸۰
۸۱
۸۲
۸۳
۸۴
۸۵

<div class=”container-fluid”>

<!– Brand and toggle get grouped for better mobile display –>

<div class=”navbar-header”>

<button class=”navbar-toggle”>

<span class=”sr-only”>

Toggle navigation

</span>

<span class=”icon-bar”>

</span>

<span class=”icon-bar”>

</span>

<span class=”icon-bar”>

</span>

</button>

<a class=”navbar-brand” href=”#”>

Brand

</a>

</div>

<!– Collection of nav links and other content for toggling –>

<div id=”navbarCollapse” class=”collapse navbar-collapse”>

<ul class=”nav navbar-nav”>

<li class=”active”>

<a href=”#”>

Home

</a>

</li>

<li>

<a href=”#”>

Profile

</a>

</li>

<li>

<a href=”#”>

Messages

</a>

</li>

</ul>

<ul class=”nav navbar-nav navbar-right”>

<li><a href=”#”>Login</a></li>

</ul>

</div>

</div>
نکته:

برای ایجاد navbar هایی که در بالا ثابت نیستند، آن را در هرجایی در داخل .containerقرار دهید که عرض سایت و محتوای شما را تنظیم می کند.
Nav bar استاتیک تویتربوت استرپ در بالا

شما می توانید nav bar تمام عرض ایجاد کنید که در بالا ظاهر می شود اما با اضافه کردن گروه .navbar-static-top از فهرست صفحه دور می شود. برخلاف گروه .navbar-fixed-top لازم نیست هیچ لایه ای را درbodyتغییر دهید.

مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
۸۰
۸۱
۸۲
۸۳
۸۴
۸۵
۸۶
۸۷
۸۸
۸۹
۹۰
۹۱

<div class=”container-fluid”>

<!– Brand and toggle get grouped for better mobile display –>

<div class=”navbar-header”>

<button class=”navbar-toggle”>

<span class=”sr-only”>

Toggle navigation

</span>

<span class=”icon-bar”>

</span>

<span class=”icon-bar”>

</span>

<span class=”icon-bar”>

</span>

</button>

<a class=”navbar-brand” href=”#”>

Brand

</a>

</div>

<!– Collection of nav links and other content for toggling –>

<div id=”navbarCollapse” class=”collapse navbar-collapse”>

<ul class=”nav navbar-nav”>

<li class=”active”>

<a href=”#”>

Home

</a>

</li>

<li>

<a href=”#”>

Profile

</a>

</li>

<li>

<a href=”#”>

Messages

</a>

</li>

</ul>

<ul class=”nav navbar-nav navbar-right”>

<li>

<a href=”#”>Login</a>

</li>

</ul>

</div>

</div>
Nav bar تویتربوت استرپ با فرم جستجو

فرم جستجو یک مولفه ی متداول بر روی navbarها می باشد و شما آن ها را روی وب سایت های متفاوت دیده اید. فرم جستجو با استفاده از گروه .navbar-form روی عنصر
می تواند در داخل navbar قرار بگیرد.

مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳

<div class=”navbar-header”>

<button class=”navbar-toggle”>

<span class=”sr-only”>

Toggle navigation

</span>

<span class=”icon-bar”>

</span>

<span class=”icon-bar”>

</span>

<span class=”icon-bar”>

</span>

</button>

<a class=”navbar-brand” href=”#”>

Brand

</a>

</div>

<div id=”navbarCollapse” class=”collapse navbar-collapse”>

<div class=”form-group”>

<input class=”form-control” type=”text”>

</div>

<button class=”btnbtn-default”>

Submit

</button>

</div>
ایجاد گونه ی معکوس یک nav bar

شما می توانید با اضافه کردن گروه .navbar-inverse به گروه پایه ی .navbar یک گونه ی معکوس از navbar بوت استرپ ایجاد کنید که به تغییر در Markup هم احتیاجی نیست.

مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
۸۰
۸۱
۸۲
۸۳
۸۴
۸۵
۸۶
۸۷
۸۸
۸۹
۹۰
۹۱
۹۲
۹۳
۹۴
۹۵
۹۶
۹۷
۹۸
۹۹
۱۰۰
۱۰۱
۱۰۲
۱۰۳
۱۰۴
۱۰۵
۱۰۶
۱۰۷
۱۰۸
۱۰۹
۱۱۰
۱۱۱
۱۱۲
۱۱۳
۱۱۴
۱۱۵
۱۱۶
۱۱۷
۱۱۸
۱۱۹
۱۲۰
۱۲۱
۱۲۲
۱۲۳
۱۲۴
۱۲۵
۱۲۶
۱۲۷
۱۲۸
۱۲۹
۱۳۰
۱۳۱
۱۳۲
۱۳۳
۱۳۴
۱۳۵
۱۳۶
۱۳۷
۱۳۸
۱۳۹
۱۴۰
۱۴۱
۱۴۲
۱۴۳
۱۴۴
۱۴۵

<!– Brand and toggle get grouped for better mobile display –>

<div class=”navbar-header”>

<button class=”navbar-toggle”>

<span class=”sr-only”>

Toggle navigation

</span>

<span class=”icon-bar”>

</span>

<span class=”icon-bar”>

</span>

<span class=”icon-bar”>

</span>

</button>

<a class=”navbar-brand” href=”#”>

Brand

</a>

</div>

<!– Collection of nav links, forms, and other content for toggling –>

<div id=”navbarCollapse” class=”collapse navbar-collapse”>

<ul class=”nav navbar-nav”>

<li class=”active”>

<a href=”#”>

Home

</a>

</li>

<li>

<a href=”#”>

Profile

</a>

</li>

<li class=”dropdown”>

<a class=”dropdown-toggle” href=”#”>

Messages <strong class=”caret”>

</strong>

</a>

<ul class=”dropdown-menu”>

<li>

<a href=”#”>

Inbox

</a>

</li>

<li>

<a href=”#”>

Drafts

</a>

</li>

<li>

<a href=”#”>

Sent Items

</a>

</li>

<li class=”divider”>

</li>

<li>

<a href=”#”>

Trash

</a>

</li>

</ul>

</li>

</ul>

<form class=”navbar-form navbar-left”>

<div class=”form-group”>

<input class=”form-control” type=”text”>

</div>

</form>

<ul class=”nav navbar-nav navbar-right”>

<li>

<a href=”#”>Login</a>

</li>

</ul>

</div>

خروجی مثال بالا مانند زیر می باشد.
Bootstrap