rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

update hero example and examples overview

Browse Source
This commit is contained in:
Mark Otto 2012-01-29 02:27:45 -08:00
parent 7bf2767452
commit 059ff6bcbd
3 changed files with 112 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
docs/examples.html
View File

@ -82,20 +82,50 @@
</header>
<!-- EXAMPLES
================================================== -->
<section id="examples">
<div class="page-header">
<h1>Examples from 1.x</h1>
</div>
<p><a href="../examples/container-app.html">Container app</a></p>
<p><a href="../examples/fluid.html">Fluid layout</a></p>
<p><a href="../examples/fluid-reverse.html">Reversed fluid layout</a></p>
<p><a href="../examples/hero.html">Hero marketing site</a></p>
</section>
<ul class="thumbnails bootstrap-examples">
<li class="span4">
<a href="../examples/hero.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Basic marketing site</h3>
<p></p>
</li>
<li class="span4">
<a href="../examples/fluid.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Fluid layout</h3>
<p></p>
</li>
<li class="span4">
<a href="../examples/fluid-reverse.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Fluid layout reversed</h3>
<p></p>
</li>
<li class="span4">
<a href="../examples/container-app.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Container application</h3>
<p></p>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Fullscreen</h3>
<p></p>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Simple layout</h3>
<p></p>
</li>
</ul>
<!-- Footer

58
docs/templates/pages/examples.mustache vendored
View File

@ -10,17 +10,47 @@
</header>
<!-- EXAMPLES
================================================== -->
<section id="examples">
<div class="page-header">
<h1>{{_i}}Examples from 1.x{{/i}}</h1>
</div>
<p><a href="../examples/container-app.html">Container app</a></p>
<p><a href="../examples/fluid.html">Fluid layout</a></p>
<p><a href="../examples/fluid-reverse.html">Reversed fluid layout</a></p>
<p><a href="../examples/hero.html">Hero marketing site</a></p>
</section>
<ul class="thumbnails bootstrap-examples">
<li class="span4">
<a href="../examples/hero.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Basic marketing site</h3>
<p></p>
</li>
<li class="span4">
<a href="../examples/fluid.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Fluid layout</h3>
<p></p>
</li>
<li class="span4">
<a href="../examples/fluid-reverse.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Fluid layout reversed</h3>
<p></p>
</li>
<li class="span4">
<a href="../examples/container-app.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Container application</h3>
<p></p>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Fullscreen</h3>
<p></p>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Simple layout</h3>
<p></p>
</li>
</ul>

30
examples/hero.html
View File

@ -16,8 +16,10 @@
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
@ -31,12 +33,19 @@
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
@ -46,7 +55,7 @@
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn primary large">Learn more &raquo;</a></p>
</div>
@ -69,11 +78,20 @@
</div>
</div>
<hr>
<footer>
<p>&copy; Company 2012</p>
</footer>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../js/tests/vendor/jquery.js"></script>
<script src="../js/bootstrap-transition.js"></script>
<script src="../js/bootstrap-collapse.js"></script>
</body>
</html>