Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision | |||
|
html_5_twitter_bootstrap_template [2012/12/18 23:54] 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> | ||