This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
html_5_twitter_bootstrap_template [2012/12/18 23:50] Joel Dare |
html_5_twitter_bootstrap_template [2020/06/01 22:53] (current) |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== HTML 5 Twitter Bootstrap Template ====== | ||
+ | This is a quick page template that looks similar to my previous [[HTML 5 Lite Page]] but that uses the Twitter Bootstrap framework for look and feel. I use this as a base page for some quick projects. | ||
+ | |||
+ | {{ ::screen_shot_2012-12-18_at_4.53.04_pm.png?300 |}} | ||
+ | |||
+ | <code html> | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title>Title</title> | ||
+ | <!-- Bootstrap --> | ||
+ | <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> | ||
+ | <style> | ||
+ | .container { padding-top: 25px; } | ||
+ | img { padding-bottom: 20px; } | ||
+ | </style> | ||
+ | <meta name="viewport" content="width=320px; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> | ||
+ | <link rel="apple-touch-icon" href="144x144.gif"/> | ||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <!-- Main Container --> | ||
+ | <div class="container"> | ||
+ | |||
+ | <!-- Navigation Bar --> | ||
+ | <div class="navbar navbar-inverse"> | ||
+ | <div class="navbar-inner"> | ||
+ | <a class="brand" href="#">Title</a> | ||
+ | <ul class="nav"> | ||
+ | <li class="active"><a href="#">Home</a></li> | ||
+ | <li><a href="#">Link</a></li> | ||
+ | <li><a href="#">Link</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- End Navigation --> | ||
+ | |||
+ | <div class="row"> | ||
+ | <div class="span3"> | ||
+ | <a href="#">Column 1</a> | ||
+ | </div> | ||
+ | <div class="span3"> | ||
+ | <a href="#">Column 2</a> | ||
+ | </div> | ||
+ | <div class="span3"> | ||
+ | <a href="#">Column 3</a> | ||
+ | </div> | ||
+ | <div class="span3"> | ||
+ | <a href="#">Column 4</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <script src="http://code.jquery.com/jquery-latest.js"></script> | ||
+ | <script src="bootstrap/js/bootstrap.min.js"></script> | ||
+ | </div> | ||
+ | <!-- End Container --> | ||
+ | |||
+ | </body> | ||
+ | </html> | ||
+ | </code> |