If you dont like the style of the default navigation bar Bootstrap provides an

If you dont like the style of the default navigation

This preview shows page 22 - 28 out of 33 pages.

If you don't like the style of the default navigation bar, Bootstrap provides an alternative, black navbar: Change the .navbar-default class into .navbar-inverse : Navigation Bar with Dropdown: Navigation bars can also hold dropdown menus. The following example adds a dropdown menu for the "Page 1" button: Code:
Image of page 22
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav> Output: Collapsing the Navigation Bar: The navigation bar takes up too much space on a small screen. We should hide the navigation bar; and only show it when it is needed. In the following example the navigation bar is replaced by a button in the top right corner. Only when the button is clicked, the navigation bar will be displayed: Code: <nav class="navbar navbar-inverse"> <div class="container-fluid">
Image of page 23
<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav> <div class="container"> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> </div> Output:
Image of page 24
Nav Pills: The class .nav nav –pills creates navigation pills.
Image of page 25
Code: <div class="container"> <h2>Tabs</h2> <p>The .nav-pills class is used to create navigation pills:</p> <ul class="nav nav-pills" role="tablist"> <li class="active"><a href="#">Home</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">About</a></li> </ul> </div> Output: Creating a Jumbotron: A jumbotron indicates a big box for calling extra attention to some special content or information. A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it. Use a <div> element with class .jumbotron to create a jumbotron:
Image of page 26
Jumbotron inside Container: Place the jumbotron inside the <div class="container"> if you want the jumbotron to NOT extend to the edge of the screen: Code: <div class="container"> <div class="jumbotron"> <h1>Bootstrap Tutorial</h1>
Image of page 27
Image of page 28

You've reached the end of your free preview.

Want to read all 33 pages?

  • Spring '16
  • Haroon yousaf
  • div class=

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

Stuck? We have tutors online 24/7 who can help you get unstuck.
A+ icon
Ask Expert Tutors You can ask You can ask You can ask (will expire )
Answers in as fast as 15 minutes