Atomicon
Bij het maken van een website en/of applicatie is Bootstrap meestal mijn keuze. Om snel wat te kunnen presenteren heb ik de volgende boilerplate geschreven. Onderstaande HTML code maakt gebruik van CDN. Dus geen lokale bestanden. De template hieronder maakt gebruik van: Bootstrap, Font awesome & jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Title -->
<title>Bootstrap CDN Boilerplate</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- Optional theme (flatly) -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" />
<!-- Font awesome -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Custom CSS -->
<style>
body { margin-top: 60px; }
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main">
<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="#">Bootstrap CDN Boilerplate</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-main">
<ul class="nav navbar-nav">
<li>
<a href="#home">Home</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Bootstrap CDN Boilerplate</h1>
<p>This is a Bootstrap 3.x CDN Boilerplate, it uses <strong>NO</strong> local files</p>
<p>Everything is loaded via Content delivery network (CDN)</p>
</div><!-- /.col-x -->
</div><!-- /.row -->
</div><!-- /.container -->
</body>
</html>
