mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
update hero example and examples overview
This commit is contained in:
Mark Otto
parent
7bf2767452
commit
059ff6bcbd
3 changed files with 112 additions and 34 deletions
|
|
@ -82,20 +82,50 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="thumbnails bootstrap-examples">
|
||||||
<!-- EXAMPLES
|
<li class="span4">
|
||||||
================================================== -->
|
<a href="../examples/hero.html" class="thumbnail">
|
||||||
<section id="examples">
|
<img src="http://placehold.it/360x240" alt="">
|
||||||
<div class="page-header">
|
</a>
|
||||||
<h1>Examples from 1.x</h1>
|
<h3>Basic marketing site</h3>
|
||||||
</div>
|
<p></p>
|
||||||
|
</li>
|
||||||
<p><a href="../examples/container-app.html">Container app</a></p>
|
<li class="span4">
|
||||||
<p><a href="../examples/fluid.html">Fluid layout</a></p>
|
<a href="../examples/fluid.html" class="thumbnail">
|
||||||
<p><a href="../examples/fluid-reverse.html">Reversed fluid layout</a></p>
|
<img src="http://placehold.it/360x240" alt="">
|
||||||
<p><a href="../examples/hero.html">Hero marketing site</a></p>
|
</a>
|
||||||
|
<h3>Fluid layout</h3>
|
||||||
</section>
|
<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
|
<!-- Footer
|
||||||
|
|
|
||||||
58
docs/templates/pages/examples.mustache
vendored
58
docs/templates/pages/examples.mustache
vendored
|
|
@ -10,17 +10,47 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="thumbnails bootstrap-examples">
|
||||||
<!-- EXAMPLES
|
<li class="span4">
|
||||||
================================================== -->
|
<a href="../examples/hero.html" class="thumbnail">
|
||||||
<section id="examples">
|
<img src="http://placehold.it/360x240" alt="">
|
||||||
<div class="page-header">
|
</a>
|
||||||
<h1>{{_i}}Examples from 1.x{{/i}}</h1>
|
<h3>Basic marketing site</h3>
|
||||||
</div>
|
<p></p>
|
||||||
|
</li>
|
||||||
<p><a href="../examples/container-app.html">Container app</a></p>
|
<li class="span4">
|
||||||
<p><a href="../examples/fluid.html">Fluid layout</a></p>
|
<a href="../examples/fluid.html" class="thumbnail">
|
||||||
<p><a href="../examples/fluid-reverse.html">Reversed fluid layout</a></p>
|
<img src="http://placehold.it/360x240" alt="">
|
||||||
<p><a href="../examples/hero.html">Hero marketing site</a></p>
|
</a>
|
||||||
|
<h3>Fluid layout</h3>
|
||||||
</section>
|
<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>
|
||||||
|
|
|
||||||
|
|
@ -16,8 +16,10 @@
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
body {
|
body {
|
||||||
padding-top: 60px;
|
padding-top: 60px;
|
||||||
|
padding-bottom: 40px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<link href="../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Le fav and touch icons -->
|
<!-- Le fav and touch icons -->
|
||||||
<link rel="shortcut icon" href="images/favicon.ico">
|
<link rel="shortcut icon" href="images/favicon.ico">
|
||||||
|
|
@ -31,12 +33,19 @@
|
||||||
<div class="navbar navbar-fixed-top">
|
<div class="navbar navbar-fixed-top">
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner">
|
||||||
<div class="container">
|
<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>
|
<a class="brand" href="#">Project name</a>
|
||||||
<ul class="nav">
|
<div class="nav-collapse">
|
||||||
<li class="active"><a href="#">Home</a></li>
|
<ul class="nav">
|
||||||
<li><a href="#about">About</a></li>
|
<li class="active"><a href="#">Home</a></li>
|
||||||
<li><a href="#contact">Contact</a></li>
|
<li><a href="#about">About</a></li>
|
||||||
</ul>
|
<li><a href="#contact">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!--/.nav-collapse -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -46,7 +55,7 @@
|
||||||
<!-- Main hero unit for a primary marketing message or call to action -->
|
<!-- Main hero unit for a primary marketing message or call to action -->
|
||||||
<div class="hero-unit">
|
<div class="hero-unit">
|
||||||
<h1>Hello, world!</h1>
|
<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 »</a></p>
|
<p><a class="btn primary large">Learn more »</a></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -69,11 +78,20 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>© Company 2012</p>
|
<p>© Company 2012</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</div> <!-- /container -->
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue