Skip to content

Instantly share code, notes, and snippets.

@soulhakr

soulhakr/bootstrap210-initializr.html

Last active May 10, 2022 20:06
Show Gist options
  • Save soulhakr/6004856 to your computer and use it in GitHub Desktop.
Save soulhakr/6004856 to your computer and use it in GitHub Desktop.
Download ZIP
[Bootstrap/Initializr boilerplate full (HTML5)] Fully-loaded #Bootstrap #herounit demo in self-contained #Initializr #boilerplate.
Raw
bootstrap210-initializr.html
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en-US"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en-US"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hello World</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/png" href="http://placehold.it/10x10.png/000000/ffffff&text=Cx" />
<link rel="apple-touch-icon" href="http://placehold.it/57x57.png/000000/ffffff&text=Cx" />
<link rel="apple-touch-icon" sizes="72x72" href="http://placehold.it/72x72.png/000000/ffffff&text=Cx" />
<link rel="apple-touch-icon" sizes="114x114" href="http://placehold.it/114x114.png/000000/ffffff&text=Cx" />
<!-- Bootstrap CSS <http://twitter.github.com/bootstrap/> alternate CDN -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap CSS fallback local -->
<!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<!-- Bootstrap CSS CDN -->
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
<!-- Bootstrap CSS local fallback -->
<!-- <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> -->
<!-- Local custom styles -->
<link href="css/base.css" rel="stylesheet">
<!-- CDN for Modernizr.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.1/modernizr.min.js"></script>
<!-- CDN for Respond.js <https://github.com/scottjehl/Respond> -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<!-- Modernizr/Respond local fallback -->
<script> (window.Modernizr && window.matchMedia) || document.write('<script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"><\/script>');</script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser.
<a href="http://browsehappy.com/">Upgrade your browser today</a>
or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->
<header class="navbar navbar-inverse navbar-fixed-top">
<nav class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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 class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</nav>
</div>
</header>
<section class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<header class="hero-unit">
<h1>Hello World</h1>
<p>This is a template for a simple marketing or informational website. It includes
a large callout called the hero unit and three supporting pieces of content. Use it
as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</header>
<!-- Example row of columns -->
<div class="row">
<article class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac
cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</article>
<article class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac
cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</article>
<article class="span4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac
cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</article>
</div>
<hr>
<footer>
<p class="muted">&copy; Savvy Enterprises 2012</p>
</footer>
</section> <!-- /container -->
<footer class="navbar navbar-fixed-bottom">A value I questioned...
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>');</script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<!-- Bootstrap js CDN local fallback -->
<!-- <script src="js/vendor/bootstrap.min.js"></script> -->
<script src="js/plugins.js"></script>
<script src="js/base.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment