Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
html_5_twitter_bootstrap_template [2012/12/18 23:50]
Joel Dare
html_5_twitter_bootstrap_template [2012/12/18 23:54] (current)
Joel Dare
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>​
 

comments powered by Disqus
html_5_twitter_bootstrap_template.txt ยท Last modified: 2012/12/18 23:54 by Joel Dare