diff options
Diffstat (limited to 'getting-started.html')
| -rw-r--r-- | getting-started.html | 113 |
1 files changed, 87 insertions, 26 deletions
diff --git a/getting-started.html b/getting-started.html index 1c358edb4..ba4735a31 100644 --- a/getting-started.html +++ b/getting-started.html @@ -17,7 +17,7 @@ base_url: "../" <h3 id="download-compiled">Compiled CSS, JS, and fonts</h3> <p>The fastest way to get Bootstrap is to download the precompiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source code files are included.</p> - <p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);" role="button">Download precompiled Bootstrap</a></p> + <p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);" role="button">Download Bootstrap</a></p> <h3 id="download-additional">Additional downloads</h3> <div class="bs-docs-dl-options"> @@ -62,9 +62,15 @@ base_url: "../" <div class="page-header"> <h1 id="whats-included">What's included</h1> </div> - <p class="lead">Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p> - <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p> + <p class="lead">Bootstrap is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p> + + <div class="bs-callout bs-callout-warning" id="jquery-required"> + <h4>jQuery required</h4> + <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>. <a href="{{ site.repo }}/blob/v{{ site.current_version }}/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p> + </div> + <h2 id="whats-included-precompiled">Precompiled Bootstrap</h2> + <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p> <!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too. --> {% highlight bash %} @@ -85,11 +91,24 @@ bootstrap/ {% endhighlight %} <p>This is the most basic form of Bootstrap: precompiled 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>). Fonts from Glyphicons are included, as is the optional Bootstrap theme.</p> - <div class="bs-callout bs-callout-danger" id="jquery-required"> - <h4>jQuery required</h4> - <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>. <a href="{{ site.repo }}/blob/v{{ site.current_version }}/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p> - </div> + + <h2 id="whats-included-source">Bootstrap source code</h2> + <p>The Bootstrap source code download includes the precompiled CSS, JavaScript, and font assets, along with source LESS, JavaScript, and documentation. More specifically, it includes the following and more:</p> +{% highlight bash %} +bootstrap/ +├── less/ +├── js/ +├── fonts/ +├── dist/ +│ ├── css/ +│ ├── js/ +│ └── fonts/ +├── docs-assets/ +├── examples/ +└── *.html +{% endhighlight %} </div> + <p>The <code>less/</code>, <code>js/</code>, and <code>fonts/</code> are the source code for our CSS, JS, and icon fonts (respectively). The <code>dist/</code> folder includes everything listed in the precompiled download section above. <code>docs-assets/</code>, <code>examples/</code>, and all <code>*.html</code> files are for our documentation. Beyond that, any other included file provides support for packages, license information, and development.</p> <!-- Template @@ -108,12 +127,12 @@ bootstrap/ <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> - <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> + <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> - <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script> + <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> @@ -243,6 +262,22 @@ bootstrap/ <p>Customize the navbar and carousel, then add some new components.</p> </div> <div class="col-xs-6 col-md-4"> + <a class="thumbnail" href="../examples/cover/"> + <img src="../examples/screenshots/cover.jpg" alt=""> + </a> + <h4>Cover</h4> + <p>A one-page template for building simple and beautiful home pages.</p> + </div> + <div class="clearfix visible-xs"></div> + + <div class="col-xs-6 col-md-4"> + <a class="thumbnail" href="../examples/dashboard/"> + <img src="../examples/screenshots/dashboard.jpg" alt=""> + </a> + <h4>Dashboard</h4> + <p>Basic structure for a admin dashboard with fixed sidebar and navbar.</p> + </div> + <div class="col-xs-6 col-md-4"> <a class="thumbnail" href="../examples/non-responsive/"> <img src="../examples/screenshots/non-responsive.jpg" alt=""> </a> @@ -379,7 +414,7 @@ bootstrap/ </tr> <tr> <td><code>.visible-desktop</code></td> - <td><code>.visible-md</code></td> + <td>Split into <code>.visible-md .visible-lg</code></td> </tr> <tr> <td><code>.hidden-phone</code></td> @@ -391,7 +426,7 @@ bootstrap/ </tr> <tr> <td><code>.hidden-desktop</code></td> - <td><code>.hidden-md</code></td> + <td>Split into <code>.hidden-md .hidden-lg</code></td> </tr> <tr> <td><code>.input-small</code></td> @@ -406,6 +441,10 @@ bootstrap/ <td><code>.form-group</code></td> </tr> <tr> + <td><code>.control-group.warning .control-group.error .control-group.success</code></td> + <td><code>.form-group.has-*</code></td> + </tr> + <tr> <td><code>.checkbox.inline</code> <code>.radio.inline</code></td> <td><code>.checkbox-inline</code> <code>.radio-inline</code></td> </tr> @@ -434,6 +473,14 @@ bootstrap/ <td><code>.text-muted</code></td> </tr> <tr> + <td><code>.label</code></td> + <td><code>.label .label-default</code></td> + </tr> + <tr> + <td><code>.label-important</code></td> + <td><code>.label-danger</code></td> + </tr> + <tr> <td><code>.text-error</code></td> <td><code>.text-danger</code></td> </tr> @@ -469,10 +516,6 @@ bootstrap/ <td><code>.accordion-inner</code></td> <td><code>.panel-body</code></td> </tr> - <tr> - <td><code>.alert-error</code></td> - <td><code>.alert-danger</code></td> - </tr> </tbody> </table> </div><!-- /.table-responsive --> @@ -616,6 +659,11 @@ bootstrap/ <td class="text-muted">N/A</td> </tr> <tr> + <td>Form group with info</td> + <td><code>.control-group.info</code></td> + <td class="text-muted">N/A</td> + </tr> + <tr> <td>Fluid container</td> <td><code>.container-fluid</code></td> <td><code>.container</code> (no more fixed grid)</td> @@ -656,6 +704,16 @@ bootstrap/ <td class="text-muted">N/A</td> </tr> <tr> + <td>Pill-based tabbable area</td> + <td><code>.pill-content</code></td> + <td><code>.tab-content</code></td> + </tr> + <tr> + <td>Pill-based tabbable area pane</td> + <td><code>.pill-pane</code></td> + <td><code>.tab-pane</code></td> + </tr> + <tr> <td>Nav lists</td> <td><code>.nav-list</code> <code>.nav-header</code></td> <td>No direct equivalent, but <a href="../components/#list-group">list groups</a> and <a href="../javascript/#collapse"><code>.panel-group</code>s</a> are similar.</td> @@ -668,7 +726,8 @@ bootstrap/ <h2 id="migration-notes">Additional notes</h2> <p>Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our <em>mobile first</em> approach. Here's a partial list:</p> <ul> - <li>Text-based form controls are now 100% wide. Wrap inputs inside <code><div class="col-*"></div></code> to control input widths.</li> + <li>By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the <code>.form-control</code> class on the element to style.</li> + <li>Text-based form controls with the <code>.form-control</code> class applied are now 100% wide by default. Wrap inputs inside <code><div class="col-*"></div></code> to control input widths.</li> <li><code>.badge</code> no longer has contextual (-success,-primary,etc..) classes.</li> <li><code>.btn</code> must also use <code>.btn-default</code> to get the "default" button.</li> <li><code>.container</code> and <code>.row</code> are now fluid (percentage-based).</li> @@ -677,7 +736,7 @@ bootstrap/ <li>Typeahead has been dropped, in favor of using <a href="http://twitter.github.io/typeahead.js/">Twitter Typeahead</a>.</li> <li>Modal markup has changed significantly. The <code>.modal-header</code>, <code>.modal-body</code>, and <code>.modal-footer</code> sections are now wrapped in <code>.modal-content</code> and <code>.modal-dialog</code> for better mobile styling and behavior.</li> <li>The HTML loaded by the <code>remote</code> modal option is now injected into the <code>.modal</code> instead of into the <code>.modal-body</code>. This allows you to also easily vary the header and footer of the modal, not just the modal body.</li> - <li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc..</li> + <li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc.</li> </ul> <p>For more information on upgrading to v3.0, and code snippets from the community, see <a href="http://bootply.com/">Bootply</a>.</p> </div> @@ -704,14 +763,6 @@ bootstrap/ <h3>Internet Explorer 8 and 9</h3> <p>Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">Respond.js</a> to enable media query support.</strong></p> - <div class="bs-callout bs-callout-warning" id="respond-js-x-domain"> - <h4>Respond.js and cross-domain CSS</h4> - <p>Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup">See the Respond.js docs</a> for details.</p> - </div> - <div class="bs-callout bs-callout-warning" id="respond-file-proto"> - <h4>Respond.js and <code>file://</code></h4> - <p>Due to browser security rules, Respond.js doesn't work with pages viewed via the <code>file://</code> protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p> - </div> <div class="table-responsive"> <table class="table table-bordered table-striped"> <thead> @@ -753,6 +804,15 @@ bootstrap/ <p>Visit <a href="http://caniuse.com/">Can I use...</a> for details on browser support of CSS3 and HTML5 features.</p> + <h3>Internet Explorer 8 and Respond.js</h3> + <p>Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.</p> + <h4 id="respond-js-x-domain">Respond.js and cross-domain CSS</h4> + <p>Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup">See the Respond.js docs</a> for details.</p> + <h4 id="respond-file-proto">Respond.js and <code>file://</code></h4> + <p>Due to browser security rules, Respond.js doesn't work with pages viewed via the <code>file://</code> protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p> + <h4 id="respond-import">Respond.js and <code>@import</code></h4> + <p>Respond.js doesn't work with CSS that's referenced via <code>@import</code>. In particular, some Drupal configurations are known to use <code>@import</code>. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p> + <h3>Internet Explorer 8 and box-sizing</h3> <p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p> @@ -761,7 +821,8 @@ bootstrap/ {% highlight html %} <meta http-equiv="X-UA-Compatible" content="IE=edge"> {% endhighlight %} - <p>This tag is included in all docs pages and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p> + <p>Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".</p> + <p>This tag is included in all Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p> <p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p> <h3 id="ie-10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3> |