Skip to content

Instantly share code, notes, and snippets.

@tacitochaves

tacitochaves/tabs.html

Last active August 29, 2015 14:18
Show Gist options
  • Save tacitochaves/b656fa5e37b2ef9192bd to your computer and use it in GitHub Desktop.
Save tacitochaves/b656fa5e37b2ef9192bd to your computer and use it in GitHub Desktop.
Download ZIP
Tabs an bootstrap
Raw
tabs.html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>Tabs an Bootstrap</title>
</head>
<body>
<div class="container">
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#lancar" data-toggle="tab">Lançar</a></li>
<li><a href="#visualizar" data-toggle="tab">Visualizar</a></li>
<li><a href="#pagar" data-toggle="tab">Pagar</a></li>
<li><a href="#consolidar" data-toggle="tab">Consolidar</a></li>
<li><a href="#relatorio" data-toggle="tab">Relatório</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="lancar">
<h1>Lançamento de notas</h1>
</div>
<div class="tab-pane" id="visualizar">
<h1>Visualizar as notas lançadas</h1>
</div>
<div class="tab-pane" id="pagar">
<h1>Pagamento de notas</h1>
</div>
<div class="tab-pane" id="consolidar">
<h1>Consolidação de notas</h1>
</div>
<div class="tab-pane" id="relatorio">
<h1>Relatório de notas</h1>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>
</div> <!-- container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment