در این آموزش قصد داریم با نوار منو ها یا Navbar در بوت استرپ آشنا شویم. نوار منو یکی از کامپوننت های بسیار عالی هستند.میتوانید از این کامپوننتها برای ایجاد منوهای زیبا و واکنش گرا در طراحی وب سایت خود استفاده کنید.نوار منوها در دستگاههای موبایل بسته میشوند و به صورت پشته ایی روی هم قرار میگیرند. نوار منوی پیش فرض در بوت استرپ :
برای ایجاد یک نوار منوی پیش فرض درطراحی سایت خود میتوانید مراحل زیر را انجام دهید:
- کلاسهای 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]
http://sypna.ir/Portals/0/EducationP...strap-Demo.JPG
نوار منوی واکنش گرا در بوت استرپ :
اگر میخواهید یک نوار منوی واکنش گرا در طراحی وب سایت خود داشته باشید میتوانید از کلاس های ایجاد شده توسط بوت استرپ استفاده کنید. محتواهایی را که میخواهید هنگام کوچک شدن صفحه ، جمع شوند داخل کلاسهای collapse و navbar-collapse قراردهید. هنگامی که از این کلاس استفاده میکنید نیاز به یک دکمه دارید تا اگر کاربر روی آن کلیک کرد منوهای آبشاری شما باز شوند. این دکمه در کلاس navbar-toggle قرار دارد. همچنین برای این کلاس باید دو ویژگی داده را مشخص کنیم که عبارتند از : data-toggle که به جاوااسکریپت میگوید قرار است با این دکمه چه کارهای انجام شود و data-target که نمایانگر کنترلهایی است که قرار است جمع شوند. علاوه بر ویژگی داده میتوانیم با ویژگی icon-bar آیکونی سفارشی را برای دکمه انتخاب کنیم. در کد زیر روش استفاده از کلاسهای عنوان شده را نشان داده ایم:
تصویر این کد به صورت زیر است.هنگامی که صفحه نمایش در حالت عادی باشد با نوار منوی پیش فرض هیچ فرقی ندارد. اما اگر صفحه نمایش کوچک شود منوها جمع میشوند و با کلیک بر روی دکمه میتوانید آنها را باز کنید:کد HTML:[LEFT] <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>
[/LEFT]
http://sypna.ir/Portals/0/EducationP...strap-Demo.JPG
فرم در نوار منو و بوت استرپ :
اگر نیاز دارید در طراحی سایت خود نوار منو را به گونه ایی طراحی کنید که دارای فرم باشد میتوانید از کلاس navbar-form استفاده کنید. ایده استفاده از فرم در نوار منوی طراحی وب سایت شما میتواند شامل قرار دادن فرم ورود و ثبت نام در یکی از منوها باشد یا میتوانید فرم جستجو در وبسایت خود را در یکی ازمنو ها قرار دهید. کد زیر روش ایجاد فرم ها در نوار منو را نشان میدهد:
تصویر زیر دموی این کد را نشان میدهد:کد HTML:
[LEFT] <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>
[/LEFT]
http://sypna.ir/Portals/0/EducationP...strap-Demo.JPG
دکمه ها در نوار منو و بوت استرپ :
اگر طراحی وب سایت شما به گونه ایی است که نیاز دارید دکمه هایی را در نوار منوی خود قرار دهید میتوانید از کلاس navbar-btn استفاده کنید. کد زیر روش استفاده از این کلاس را نشان میدهد:
تصویر زیردموی این کد را نشان میدهد:کد HTML:[LEFT]<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>
[/LEFT]
http://sypna.ir/Portals/0/EducationP...strap-Demo.JPG
متن در نوار منو و بوت استرپ :
اگر میخواهید یک متن در نوار منو قرار دهید از کلاس navbar-text استفاده کنید. این کلاس معمولاً همراه با تگ p مورد استفاده قرار میگیرد.مثال:
تصویر دموی این کد به صورت زیر است:کد HTML:
[LEFT]<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>[/LEFT]
http://sypna.ir/Portals/0/EducationP...strap-Demo.JPG
لینک های معمولی در بوت استرپ:
اگر میخواهید یک لینک معمولی در نوار منوی خود ایجاد کنید میتوانید از کلاس navbar-link برای این کار استفاده کنید. کد زیر استفاده از این کلاس را نشان میدهد:
تصویر دموی این کد به صورت زیراست:کد HTML:
[LEFT]<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>[/LEFT]
http://sypna.ir/Portals/0/EducationP...strap-Demo.JPG
ترازبندی مولفه ها در بوت استرپ:
برای تراز بندی مولفه های مختلف در نوار منو میتوانید از کلاسهای navbar-left و navbar-right استفاده کنید. در مثال زیر روش های مختلف استفاده از این دو کلاس را نشان داده ایم:
تصویر کد بالا به صورت زیر است:کد HTML:
[LEFT]<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 [/LEFT]
http://sypna.ir/Portals/0/EducationP...strap-Demo.JPG
نوار منوی ثابت در بوت استرپ :
اگر میخواهید منوی شما به گونه ایی طراحی شود که با اسکرول کردن مرورگر به سمت پایین ؛ همیشه قابل نمایش باشد میتوانید از این روش استفاده کنید. برای این کار میتوانید کلاس navbar-fixed-top را به کلاس navbar اضافه کنید.در این حالت منو با بدنه وب سایت شما تداخل پیدا می کند . اگر میخواهید از این کلاس استفاده کنید یک padding به اندازه 50 پیکسل یا دلخواه خودتان به تگ body صفحه اختصاص دهید. کد زیر روش استفاده از این کلاس را نشان میدهد:
نوار منوی ثابت درپایین و بوت استرپ:کد HTML:<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>
برای اینکه منو ها را در پایین ثابت نگه دارید میتوانید از کلاس navbar-fixed-bottom استفاده کنید. کد زیر روش استفاده از این کلاس را نمایش میدهد:
تصویر زیر دموی کد بالا را نشان میدهد:کد HTML:
[LEFT]<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>[/LEFT]
http://sypna.ir/Portals/0/EducationP...strap-Demo.JPG
منوی ایستا در بوت استرپ:
برای ایجاد یک منو که با اسکرول به پایین و بالا حرکت میکند میتوانید از کلاس navbar-static-top استفاده کنید. کارایی این کلاس تقریباً همانند مثال قبل است.با این تفاوت که استفاده از این کلاس نیاز به اختصاص padding به تگ body ندارد. مثال:
تصویر کد:کد HTML:
[LEFT]<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>
[/LEFT]
http://sypna.ir/Portals/0/EducationP...strap-Demo.JPG
منوی وارونه در بوت استرپ:
برای ایجاد یک منوی وارونه با استفاده از بوت استرپ ، به صورتی که پس زمینه منو مشکلی و رنگ متن ها سفید باشد میتوانید از کلاس navbar-invese استفاده کنید. در این حالت تمام رنگ ها وارنه میشوند. کد زیر روش استفاده از این کلاس را نشان میدهد:
تصویر زیر دموی این کد را نشان میدهد:کد HTML:
[LEFT]<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>[/LEFT]
http://sypna.ir/Portals/0/EducationP...strap-Demo.JPG
در قسمت بعد با بریدکرامب ها آشنا خواهیم شد.
در گروه: کامپوننت های لایه بندی
منبع: طراحی سایت
