Created
July 5, 2015 17:07
-
-
Save MikeVelazcoMtz/555c723a33b443090e77 to your computer and use it in GitHub Desktop.
Bootstrap 3 template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<style> | |
div.body{ | |
padding-top:75px | |
} | |
</style> | |
<script src="https://code.jquery.com/jquery.min.js"></script> | |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
<meta charset="utf-8"> | |
<title>Index Page</title> | |
</head> | |
<body> | |
<!-- start nav --> | |
<nav class="navbar navbar-default navbar-fixed-top"> | |
<div class="container"> | |
<div class="navbar-header"> | |
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> | |
<span class="sr-only">Toggle navigation</span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
</button> | |
<a class="navbar-brand" href="#">Project name</a> | |
</div> | |
<div id="navbar" class="navbar-collapse collapse"> | |
<ul class="nav navbar-nav"> | |
<li class="active"><a href="#">Home</a></li> | |
<li><a href="#contact">Contact</a></li> | |
<li class="dropdown"> | |
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> | |
<ul class="dropdown-menu"> | |
<li><a href="#">Action</a></li> | |
<li><a href="#">Another action</a></li> | |
<li><a href="#">Something else here</a></li> | |
<li role="separator" class="divider"></li> | |
<li class="dropdown-header">Nav header</li> | |
<li><a href="#">Separated link</a></li> | |
<li><a href="#">One more separated link</a></li> | |
</ul> | |
</li> | |
</ul> | |
<ul class="nav navbar-nav navbar-right"> | |
<li><a href="../navbar/">Default</a></li> | |
<li><a href="../navbar-static-top/">Static top</a></li> | |
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li> | |
</ul> | |
</div><!--/.nav-collapse --> | |
</div> | |
</nav> | |
<!-- end nav --> | |
<!-- start body --> | |
<div class="container body"> | |
<div class="col-md-12"> | |
<table class="table"> | |
<thead> | |
<tr> | |
<th>uno</th> | |
<th>dos</th> | |
<th>tres</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>Helo world</td> | |
<td>Helo world</td> | |
<td>Helo world</td> | |
</tr> | |
<tr> | |
<td>Helo world</td> | |
<td>Helo world</td> | |
<td>Helo world</td> | |
</tr> | |
<tr> | |
<td>Helo world</td> | |
<td>Helo world</td> | |
<td>Helo world</td> | |
</tr> | |
</tbody> | |
</table> | |
</div><!-- end col-md-12 --> | |
<!-- start form example --> | |
<div class="col-md-12"> | |
<h3>Form example</h3> | |
<form> | |
<div class="form-group"> | |
<label for="exampleInputEmail1">Email address</label> | |
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> | |
</div> | |
<div class="form-group"> | |
<label for="exampleInputPassword1">Password</label> | |
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> | |
</div> | |
<div class="form-group"> | |
<label for="exampleInputFile">File input</label> | |
<input type="file" id="exampleInputFile"> | |
<p class="help-block">Example block-level help text here.</p> | |
</div> | |
<div class="checkbox"> | |
<label> | |
<input type="checkbox"> Check me out | |
</label> | |
</div> | |
<button type="submit" class="btn btn-default">Submit</button> | |
</form> | |
</div><!-- end form example --> | |
<!-- start tabs example --> | |
<div class="col-md-12"> | |
<!-- Nav tabs --> | |
<ul class="nav nav-tabs" role="tablist"> | |
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> | |
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> | |
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> | |
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> | |
</ul> | |
<!-- Tab panes --> | |
<div class="tab-content"> | |
<div role="tabpanel" class="tab-pane active" id="home">...</div> | |
<div role="tabpanel" class="tab-pane" id="profile">...</div> | |
<div role="tabpanel" class="tab-pane" id="messages">...</div> | |
<div role="tabpanel" class="tab-pane" id="settings">...</div> | |
</div> | |
</div> | |
<!-- end tabs example --> | |
</div><!-- end body --> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment