Thema: Navbars and Dropdowns einsetzen


Hinweis: Die obere und untere Seiten sind jeweils der Code in HTML und das Layout im Browser.

1. Code für Navbar


<nav class='navbar navbar-expand-lg navbar-light bg-light'>
  <a class='navbar-brand' href='#'>Navbar</a>
 <ul class='nav navbar-nav'>
   <li class='nav-item active'>
     <a class='nav-link' href='#'>Home <span class='fa fa-home'></span></a>
   </li>
   <li class='nav-item'>
     <a class='nav-link' href='#'>Features</a>
   </li>
   <li class='nav-item'>
     <a class='nav-link' href='#'>Pricing</a>
   </li>
 </ul>
</nav>

1. Ausgabe für Navbar


2. Code für Navbar with Dropdown


<nav class='navbar navbar-expand-lg navbar-light bg-light'>
  <a class='navbar-brand' href='#'>Navbar</a>
 <ul class='nav navbar-nav'>
   <li class='nav-item active'>
     <a class='nav-link' href='#'>Home <span class='fa fa-home'></span></a>
   </li>
   <li class='nav-item'>
     <a class='nav-link' href='#'>Features</a>
   </li>
   <li class='nav-item'>
     <a class='nav-link' href='#'>Pricing</a>
   </li>
	<li class='dropdown'>
	   <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
	       <i class='fa fa-user fa-fw'></i> Dropdown(Users) <b class='caret'></b>
	   </a>
	   <ul class='dropdown-menu dropdown-user'>
	       <li><a href='#'><i class='fa fa-user fa-fw'></i> User Profile</a>
	       </li>
	       <li><a href='#'><i class='fa fa-gear fa-fw'></i> Settings</a>
	       </li>
	       <li class='divider'></li>
	       <li><a href='login.html'><i class='fa fa-sign-out fa-fw'></i> Logout</a>
	       </li>
	   </ul>
	 </li>
 </ul>
</nav>

2. Ausgabe für Navbar with Dropdown


3. Code für Navbar with Dropdown


<nav class='navbar navbar-expand-lg navbar-light bg-light'>
  <a class='navbar-brand' href='#'>Navbar</a>
 <ul class='nav navbar-nav'>
   <li class='nav-item active'>
     <a class='nav-link' href='#'>Home <span class='fa fa-home'></span></a>
   </li>
   <li class='nav-item'>
     <a class='nav-link' href='#'>Features</a>
   </li>
   <li class='nav-item'>
     <a class='nav-link' href='#'>Pricing</a>
   </li>
	<li class='dropdown'>
	   <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
	       <i class='fa fa-user fa-fw'></i> Dropdown(Users) <b class='caret'></b>
	   </a>
	   <ul class='dropdown-menu dropdown-user'>
	       <li><a href='#'><i class='fa fa-user fa-fw'></i> User Profile</a>
	       </li>
	       <li><a href='#'><i class='fa fa-gear fa-fw'></i> Settings</a>
	       </li>
	       <li class='divider'></li>
	       <li><a href='login.html'><i class='fa fa-sign-out fa-fw'></i> Logout</a>
	       </li>
	   </ul>
	 </li>
 </ul>
 <form class='form-inline'>
	 <div class='input-group'>
		    <input id='btn-input' type='text' class='form-control input-sm'
		           placeholder='Type here...'/>
	        <span class='input-group-btn'>
	            <button class='btn btn-default btn-sm' id='btn-chat'>
	                Search
	            </button>
	        </span>
		</div>
  </form>
</nav>

3. Ausgabe für Navbar with Dropdown