diff options
Diffstat (limited to 'docs/templates/pages/getting-started.mustache')
| -rw-r--r-- | docs/templates/pages/getting-started.mustache | 55 |
1 files changed, 42 insertions, 13 deletions
diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache index 513124c27..2eec7ff76 100644 --- a/docs/templates/pages/getting-started.mustache +++ b/docs/templates/pages/getting-started.mustache @@ -67,10 +67,9 @@ ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js - ├── img/ - │ ├── glyphicons-halflings.png - │ ├── glyphicons-halflings-white.png - └── README.md + └── img/ + ├── glyphicons-halflings.png + └── glyphicons-halflings-white.png </pre> <p>{{_i}}This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.{{/i}}</p> <p>{{_i}}Please note that all JavaScript plugins require jQuery to be included.{{/i}}</p> @@ -93,11 +92,11 @@ <p>{{_i}}Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes <a href="http://glyphicons.com">Glyphicons</a>, a great little icon set.{{/i}}</p> <h4><a href="http://twitter.github.com/bootstrap/components.html">{{_i}}Components{{/i}}</a></h4> <p>{{_i}}Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.{{/i}}</p> - <h4><a href="http://twitter.github.com/bootstrap/javascript.html">{{_i}}Javascript plugins{{/i}}</a></h4> - <p>{{_i}}Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.{{/i}}</p> + <h4><a href="http://twitter.github.com/bootstrap/javascript.html">{{_i}}JavaScript plugins{{/i}}</a></h4> + <p>{{_i}}Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.{{/i}}</p> <h2>{{_i}}List of components{{/i}}</h2> - <p>{{_i}}Together, the <strong>Components</strong> and <strong>Javascript plugins</strong> sections provide the following interface elements:{{/i}}</p> + <p>{{_i}}Together, the <strong>Components</strong> and <strong>JavaScript plugins</strong> sections provide the following interface elements:{{/i}}</p> <ul> <li>{{_i}}Button groups{{/i}}</li> <li>{{_i}}Button dropdowns{{/i}}</li> @@ -128,7 +127,7 @@ <div class="page-header"> <h1>{{_i}}4. Basic HTML template{{/i}}</h1> </div> - <p class="lead">{{_i}}With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="#file-structure">File structure</a>.{{/i}}</p> + <p class="lead">{{_i}}With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the <a href="#file-structure">File structure</a>.{{/i}}</p> <p>{{_i}}Now, here's a look at a <strong>typical HTML file</strong>:{{/i}}</p> <pre class="prettyprint linenums"> <!DOCTYPE html> @@ -149,7 +148,7 @@ <head> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> - <link href="css/bootstrap.min.css" rel="stylesheet"> + <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <h1>Hello, world!</h1> @@ -172,6 +171,13 @@ <p class="lead">{{_i}}Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.{{/i}}</p> <ul class="thumbnails bootstrap-examples"> <li class="span3"> + <a class="thumbnail" href="examples/starter-template.html"> + <img src="assets/img/examples/bootstrap-example-starter.jpg" alt=""> + </a> + <h4>{{_i}}Starter template{{/i}}</h4> + <p>{{_i}}A barebones HTML document with all the Bootstrap CSS and JavaScript included.{{/i}}</p> + </li> + <li class="span3"> <a class="thumbnail" href="examples/hero.html"> <img src="assets/img/examples/bootstrap-example-hero.jpg" alt=""> </a> @@ -185,12 +191,35 @@ <h4>{{_i}}Fluid layout{{/i}}</h4> <p>{{_i}}Uses our new responsive, fluid grid system to create a seamless liquid layout.{{/i}}</p> </li> + <li class="span3"> - <a class="thumbnail" href="examples/starter-template.html"> - <img src="assets/img/examples/bootstrap-example-starter.jpg" alt=""> + <a class="thumbnail" href="examples/marketing-narrow.html"> + <img src="assets/img/examples/bootstrap-example-marketing-narrow.png" alt=""> </a> - <h4>{{_i}}Starter template{{/i}}</h4> - <p>{{_i}}A barebones HTML document with all the Bootstrap CSS and javascript included.{{/i}}</p> + <h4>{{_i}}Narrow marketing{{/i}}</h4> + <p>{{_i}}Slim, lightweight marketing template for small projects or teams.{{/i}}</p> + </li> + <li class="span3"> + <a class="thumbnail" href="examples/signin.html"> + <img src="assets/img/examples/bootstrap-example-signin.png" alt=""> + </a> + <h4>{{_i}}Sign in{{/i}}</h4> + <p>{{_i}}Barebones sign in form with custom, larger form controls and a flexible layout.{{/i}}</p> + </li> + <li class="span3"> + <a class="thumbnail" href="examples/sticky-footer.html"> + <img src="assets/img/examples/bootstrap-example-sticky-footer.png" alt=""> + </a> + <h4>{{_i}}Sticky footer{{/i}}</h4> + <p>{{_i}}Pin a fixed-height footer to the bottom of the user's viewport.{{/i}}</p> + </li> + + <li class="span3"> + <a class="thumbnail" href="examples/carousel.html"> + <img src="assets/img/examples/bootstrap-example-carousel.png" alt=""> + </a> + <h4>{{_i}}Carousel jumbotron{{/i}}</h4> + <p>{{_i}}A more interactive riff on the basic marketing site featuring a prominent carousel.{{/i}}</p> </li> </ul> </section> |