Pages

Tuesday, May 12, 2015

#deepstutorials:Horizontal tab navigation in bootstrap


The following code creates a horizontal tab navigation using bootstrap as shown below

<html lang="en">
<head>
  <title>Bootstrap Example for horizontal tab navigation</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>horizontal Navigation Pills</h2>
<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Women</a></li>
    <li><a href="#">Men</a></li>
    <li><a href="#">kids</a></li>        
  </ul>
</div>
</body>
</html>

horizontal Navigation in bootstrap.Focus is on Home tab as we have set active to class attribute of "home" anchor

Posted by at No comments:
Labels: , , , ,

#deepstutorials:Bootstrap breadcrumb example

The following code shows example to use bootstrap "breadcrumbs" to create a wizard like workflow.


<html lang="en">
<head>
  <title>Bootstrap Example for breadcrumb</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <p>The .breadcrumb class indicates the current page's location within a navigational hierarchy:</p>                  
  <ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Clothing</a></li>
    <li><a href="#">Women</a></li>
    <li class="active">Hand bags</li>        
  </ol>
</body>
</html>
The .breadcrumb class indicates the current page's location within a navigational hierarchy.Curently,we are at "hand bags" page whose label is in "grey color".The .active class indicates that it is on the current page.
  1. Home
  2. Clothing
  3. Women
  4. Hand bags
Posted by at No comments:
Labels: , , ,

Saturday, May 9, 2015

#deepstutorials:Writing tooltips in bootstrap

The following code shows example to use bootstrap tooltip.

<html lang="en">
<head>
  <title>Bootstrap Example for tooltip</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <ul class="list-inline">
    <li><a href="#" data-toggle="tooltip" data-placement="top" title="tooltip on top!">Tooltip Top</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="tooltip on bottom!">Tooltip Bottom</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="left" title="tooltip on left!">Tooltip Left</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="right" title="tooltip on right!">Tooltip Right</a></li>
  </ul>
</body>
</html>

Bootstrap example for tooltip

Posted by at No comments:
Labels: , , ,
Subscribe to: Posts (Atom)