آموزش Navbar در بوت استرپ

4 سال پیش

امتیاز دهید post

آموزش Navbar در بوت استرپ

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش Navbar در بوت استرپ خواهیم پرداخت.

Navbar یکی از ویژگی های برجسته سایت های بوت استرپ است. Navbars اجزای متا پاسخگو هستند که به عنوان هدرهای ناوبری برای برنامه یا سایت شما عمل می کنند. Navbar در نمای موبایل فرو می ریزند و با افزایش عرض نمای نمایش موجود ، افقی می شوند. در هسته خود ، نوار ورودی شامل یک ظاهر طراحی شده برای نام سایت ها و پیمایش اساسی است.

Navbar پیش فرض

برای ایجاد نوار پیش فرض –

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

مثال زیر این را نشان می دهد –

&lt;nav class = "navbar navbar-default" role = "navigation"&gt;

   &lt;div class = "navbar-header"&gt;
      &lt;a class = "navbar-brand" href = "#"&gt;TutorialsPoint&lt;/a&gt;
   &lt;/div&gt;
   
   &lt;div&gt;
      &lt;ul class = "nav navbar-nav"&gt;
         &lt;li class = "active"&gt;&lt;a href = "#"&gt;iOS&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href = "#"&gt;SVN&lt;/a&gt;&lt;/li&gt;
            
         &lt;li class = "dropdown"&gt;
            &lt;a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"&gt;
               Java 
               &lt;b class = "caret"&gt;&lt;/b&gt;
            &lt;/a&gt;
            
            &lt;ul class = "dropdown-menu"&gt;
               &lt;li&gt;&lt;a href = "#"&gt;jmeter&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;EJB&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;Jasper Report&lt;/a&gt;&lt;/li&gt;
               
               &lt;li class = "divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
               
               &lt;li class = "divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
         &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/div&gt;
&lt;/nav&gt;

<a class = "navbar-brand" href = "#">TutorialsPoint</a>

</div>

<div>

Java

</a>

<li><a href = "#">jmeter</a></li>

<li><a href = "#">Jasper Report</a></li>

<li><a href = "#">Separated link</a></li>

<li><a href = "#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

</nav>

Navbar پاسخگو

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

مثال زیر این را نشان می دهد –

&lt;nav class = "navbar navbar-default" role = "navigation"&gt;
   
   &lt;div class = "navbar-header"&gt;
      &lt;button type = "button" class = "navbar-toggle" 
         data-toggle = "collapse" data-target = "#example-navbar-collapse"&gt;
         &lt;span class = "sr-only"&gt;Toggle navigation&lt;/span&gt;
         &lt;span class = "icon-bar"&gt;&lt;/span&gt;
         &lt;span class = "icon-bar"&gt;&lt;/span&gt;
         &lt;span class = "icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
        
      &lt;a class = "navbar-brand" href = "#"&gt;TutorialsPoint&lt;/a&gt;
   &lt;/div&gt;
   
   &lt;div class = "collapse navbar-collapse" id = "example-navbar-collapse"&gt;
    
      &lt;ul class = "nav navbar-nav"&gt;
         &lt;li class = "active"&gt;&lt;a href = "#"&gt;iOS&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href = "#"&gt;SVN&lt;/a&gt;&lt;/li&gt;
            
         &lt;li class = "dropdown"&gt;
            &lt;a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"&gt;
               Java 
               &lt;b class = "caret"&gt;&lt;/b&gt;
            &lt;/a&gt;
            
            &lt;ul class = "dropdown-menu"&gt;
               &lt;li&gt;&lt;a href = "#"&gt;jmeter&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;EJB&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;Jasper Report&lt;/a&gt;&lt;/li&gt;
               
               &lt;li class = "divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
               
               &lt;li class = "divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
         &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/div&gt;
&lt;/nav&gt;

<button type = "button" class = "navbar-toggle"

data-toggle = "collapse" data-target = "#example-navbar-collapse">

<span class = "sr-only">Toggle navigation</span>

</button>

<a class = "navbar-brand" href = "#">TutorialsPoint</a>

</div>

Java

</a>

<li><a href = "#">jmeter</a></li>

<li><a href = "#">Jasper Report</a></li>

<li><a href = "#">Separated link</a></li>

<li><a href = "#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

</nav>

فرم ها در Navbar

به جای استفاده از فرمهای پیش فرض مبتنی بر کلاس از Chapter Bootstrap Forms ، فرمهایی که در Navbar وجود دارند ، از کلاس .navbar-form استفاده کنید. این تضمین می کند که ترازبندی عمودی مناسب فرم و رفتار فروپاشیده در نمای دید باریک است. برای تعیین محل سکونت در محتوای navbar ، از گزینه های هم ترازی استفاده کنید (توضیح داده شده در بخش هم ترازی کامپوننت).

مثال زیر این را نشان می دهد –

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

<a class = "navbar-brand" href = "#">TutorialsPoint</a>

</div>

<div>

</div>

<button type = "submit" class = "btn btn-default">Submit</button>

</form>

</div>

</nav>

دکمه ها در Navbar

می توانید دکمه ها را با استفاده از کلاس .navbar-btn به عناصر <button> که در <form> نیستند اضافه کنید تا آنها را به صورت عمودی در نوار nav قرار دهد. .navbar-btn می تواند در عناصر <a> و <input> استفاده شود.

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

مثال زیر این را نشان می دهد –

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

<a class = "navbar-brand" href = "#">TutorialsPoint</a>

</div>

<div>

</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> برای هدایت و رنگ مناسب استفاده می شود. مثال زیر این را نشان می دهد –

&lt;nav class = "navbar navbar-default" role = "navigation"&gt;
   &lt;div class = "navbar-header"&gt;
      &lt;a class = "navbar-brand" href = "#"&gt;TutorialsPoint&lt;/a&gt;
   &lt;/div&gt;
   
   &lt;div&gt;
      &lt;p class = "navbar-text"&gt;Signed in as Thomas&lt;/p&gt;
   &lt;/div&gt;
&lt;/nav&gt;

<a class = "navbar-brand" href = "#">TutorialsPoint</a>

</div>

<div>

<p class = "navbar-text">Signed in as Thomas</p>

</div>

</nav>

لینک های غیر ناوبری

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

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

<a class = "navbar-brand" href = "#">TutorialsPoint</a>

</div>

<div>

Signed in as

<a href = "#" class = "navbar-link">Thomas</a>

</p>

</div>

</nav>

تراز کامپوننت

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

&lt;nav class = "navbar navbar-default" role = "navigation"&gt;
   
   &lt;div class = "navbar-header"&gt;
      &lt;a class = "navbar-brand" href = "#"&gt;TutorialsPoint&lt;/a&gt;
   &lt;/div&gt;
   
   &lt;div&gt;
      
      &lt;!--Left Align--&gt;
      &lt;ul class = "nav navbar-nav navbar-left"&gt;
         &lt;li class = "dropdown"&gt;
            &lt;a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"&gt;
               Java 
               &lt;b class = "caret"&gt;&lt;/b&gt;
            &lt;/a&gt;
            
            &lt;ul class = "dropdown-menu"&gt;
               &lt;li&gt;&lt;a href = "#"&gt;jmeter&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;EJB&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;Jasper Report&lt;/a&gt;&lt;/li&gt;
               
               &lt;li class = "divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
               
               &lt;li class = "divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            
         &lt;/li&gt;
      &lt;/ul&gt;
      
      &lt;form class = "navbar-form navbar-left" role = "search"&gt;
         &lt;button type = "submit" class = "btn btn-default"&gt;Left align-Submit Button&lt;/button&gt;
      &lt;/form&gt; 
      
      &lt;p class = "navbar-text navbar-left"&gt;Left align-Text&lt;/p&gt;
      
      &lt;!--Right Align--&gt;
      &lt;ul class = "nav navbar-nav navbar-right"&gt;
         &lt;li class = "dropdown"&gt;
            &lt;a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"&gt;
               Java 
               &lt;b class = "caret"&gt;&lt;/b&gt;
            &lt;/a&gt;
            
            &lt;ul class = "dropdown-menu"&gt;
               &lt;li&gt;&lt;a href = "#"&gt;jmeter&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;EJB&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;Jasper Report&lt;/a&gt;&lt;/li&gt;
               
               &lt;li class = "divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
               
               &lt;li class = "divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            
         &lt;/li&gt;
      &lt;/ul&gt;
      
      &lt;form class = "navbar-form navbar-right" role = "search"&gt;
         &lt;button type = "submit" class = "btn btn-default"&gt;
            Right align-Submit Button
         &lt;/button&gt;
      &lt;/form&gt; 
        
      &lt;p class = "navbar-text navbar-right"&gt;Right align-Text&lt;/p&gt;
      
   &lt;/div&gt;
&lt;/nav&gt;

<a class = "navbar-brand" href = "#">TutorialsPoint</a>

</div>

<div>

Java

</a>

<li><a href = "#">jmeter</a></li>

<li><a href = "#">Jasper Report</a></li>

<li><a href = "#">Separated link</a></li>

<li><a href = "#">One more separated link</a></li>

</ul>

</li>

</ul>

<button type = "submit" class = "btn btn-default">Left align-Submit Button</button>

</form>

<p class = "navbar-text navbar-left">Left align-Text</p>

Java

</a>

<li><a href = "#">jmeter</a></li>

<li><a href = "#">Jasper Report</a></li>

<li><a href = "#">Separated link</a></li>

<li><a href = "#">One more separated link</a></li>

</ul>

</li>

</ul>

Right align-Submit Button

</button>

</form>

<p class = "navbar-text navbar-right">Right align-Text</p>

</div>

</nav>

Fixed to Top

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

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

–

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

&lt;nav class = "navbar navbar-default navbar-fixed-top" role = "navigation"&gt;
   
   &lt;div class = "navbar-header"&gt;
      &lt;a class = "navbar-brand" href = "#"&gt;TutorialsPoint&lt;/a&gt;
   &lt;/div&gt;
   
   &lt;div&gt;
      &lt;ul class = "nav navbar-nav"&gt;
         &lt;li class = "active"&gt;&lt;a href = "#"&gt;iOS&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href = "#"&gt;SVN&lt;/a&gt;&lt;/li&gt;
         
         &lt;li class = "dropdown"&gt;
            &lt;a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"&gt;
               Java
               &lt;b class = "caret"&gt;&lt;/b&gt;
            &lt;/a&gt;
            
            &lt;ul class = "dropdown-menu"&gt;
               &lt;li&gt;&lt;a href = "#"&gt;jmeter&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;EJB&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;Jasper Report&lt;/a&gt;&lt;/li&gt;
               
               &lt;li class = "divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
               
               &lt;li class = "divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            
         &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/div&gt;
   
&lt;/nav&gt;

<a class = "navbar-brand" href = "#">TutorialsPoint</a>

</div>

<div>

Java

</a>

<li><a href = "#">jmeter</a></li>

<li><a href = "#">Jasper Report</a></li>

<li><a href = "#">Separated link</a></li>

<li><a href = "#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

</nav>

Fixed to Bottom

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

&lt;nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation"&gt;
   
   &lt;div class = "navbar-header"&gt;
      &lt;a class = "navbar-brand" href = "#"&gt;TutorialsPoint&lt;/a&gt;
   &lt;/div&gt;
   
   &lt;div&gt;
      &lt;ul class = "nav navbar-nav"&gt;
         &lt;li class = "active"&gt;&lt;a href = "#"&gt;iOS&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;SVN&lt;/a&gt;&lt;/li&gt;
         
         &lt;li class = "dropdown"&gt;
            &lt;a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"&gt;
               Java
               &lt;b class ="caret"&gt;&lt;/b&gt;
            &lt;/a&gt;
            
            &lt;ul class = "dropdown-menu"&gt;
               &lt;li&gt;&lt;a href = "#"&gt;jmeter&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;EJB&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;Jasper Report&lt;/a&gt;&lt;/li&gt;
               
               &lt;li class = "divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
               
               &lt;li class = "divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            
         &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/div&gt;
&lt;/nav&gt;

<a class = "navbar-brand" href = "#">TutorialsPoint</a>

</div>

<div>

Java

</a>

<li><a href = "#">jmeter</a></li>

<li><a href = "#">Jasper Report</a></li>

<li><a href = "#">Separated link</a></li>

<li><a href = "#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

</nav>

استاتیک بالا

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

&lt;nav class = "navbar navbar-default navbar-static-top" role = "navigation"&gt;
   
   &lt;div class = "navbar-header"&gt;
      &lt;a class = "navbar-brand" href = "#"&gt;TutorialsPoint&lt;/a&gt;
   &lt;/div&gt;
   
   &lt;div&gt;
      &lt;ul class = "nav navbar-nav"&gt;
         &lt;li class = "active"&gt;&lt;a href = "#"&gt;iOS&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href = "#"&gt;SVN&lt;/a&gt;&lt;/li&gt;
         
         &lt;li class = "dropdown"&gt;
            &lt;a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"&gt;
               Java
               &lt;b class = "caret"&gt;&lt;/b&gt;
            &lt;/a&gt;
                
            &lt;ul class = "dropdown-menu"&gt;
               &lt;li&gt;&lt;a href = "#"&gt;jmeter&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;EJB&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;Jasper Report&lt;/a&gt;&lt;/li&gt;
               
               &lt;li class = "divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
               
               &lt;li class = "divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            
         &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/div&gt;
&lt;/nav&gt;

<a class = "navbar-brand" href = "#">TutorialsPoint</a>

</div>

<div>

Java

</a>

<li><a href = "#">jmeter</a></li>

<li><a href = "#">Jasper Report</a></li>

<li><a href = "#">Separated link</a></li>

<li><a href = "#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

</nav>

Navbar معکوس

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

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

&lt;nav class = "navbar navbar-inverse" role = "navigation"&gt;
   
   &lt;div class = "navbar-header"&gt;
      &lt;a class = "navbar-brand" href = "#"&gt;TutorialsPoint&lt;/a&gt;
   &lt;/div&gt;
   
   &lt;div&gt;
      &lt;ul class = "nav navbar-nav"&gt;
         &lt;li class = "active"&gt;&lt;a href = "#"&gt;iOS&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href = "#"&gt;SVN&lt;/a&gt;&lt;/li&gt;
         &lt;li class = "dropdown"&gt;
            &lt;a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"&gt;
               Java
               &lt;b class = "caret"&gt;&lt;/b&gt;
            &lt;/a&gt;
            
            &lt;ul class = "dropdown-menu"&gt;
               &lt;li&gt;&lt;a href = "#"&gt;jmeter&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;EJB&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;Jasper Report&lt;/a&gt;&lt;/li&gt;
               
               &lt;li class = "divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
               
               &lt;li class = "divider"&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href = "#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            
         &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/div&gt;
&lt;/nav&gt;

<a class = "navbar-brand" href = "#">TutorialsPoint</a>

</div>

<div>

Java

</a>

<li><a href = "#">jmeter</a></li>

<li><a href = "#">Jasper Report</a></li>

<li><a href = "#">Separated link</a></li>

<li><a href = "#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

</nav>

منبع.

لیست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

برچسب ها : آموزش بوت استرپ آموزش طراحی وب سایت

نویسنده مطلب saber

آموزش Navbar در بوت استرپ

آموزش Navbar در بوت استرپ

Navbar پیش فرض

فرم ها در Navbar

دکمه ها در Navbar

متن در Navbar

لینک های غیر ناوبری

تراز کامپوننت

Fixed to Top

Fixed to Bottom

استاتیک بالا

Navbar معکوس

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

آموزش Navbar در بوت استرپ

Navbar پیش فرض

فرم ها در Navbar

دکمه ها در Navbar

متن در Navbar

لینک های غیر ناوبری

تراز کامپوننت

Fixed to Top

Fixed to Bottom

استاتیک بالا

Navbar معکوس

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه