|
|
Line 3: |
Line 3: |
| <html> | | <html> |
| | | |
− | <div class="body-wrap">
| |
− | <div class="container">
| |
− | <nav class="navbar navbar-inverse" role="navigation">
| |
− | <div class="container-fluid">
| |
− | <div class="navbar-header">
| |
− | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
| |
− | <span class="sr-only">Toggle navigation</span>
| |
− | <span class="icon-bar"></span>
| |
− | <span class="icon-bar"></span>
| |
− | <span class="icon-bar"></span>
| |
− | </button>
| |
| | | |
− | </div>
| |
− |
| |
− | <!-- Collect the nav links, forms, and other content for toggling -->
| |
− | <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
| |
− | <ul class="nav navbar-nav">
| |
− | <li class="dropdown">
| |
− | <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team <b class="caret"></b></a>
| |
− | <ul class="dropdown-menu">
| |
− | <li><a href="#">Team</a></li>
| |
− | <li><a href="#">Attributions</a></li>
| |
− | <li class="divider"></li>
| |
− | </ul>
| |
− | </li>
| |
− | <li class="dropdown">
| |
− | <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project <b class="caret"></b></a>
| |
− |
| |
− | <ul class="dropdown-menu">
| |
− | <li><a href="https://www.google.com/">Description</a></li>
| |
− | <li><a href="#">Engineering</a></li>
| |
− | <li><a href="#">Contribution</a></li>
| |
− | <li><a href="#">Implementation</a></li>
| |
− | <li><a href="#">Entrepreneurship</a></li>
| |
− | <li><a href="#">Modelling</a></li>
| |
− | <li class="divider"></li>
| |
− |
| |
− | </ul>
| |
− | </li>
| |
− | <li class="dropdown">
| |
− | <a href="#" class="dropdown-toggle" data-toggle="dropdown">Parts <b class="caret"></b></a>
| |
− | <ul class="dropdown-menu">
| |
− | <li><a href="#">Basic Parts</a></li>
| |
− | <li><a href="#">Composite Parts</a></li>
| |
− |
| |
− | <li class="divider"></li>
| |
− |
| |
− |
| |
− | </ul>
| |
− | </li>
| |
− | <li class="dropdown">
| |
− | <a href="#" class="dropdown-toggle" data-toggle="dropdown">Software </a>
| |
− |
| |
− | </li>
| |
− | <li class="dropdown">
| |
− | <a href="#" class="dropdown-toggle" data-toggle="dropdown">Human Practices <b class="caret"></b></a>
| |
− | <ul class="dropdown-menu">
| |
− | <li><a href="#">Human Practices</a></li>
| |
− | <li><a href="#">Integrated Human Practices</a></li>
| |
− | <li><a href="#">Education </a></li>
| |
− |
| |
− | <li><a href="#">Collaboration </a></li>
| |
− | <li><a href="#">Partnership</a></li>
| |
− | <li class="divider"></li>
| |
− | </ul>
| |
− | </li>
| |
− | </ul>
| |
− |
| |
− | </div>
| |
− | <!-- /.navbar-collapse -->
| |
− | </div>
| |
− | <!-- /.container-fluid -->
| |
− | </nav>
| |
− | </div>
| |
− | </div>
| |
| | | |
| <head> | | <head> |
Line 241: |
Line 167: |
| </head> | | </head> |
| <body> | | <body> |
| + | |
| + | |
| + | <h2>Responsive Navigation Bar with Icons</h2> |
| + | <p>Try to resize the browser window to see the responsive effect.</p> |
| + | |
| + | <div class="navbar"> |
| + | <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a> |
| + | <a href="#"><i class="fa fa-fw fa-search"></i> Search</a> |
| + | <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a> |
| + | <a href="#"><i class="fa fa-fw fa-user"></i> Login</a> |
| + | </div> |
| + | |
| | | |
| <section id="lab_video_slider"> | | <section id="lab_video_slider"> |
Try to resize the browser window to see the responsive effect.