Skip to content
GitLab
Commit 059ff6bc authored by Mark Otto's avatar Mark Otto
Browse files

update hero example and examples overview

parent 7bf27674
2 merge requests!14752.0 wip,!1403warningText and warningBackground docs fix
Hide whitespace changes
Inline Side-by-side
Showing
with 112 additions and 34 deletions
+112 -34
docs/examples.html
+ 44
- 14
View file @ 059ff6bc
......@@ -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
......
docs/templates/pages/examples.mustache
+ 44
- 14
View file @ 059ff6bc
......@@ -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>
examples/hero.html
+ 24
- 6
View file @ 059ff6bc
......@@ -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>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment