با عرض سلام خدمت شما دوستان ارجمند و کوشا ، حالتون چطوره؟ خوبین؟ امیدوارم که سلامت باشید.در مورد چگونگی مولفه های ثابت و استاتیک nav bar را با استفاده از تویتر بوت استرپ تا حالا شنیده اید؟ اگرخیر با ماهمراه باشید.
ایجاد یک nav bar ساده با تویتر بوت استرپ
تویتر بوت استرپ شما را قادر می کند تا انواع مختلفی از 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>
