navbar در بوت استرپ

saeed410

Member
در این آموزش قصد داریم با نوار منو ها یا Navbar در بوت استرپ آشنا شویم. نوار منو یکی از کامپوننت های بسیار عالی هستند.میتوانید از این کامپوننتها برای ایجاد منوهای زیبا و واکنش گرا در طراحی وب سایت خود استفاده کنید.نوار منوها در دستگاههای موبایل بسته میشوند و به صورت پشته ایی روی هم قرار میگیرند. [h=2]نوار منوی پیش فرض در بوت استرپ :[/h] برای ایجاد یک نوار منوی پیش فرض در طراحی سایت خود میتوانید مراحل زیر را انجام دهید:

  • کلاسهای navbar و navbar-default را به تگ nav اضافه کنید.
  • ویژگی role را برای تگ nav برابر navigation قرار دهید
  • یک Div با کلاس navbar-header ایجاد کنید. و داخل آن یک تگ a قرار دهید که دارای کلاس navbar-brand است.
  • سپس برای اضافه کردن منوهای خود یک لیست ایجاد کنید و آنها را داخل یک div با کلاسهای nav و navbar-nav قرار دهید .
کد زیر روش استفاده از navbar پیش فرض در بوت استرپ را نشان میدهد:
HTML:
[LEFT]<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">سیپنا</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java 
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">Separated link</a></li>
               <li class="divider"></li>
               <li><a href="#">One more separated link</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav> 
[/LEFT]
تصویر دموی این کد به صورت زیر است:
Default-Navbar-Bootstrap-Demo.JPG

[h=2]نوار منوی واکنش گرا در بوت استرپ :[/h] اگر میخواهید یک نوار منوی واکنش گرا در طراحی وب سایت خود داشته باشید میتوانید از کلاس های ایجاد شده توسط بوت استرپ استفاده کنید. محتواهایی را که میخواهید هنگام کوچک شدن صفحه ، جمع شوند داخل کلاسهای collapse و navbar-collapse قراردهید. هنگامی که از این کلاس استفاده میکنید نیاز به یک دکمه دارید تا اگر کاربر روی آن کلیک کرد منوهای آبشاری شما باز شوند. این دکمه در کلاس navbar-toggle قرار دارد. همچنین برای این کلاس باید دو ویژگی داده را مشخص کنیم که عبارتند از : data-toggle که به جاوااسکریپت میگوید قرار است با این دکمه چه کارهای انجام شود و data-target که نمایانگر کنترلهایی است که قرار است جمع شوند. علاوه بر ویژگی داده میتوانیم با ویژگی icon-bar آیکونی سفارشی را برای دکمه انتخاب کنیم. در کد زیر روش استفاده از کلاسهای عنوان شده را نشان داده ایم:


[HTMLS]
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<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="#">نوار منوی جمعشو</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
[/HTMLS] تصویر این کد به صورت زیر است.هنگامی که صفحه نمایش در حالت عادی باشد با نوار منوی پیش فرض هیچ فرقی ندارد. اما اگر صفحه نمایش کوچک شود منوها جمع میشوند و با کلیک بر روی دکمه میتوانید آنها را باز کنید:
Collapsed-Navbar-Bootstrap-Demo.JPG

[h=2]فرم در نوار منو و بوت استرپ :[/h] اگر نیاز دارید در طراحی سایت خود نوار منو را به گونه ایی طراحی کنید که دارای فرم باشد میتوانید از کلاس navbar-form استفاده کنید. ایده استفاده از فرم در نوار منوی طراحی وب سایت شما میتواند شامل قرار دادن فرم ورود و ثبت نام در یکی از منوها باشد یا میتوانید فرم جستجو در وبسایت خود را در یکی ازمنو ها قرار دهید. کد زیر روش ایجاد فرم ها در نوار منو را نشان میدهد:


[HTMLS]
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">فرم در نوار منو</a>
</div>
<div>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="جستجو">
</div>
<button type="submit" class="btn btn-default">جستجو</button>
</form>
</div>
</nav>
[/HTMLS] تصویر زیر دموی این کد را نشان میدهد:
FormsIn-Navbar-Bootstrap-Demo.JPG

[h=2]دکمه ها در نوار منو و بوت استرپ :[/h] اگر طراحی وب سایت شما به گونه ایی است که نیاز دارید دکمه هایی را در نوار منوی خود قرار دهید میتوانید از کلاس navbar-btn استفاده کنید. کد زیر روش استفاده از این کلاس را نشان میدهد:


[HTMLS]
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">آموزش بوت استرپ </a>
</div>
<div>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="جستجو">
</div>
<button type="submit" class="btn btn-default">کمه ثبت</button>
</form>
<button type="button" class="btn btn-default navbar-btn">
دکمه در نوار منو
</button>
</div>
</nav>

[/HTMLS]
تصویر زیردموی این کد را نشان میدهد:
Bottun-Navbar-Bootstrap-Demo.JPG

[h=2]متن در نوار منو و بوت استرپ :[/h] اگر میخواهید یک متن در نوار منو قرار دهید از کلاس navbar-text استفاده کنید. این کلاس معمولاً همراه با تگ p مورد استفاده قرار میگیرد.مثال:
[HTMLS]

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">آموزش بوت استرپ</a>
</div>
<div>
<p class="navbar-text">وارد شده به عنوان سیپنا</p>
</div>
</nav>​
[/HTMLS]
تصویر دموی این کد به صورت زیر است:
Text-Navbar-Bootstrap-Demo.JPG

[h=2]لینک های معمولی در بوت استرپ:[/h] اگر میخواهید یک لینک معمولی در نوار منوی خود ایجاد کنید میتوانید از کلاس navbar-link برای این کار استفاده کنید. کد زیر استفاده از این کلاس را نشان میدهد:


[HTMLS]
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">آموزش بوت استرپ </a>
</div>
<div>
<p class="navbar-text navbar-right">وارد شده به عنوان
<a href="#" class="navbar-link">سیپنا</a>
</p>
</div>
</div>
</nav>
[/HTMLS] تصویر دموی این کد به صورت زیراست:
Links-Navbar-Bootstrap-Demo.JPG

[h=2]ترازبندی مولفه ها در بوت استرپ:[/h] برای تراز بندی مولفه های مختلف در نوار منو میتوانید از کلاسهای navbar-left و navbar-right استفاده کنید. در مثال زیر روش های مختلف استفاده از این دو کلاس را نشان داده ایم:


[HTMLS]
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">TutorialsPoint</a>
</div>
<div>
<!--Left Align-->
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<button type="submit" class="btn btn-default">
Left align-Submit Button
</button>
</form>
<p class="navbar-text navbar-left">Left align-Text</p>
<!--Right Align-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<button type="submit" class="btn btn-default">
Right align-Submit Button
</button>
</form>
<p class="navbar-text navbar-right">Right align-Text</p>
</div
[/HTMLS]
تصویر کد بالا به صورت زیر است:
Alignment-Navbar-Bootstrap-Demo.JPG

[h=2]نوار منوی ثابت در بوت استرپ :[/h] اگر میخواهید منوی شما به گونه ایی طراحی شود که با اسکرول کردن مرورگر به سمت پایین ؛ همیشه قابل نمایش باشد میتوانید از این روش استفاده کنید. برای این کار میتوانید کلاس navbar-fixed-top را به کلاس navbar اضافه کنید.در این حالت منو با بدنه وب سایت شما تداخل پیدا می کند . اگر میخواهید از این کلاس استفاده کنید یک padding به اندازه 50 پیکسل یا دلخواه خودتان به تگ body صفحه اختصاص دهید. کد زیر روش استفاده از این کلاس را نشان میدهد:


[HTMLS]<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">TutorialsPoint</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>[/HTMLS]
[h=2]نوار منوی ثابت درپایین و بوت استرپ:[/h] برای اینکه منو ها را در پایین ثابت نگه دارید میتوانید از کلاس navbar-fixed-bottom استفاده کنید. کد زیر روش استفاده از این کلاس را نمایش میدهد:
[HTMLS]

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">TutorialsPoint</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>​
[/HTMLS]
تصویر زیر دموی کد بالا را نشان میدهد:
FixedBottom-Navbar-Bootstrap-Demo.JPG

[h=2]منوی ایستا در بوت استرپ:[/h] برای ایجاد یک منو که با اسکرول به پایین و بالا حرکت میکند میتوانید از کلاس navbar-static-top استفاده کنید. کارایی این کلاس تقریباً همانند مثال قبل است.با این تفاوت که استفاده از این کلاس نیاز به اختصاص padding به تگ body ندارد. مثال:
[HTMLS]

<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">منوی ایستا</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>​
[/HTMLS]
تصویر کد:
static-Navbar-Bootstrap-Demo.JPG

[h=2]منوی وارونه در بوت استرپ:[/h] برای ایجاد یک منوی وارونه با استفاده از بوت استرپ ، به صورتی که پس زمینه منو مشکلی و رنگ متن ها سفید باشد میتوانید از کلاس navbar-invese استفاده کنید. در این حالت تمام رنگ ها وارنه میشوند. کد زیر روش استفاده از این کلاس را نشان میدهد:
[HTMLS]
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">منوی وارونه</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
[/HTMLS]
تصویر زیر دموی این کد را نشان میدهد:
Inverted-Navbar-Bootstrap-Demo.JPG

در قسمت بعد با بریدکرامب ها آشنا خواهیم شد.


در گروه: کامپوننت های لایه بندی
منبع: طراحی سایت
 

جدیدترین ارسال ها

بالا