Tutorials Bootstrap Bootstrap Navigation Tabs with Dropdown Menu Example

Bootstrap Navigation Tabs with Dropdown Menu Example

<!DOCTYPE html> 
<html lang="en">  
<head>    
<title>My first Bootstrap page </title>    
<meta name="viewport" content="width=device-width, initialscale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="JS/bootstrap.min.js"></script> 
</head>
<body>
	<div class="container">
	<h2>Tabs-dropdown</h2>             
	  <ul class="nav nav-tabs">
	    <li class="active"><a href="#">Home</a></li>
	   <li><a href="#">Android</a></li>
	    <li><a href="#">Bootstrap</a></li>
	    <li><a href="#">About</a></li>        
		<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			More <span class="glyphicon glyphicon-option-vertical"></span></a>
		<ul class = "dropdown-menu">
		<li><a href="#">HTML </a></li>
		<li><a href="#">Java Script </a></li>
		<li><a href="#">Xamarine </a></li>	
		</ul>
		</li>    
	  </ul>
	</div>
</body>
</html>

The output for the above code,
Bootstrap Navigation Tabs with Dropdown Menu

Badges

These are indicators to show count of the items you want to highlight. A simple example would be showing the number of unread e-mails or messages. Example, suppose we wanted to display the number of new contents display for each section in our previous example. Add the below code,

<li><a href="#">Android <span class="badge">5</span></a></li>

The output looks like in following way,

Bootstrap Navigation Tabs with Dropdown Menu Badge

Total
0
Shares
Leave a Reply

Your email address will not be published.

Previous Post

How to Create Toolbars in Bootstrap3

Next Post

How to Save Android Application’s Activity State

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All