جلسه نوزدهم از دوره آموزش Bootstrap : نوار ناوبری Navbar

نوار ناوبری Navbar

مؤلفه های چیدمان در Bootstrap

نوار ناوبری یکی از ویژگی های برجسته سایت های بوت استرپ می باشد. نوارهای Navbar به مؤلفه های ‘meta’ پاسخگو هستند و به عنوان عناوین ناوبری (navigation headers) برای برنامه یا سایت عمل می کنند. Navbar ها در view های تلفن همراه در هم فرو می روند و در صورت افزایش عرض صفحه نمایش ، افقی می شوند. در اصل navbar شامل یک سبک بندی برای نام سایت و ناوبری اصلی می باشد.

Navbar پیش فرض

برای ایجاد یک نوار navbar پیش فرض به صورت زیر عمل می کنیم :

• کلاس های navbar . و navbar-default. را به تگ <nav> اضافه می کنیم.
• نقش role = “navigation” را عنصر بالا برای کمک به دسترسی پذیری ، اضافه می کنیم.
• یک کلاس هدر navbar-header. را به عنصر <div> اضافه می کنیم. یک عنصر <a> با کلاس navbar-brand. را وارد می کنیم. این کار موجب نمایش متن با اندازه کمی بزرگ تر می شود.
• برای اضافه کردن لینک ها به navbar ، به سادگی یک لیست غیر ترتیبی با کلاس های nav. و navbar-nav. اضافه می کنیم.

مثال زیر نحوه انجام مراحل فوق را نشان می دهد :

<nav class = "navbar navbar-default" 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 پاسخگو

برای افزودن ویژگی های پاسخگو بودن (responsive) به نوار navbar ، محتواهایی که می خواهیم فرو رفته باشند ، باید در تگ <div> با کلاس های collapse. و navbar-collapse. قرار دهیم. ماهیت فرو رفتگی با یک کلید که دارای کلاس navbar-toggle . است ، راه اندازی می شود و سپس دو عنصر داده را می گیرد. اولین عنصر داده ، data-toggle ، برای این است که به جاوا اسکریپت بگوییم چه کاری با کلید انجام می شود ، و عنصر داده دوم ، data-target ، نشان می دهد که کدام عنصر تغییر می کند. سپس با یک کلاس icon-bar. ، چیزی را که تمایل داریم با کلید hambutger فراخوانی کنیم ، ایجاد می کنیم. این کار عناصری را که در <nav-collapse <div. هستند ، تغییر وضعیت می دهد. برای کار کردن این ویژگی ، باید پلاگین Bootstrap Collapse Plugin را نصب کنیم.

مثال زیر ، نحوه انجام این کار را نشان می دهد :

<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 = "#">TutorialsPoint</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>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

فرم ها در Navbar

به جای استفاده از فرم های مبتنی بر کلاس پیش فرض (همان طور که در مقاله فرم های Bootstrap گفته شده است ) ، از فرم هایی که در نوار navbar هستند ، از کلاس navbar-form. استفاده می کنیم. این کار تضمین می کند که همترازی عمودی مناسب  فرم و رفتار فرورفتگی در صفحه نمایش های باریک انجام می شود. از گزینه های همترازی (در مقاله همترازی مؤلفه ها توضیح داده شده است) استفاده می کنیم تا تصمیم بگیریم که فم ها در کجای محتوای navbar قرار گیرند.

مثال زیر نحوه انجام این کار را نشان می دهد :

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <form class = "navbar-form navbar-left" role = "search">
         
         <div class = "form-group">
            <input type = "text" class = "form-control" placeholder = "Search">
         </div>
         <button type = "submit" class = "btn btn-default">Submit</button>
         
      </form>    
   </div>
   
</nav>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

کلیدها در Navbar

ما می توانیم کلیدها را با استفاده از کلاس navbar-btn. به عناصر <button> که در بخش <form> ذخیره نمی شوند ، به طور عمودی در ناحیه مرکزی navbar قرار دهیم. navbar-btn. را می توان در عناصر <a> و <input> استفاده نمود.

از کلاس navbar-btn. و کلاس های کلید استاندارد در عناصر <a> در داخل کلاس navbar-nav. استفاده نکنید.

مثال زیر نحوه افزودن کلید به navbar را نشان می دهد :

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <form class = "navbar-form navbar-left" role = "search">
         
         <div class = "form-group">
            <input type = "text" class = "form-control" placeholder = "Search">
         </div>
			
         <button type = "submit" class = "btn btn-default">Submit Button</button>
         
      </form>  
		
      <button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
   </div>
   
</nav>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

متن در Navbar

برای قرار دادن رشته های متنی در یک عنصر از کلاس navbar-text. استفاده می کنیم. برای این کار ، معمولاً از تگ <p> برای برجسته سازی و رنگ مناسب استفاده می شود. مثال زیر نحوه انجام این کار را نشان می دهد:

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <p class = "navbar-text">Signed in as Thomas</p>
   </div>
   
</nav>

خروجی قطعه کد فوق به صورت زیر می باشد :

لینک های Non-nav

اگر بخواهیم از لینک های استاندارد که در مؤلفه های ناوبری navbar منظم قرار ندارند ، استفاده کنیم ، در این صورت از کلاس navbar-link. استفاده می کنیم تا رنگ های مناسب برای گزینه های پیش فرض و navbar معکوس اضافه شود ، همان طور که در مثال زیر نشان داده شده است :

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <p class = "navbar-text navbar-right">
         Signed in as 
         <a href = "#" class = "navbar-link">Thomas</a>
      </p>
   </div>
   
</nav>

خروجی قطعه کد فوق به صورت زیر می باشد :

تنظیم مؤلفه

ما می توانیم مؤلفه هایی مانند لینک ها ، فرم ها ، کلیدها یا متن را به سمت چپ یا راست در یک نوار navbar با استفاده از کلاس های کاربردی navbar-left. یا navbar-right. همتراز کنیم. هر دو این کلاس ها ، یک شناور CSS را در جهت مشخص شده اضافه می کنند. مثال زیر نحوه انجام این کار را نشان می دهد :

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

خروجی قطعه کد فوق ، به صورت زیر می باشد :

ثابت کردن navbar در بالای صفحه

موقعیت Navbar  بوت استرپ می تواند به صورت داینامیک باشد. به طور پیش فرض ، navbar ، یک عنصر سطح بلوکی است که موقعیت خود را بر اساس قرار گرفتنش در HTML دریافت می کند. با چند کلاس کمکی ، می توانیم آن را در بالا یا پایین صفحه قرار دهیم ، یا می توانیم آن را با صفحه پیمایش کنیم.

اگر بخواهیم نوار navbar را به بالا متصل کنیم ، کلاس navbar-fixed-top. را به کلاس navbar اضافه می کنیم. مثال زیر نحوه انجام این را نشان می دهد :

برای جلوگیری از نشستن navbar بر روی محتواهای دیگر در بدنه صفحه ، حداقل 50 پیکسل حاشیه به تگ <body> اضافه می کنیم یا سایر مقادیر موردنظر خود را آزمایش می کنیم.

<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 در پایین صفحه نمایش

اگر بخواهیم نوار navbar را در پایین صفحه ثابت کنیم ، کلاس navbar-fixed-bottom. را به کلاس navbar. اضافه می کنیم. مثال زیر نحوه انجام این کار را نشان می دهد :

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

خروجی قطعه کد فوق ، به صورت زیر می باشد :

Navbar ثابت استاتیک در بالای صفحه

برای ایجاد یک نوار navbar که با صفحه حرکت می کند ، کلاس navbar-static-top. را اضافه می کنیم. این کلاس نیاز به اضافه کردن padding به بخش <body> ندارد.

مثال زیر نحوه انجام این کار را نشان می دهد :

<nav class = "navbar navbar-default navbar-static-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 معکوس

برای ایجاد یک نوار navbar معکوس با پس زمینه سیاه و سفید و متن سفید ، به راحتی کلاس navbar-inverse. را به کلاس .navbar اضافه می کنیم ، همان طور که در مثال زیر نشان داده شده است :

برای جلوگیری از نشستن navbar بر روی محتوای دیگر در بدنه صفحه ، حداقل 50 پیکسل حاشیه به تگ <body> اضافه می کنیم یا مقادیر مورد نظر خود را آزمایش می کنیم.

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

خروجی قطعه کد فوق ، به صورت زیر می باشد :