Last active
August 29, 2015 14:17
-
-
Save ncronquist/a1919e330efb5c4f550a to your computer and use it in GitHub Desktop.
Base Bootstrap page with some useful stylesheets, scripts, and classes; Comment and delete as necessary
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 lang="en"> | |
<head> | |
<title>Base Page</title> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<!-- Stylesheets --> | |
<!-- Boostrap CSS --> | |
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> | |
<!-- Local CSS --> | |
<link rel="stylesheet" type="text/css" href="ajax.css"> | |
<!-- Scripts --> | |
<!-- jQuery --> | |
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> | |
<!-- jQuery UI --> | |
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> | |
<!-- jQuery Mobile --> | |
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> | |
<!-- Boostrap JS --> | |
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> | |
<!-- Local JS --> | |
<script src="js/script.js"></script> | |
</head | |
<body> | |
<nav class="navbar navbar-default"> | |
<!-- UNCOMMENT THIS LINE TO MAKE FULL PAGE WIDTH <div class="container-fluid"> --> | |
<div class="container"> | |
<!-- Brand and toggle get grouped for better mobile display --> | |
<div class="navbar-header"> | |
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> | |
<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="#">Brand</a> | |
</div> | |
<!-- Collect the nav links, forms, and other content for toggling --> | |
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | |
<ul class="nav navbar-nav"> | |
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> | |
<li><a href="#">Link</a></li> | |
<li class="dropdown"> | |
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> | |
<ul class="dropdown-menu" role="menu"> | |
<li><a href="#">Action</a></li> | |
<li><a href="#">Another action</a></li> | |
<li><a href="#">Something else here</a></li> | |
<li class="divider"></li> | |
<li><a href="#">Separated link</a></li> | |
<li class="divider"></li> | |
<li><a href="#">One more separated link</a></li> | |
</ul> | |
</li> | |
</ul> | |
<form class="navbar-form navbar-left" role="search"> | |
<div class="form-group"> | |
<input type="text" class="form-control" placeholder="Search"> | |
</div> | |
<button type="submit" class="btn btn-default">Submit</button> | |
</form> | |
<ul class="nav navbar-nav navbar-right"> | |
<li><a href="#">Link</a></li> | |
<li class="dropdown"> | |
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> | |
<ul class="dropdown-menu" role="menu"> | |
<li><a href="#">Action</a></li> | |
<li><a href="#">Another action</a></li> | |
<li><a href="#">Something else here</a></li> | |
<li class="divider"></li> | |
<li><a href="#">Separated link</a></li> | |
</ul> | |
</li> | |
</ul> | |
</div><!-- /.navbar-collapse --> | |
</div><!-- /.container-fluid --> | |
</nav> | |
<div class="container"> | |
<ol class="breadcrumb"> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">Library</a></li> | |
<li class="active">Data</li> | |
</ol> | |
<div class="jumbotron"> | |
<h1>Hello, world!</h1> | |
<p>...</p> | |
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> | |
</div> | |
<div class="page-header"> | |
<h1>Example page header <small>Subtext for header</small></h1> | |
</div> | |
<div class="row"> | |
<div class="col-sm-6 col-md-4"> | |
<div class="thumbnail"> | |
<img src="http://placekitten.com/g/600/400" alt="..."> | |
<div class="caption"> | |
<h3>Thumbnail label</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius</p> | |
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="row"> | |
<!-- Standard button --> | |
<button type="button" class="btn btn-default btn-lg">Default Big</button> | |
<!-- Provides extra visual weight and identifies the primary action in a set of buttons --> | |
<button type="button" class="btn btn-primary btn-sm">Primary small</button> | |
<!-- Indicates a successful or positive action --> | |
<button type="button" class="btn btn-success">Success</button> | |
<!-- Contextual button for informational alert messages --> | |
<button type="button" class="btn btn-info">Info</button> | |
<!-- Indicates caution should be taken with this action --> | |
<button type="button" class="btn btn-warning">Warning</button> | |
<!-- Indicates a dangerous or potentially negative action --> | |
<button type="button" class="btn btn-danger" disabled="disabled">Danger disabled</button> | |
<!-- Deemphasize a button by making it look like a link while maintaining button behavior --> | |
<button type="button" class="btn btn-link">Link</button> | |
</div> | |
<div class="row"> | |
<div class="col-md-4">.col-md-4</div> | |
<div class="col-md-4">.col-md-4</div> | |
<div class="col-md-4">.col-md-4</div> | |
</div> | |
</div> <!-- end container --> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment