0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00

Merge pull request #8057 from burnsra/3.0.0-wip-getting-started

Fix layout for examples in getting-started
This commit is contained in:
Mark Otto 2013-06-02 14:08:21 -07:00
commit ddf95c91db

View File

@ -116,91 +116,98 @@ bootstrap/
{% endhighlight %}
<h3 id="examples-list">Examples</h3>
<div class="row bs-examples">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/starter-template/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
</a>
<h4>Starter template</h4>
<p>A barebones HTML page with Bootstrap's CSS and JavaScript included.</p>
<div class="bs-examples">
<div class="row">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/starter-template/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
</a>
<h4>Starter template</h4>
<p>A barebones HTML page with Bootstrap's CSS and JavaScript included.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/grid/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-grid.png" alt="">
</a>
<h4>Basic grid layouts</h4>
<p>Simple grid layouts to familiarize you with using the Bootstrap grid system.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/jumbotron/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
</a>
<h4>Basic marketing site</h4>
<p>Features a jumbotron for primary message and three supporting elements.</p>
</div>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/grid/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-grid.png" alt="">
</a>
<h4>Basic grid layouts</h4>
<p>Simple grid layouts to familiarize you with using the Bootstrap grid system.</p>
<div class="row">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
</a>
<h4>Narrow marketing</h4>
<p>Slim, lightweight marketing template for small projects or teams.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/justified-nav/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
</a>
<h4>Justified nav</h4>
<p>Marketing page with equal-width navigation links in a modified navbar.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/signin/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
</a>
<h4>Sign in</h4>
<p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
</div>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/jumbotron/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
</a>
<h4>Basic marketing site</h4>
<p>Features a jumbotron for primary message and three supporting elements.</p>
<div class="row">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
</a>
<h4>Sticky footer</h4>
<p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
</a>
<h4>Sticky footer w/ navbar</h4>
<p>Add a fixed navbar to the default sticky footer template.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/carousel/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
</a>
<h4>Carousel jumbotron</h4>
<p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
</div>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
</a>
<h4>Narrow marketing</h4>
<p>Slim, lightweight marketing template for small projects or teams.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/justified-nav/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
</a>
<h4>Justified nav</h4>
<p>Marketing page with equal-width navigation links in a modified navbar.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/signin/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
</a>
<h4>Sign in</h4>
<p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
</a>
<h4>Sticky footer</h4>
<p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
</a>
<h4>Sticky footer w/ navbar</h4>
<p>Add a fixed navbar to the default sticky footer template.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/carousel/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
</a>
<h4>Carousel jumbotron</h4>
<p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/navbar/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
</a>
<h4>Navbar</h4>
<p>Basic template for showcasing how the navbar works.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
</a>
<h4>Static top navbar</h4>
<p>Basic template for showcasing the static navbar variation.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
</a>
<h4>Fixed top navbar</h4>
<p>Basic template for showcasing the fixed navbar variation.</p>
<div class="row">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/navbar/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
</a>
<h4>Navbar</h4>
<p>Basic template for showcasing how the navbar works.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
</a>
<h4>Static top navbar</h4>
<p>Basic template for showcasing the static navbar variation.</p>
</div>
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
</a>
<h4>Fixed top navbar</h4>
<p>Basic template for showcasing the fixed navbar variation.</p>
</div>
</div>
</div>
</div>