Quickstart html5 template with Twitter Bootstrap 3, Bootswatch themes and RTL support
Hi everyone! Just made a responsive HTML5 basic-page template with fixed header, to help me hit the ground coding when I start a new project.
It contains Twitter Bootstrap and jQuery by default, as well as the awesome Bootswatch themes catalog and Bootstrap-RTL (For development in Arabic, Hebrew, Farsi and other RTL languages).
I'd love to make this as useful as possible, so please, don't hesitate to comment.
Hope you find this useful.
<!doctype html>
<!--
To change themes, choose a theme name on line 22 and paste it on line 23, replacing the one-before-last URL segment.
When changing themes you may need to change the top margin of the body on line 32
To make this template rtl change the following:
1. Uncomment stylesheet on line 25
2. On line 62 change class from navbar-left to navbar-right
-->
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css"/>
<!-- Bootswatch Themes: amelia, cerulean, cosmo, custom, cyborg, darkly, flatly, journal, lumen, paper, readable, sandstone, simplex, slate, spacelab, superhero, united, yeti -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.2.0+2/flatly/bootstrap.min.css"/>
<!--link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.2.0-rc2/css/bootstrap-rtl.min.css"/-->
<title></title>
</head>
<body style="margin:60px 0 0 0;">
<!-- Fixed navbar -->
<header class="navbar navbar-default navbar-fixed-top" role="navigation">
<nav class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<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 class="navbar-collapse collapse">
<ul class="nav navbar-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 <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 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</a></li>
</ul>
</div><!--/.nav-collapse -->
</nav>
</header>
<section class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor in felis a pretium. Pellentesque malesuada enim eu libero sagittis egestas. Morbi dignissim ligula vel urna porttitor, eu facilisis lacus lobortis. Integer rutrum commodo leo, id vehicula justo interdum vitae. Curabitur eu tristique lacus. Vivamus elementum, turpis ut pellentesque dapibus, tellus tellus ornare dolor, sed bibendum enim ex et quam. Phasellus rhoncus ante at tincidunt vulputate. Nam ac ornare neque, id iaculis orci. Duis feugiat consequat viverra. Suspendisse nec hendrerit libero. Morbi blandit augue quis orci aliquam placerat. Quisque est nisi, eleifend quis facilisis id, rutrum ut purus. Morbi rutrum interdum volutpat. Pellentesque ac ultrices justo.Fusce commodo lectus et facilisis imperdiet. Etiam ultrices vitae ante quis mollis. Vivamus viverra ligula suscipit volutpat commodo. Vivamus felis nulla, vulputate ut vehicula quis, pharetra ut nibh. Fusce nec mollis urna, in vehicula diam. Quisque venenatis blandit mi non consectetur. Donec aliquam enim nisi, lacinia vehicula neque consectetur vel. Ut rhoncus nibh at tellus aliquet lacinia eget sed odio. Mauris a fermentum nulla, sit amet elementum lacus. In a turpis eros. Nunc et felis et magna aliquam maximus a non sapien. Aenean mauris risus, fermentum et porttitor nec, elementum id libero. Donec nibh nulla, faucibus nec maximus sit amet, ultrices nec nibh.Nullam interdum est vel nulla iaculis, id ultrices dui volutpat. Aenean sed elementum libero, id dignissim tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec finibus ut nisl sit amet auctor. Aenean nec finibus tortor, eget hendrerit felis. Aenean in iaculis nisl. Nulla eu nunc venenatis, egestas enim a, tristique est.Curabitur congue ultricies eros et malesuada. Aenean consectetur lobortis tempor. Mauris odio turpis, pretium id porttitor et, sagittis id enim. Phasellus bibendum ligula id nibh mattis, sed interdum diam accumsan. Curabitur lobortis dolor porttitor, rutrum turpis quis, posuere nibh. Donec et dolor semper, tristique augue vel, aliquet urna. Morbi odio.
</section>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
</body>
</html>Written by Nir Gavish
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Boilerplate
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#