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