X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=bower_components%2Fbootstrap%2Fgetting-started.html;h=d19055052b93fa03ec6204ebfe72b622d646098d;hb=4fe37339653c909368ba772ea9214c0b2a511fee;hp=48ebd134c7391b2225a70ef96fd4c8e400b9720c;hpb=f9b56d31da29a641fcfdc33825ac84422eea2b84;p=bootswatch diff --git a/bower_components/bootstrap/getting-started.html b/bower_components/bootstrap/getting-started.html old mode 100644 new mode 100755 index 48ebd13..d190550 --- a/bower_components/bootstrap/getting-started.html +++ b/bower_components/bootstrap/getting-started.html @@ -15,13 +15,16 @@ base_url: "../"

There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.

+

Download latest full source

+

Until Bootstrap 3.0.0 is finalized, download the latest full source code (includes compiled and minified versions of our CSS and JavaScript under the dist/ directory).

+

Download latest Bootstrap 3

+ -
- -

More download options

+

Additional downloads

Download latest source code @@ -38,13 +41,11 @@ base_url: "../" {% highlight bash %}$ bower install bootstrap{% endhighlight %}

-
- -

Use the Bootstrap CDN

+

Bootstrap CDN

The folks over at NetDNA have graciously provided CDN support for Bootstrap's CSS and JavaScript. To use, swap your local instances for the Bootstrap CDN links listed below.

{% highlight html linenos %} - + @@ -77,7 +78,7 @@ bootstrap/ │ ├── bootstrap.min.js {% endhighlight %} -

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 (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.

+

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 (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*).

jQuery required

Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template.

@@ -92,7 +93,7 @@ bootstrap/

Basic template

-

Make use of a super basic HTML template, or dive into a few examples we've started for you. We encourage folks to iterate on these examples and not simply use them as an end result.

+

Make use of a super basic HTML template, or dive into a few examples we've started for you. We encourage folks to iterate on these examples and not simply use them as an end result.

Copy and paste the HTML from below to get started with a bare bones Bootstrap document.

{% highlight html %} @@ -107,28 +108,205 @@ bootstrap/

Hello, world!

- - + + - + {% endhighlight %} +
+ + + + +
+
+

Examples

+
+

Build on the basic template above with Bootstrap's many components. Check out some of the more advanced tips for how to customize and build on top of them.

+ +
+
+ + + +

Starter template

+

Nothing but the basics: compiled CSS and JavaScript along with a container.

+
+
+ + + +

Grids

+

Multiple examples of grid layouts with all four tiers, nesting, and more.

+
+
+ +
+ + + +

Jumbotron

+

Build around the jumbotron with a navbar and some basic grid columns.

+
+
+ + + +

Narrow jumbotron

+

Build a more custom page by narrowing the default container and jumbotron.

+
+
+ +
+ + + +

Navbar

+

Super basic template that includes the navbar along with some additional content.

+
+
+ + + +

Static top navbar

+

Super basic template with a static top navbar along with some additional content.

+
+
+ +
+ + + +

Fixed navbar

+

Super basic template with a fixed top navbar along with some additional content.

+
+
+ + + +

Sign-in page

+

Custom form layout and design for a simple sign in form.

+
+
+ +
+ + + +

Sticky footer

+

Attach a footer to the bottom of the viewport when the content is shorter than it.

+
+
+ + + +

Sticky footer with navbar

+

Attach a footer to the bottom of the viewport with a fixed navbar at the top.

+
+
+ +
+ + + +

Justified nav

+

Expand on the default navbar and more to create justified navigation links.

+
+
+ + + +

Offcanvas

+

Build a toggleable off-canvas navigation menu for use with Bootstrap.

+
+
+ +
+ + + +

Carousel

+

Customize the navbar and carousel, then add some new components.

+
+ +
-

Looking for more example templates?

-

Check out the new Examples repository on GitHub, or view them in your browser. Included are over a dozen example templates for building with and extending Bootstrap.

-
-

Browser compatibility

+

Disabling responsiveness

+
+

Don't want your site or application to be scale on different device? With a little bit of work, you can disable the responsive features of Bootstrap so that mobile users see your full desktop-version site.

+ +

Steps to disable responsive views

+

To disable responsive features, follow these steps. See it in action in the modified template below.

+
    +
  1. Remove (or just don't add) the viewport <meta> mentioned in the CSS docs
    2. +
  2. Force a single max-width on the .container (e.g., .container { max-width: 940px; }). Be sure that this comes after the default Bootstrap CSS; otherwise, you'll need !important.
    3. +
  3. For grid layouts, make use of .col-xs-* classes in addition to or in place of the medium/large ones. Don't worry, the extra-small device grid scales up to all resolutions, so you're set there.
    4. +
+

You'll still need respond.js for IE8 (since our media queries are still there and need to be picked up). This just disables the "mobile site" of Bootstrap.

+ +

Bootstrap template with disabled responsive

+

We've taken the above steps and applied them to a basic template here. Note the steps above are called out in comments here, e.g. <-- 1. -->.

+{% highlight html %} + + + + Disabling responsiveness in Bootstrap + + + + + + + + + + + +

Hello, world!

+ + +
+
One third
+
One third
+
One third
+
+ + + + + + + + + + + +{% endhighlight %} +
+ + + + +
+
+

Browser support

Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older and less advanced browsers might receive a less stylized, though fully functional, version of certain components.

@@ -148,11 +326,110 @@ bootstrap/

In addition, Internet Explorer 8 requires the use of respond.js to enable media query support.

IE Compatibility modes

-

Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate meta tag in your pages.

+

Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate meta tag in your pages:

{% highlight html %} {% endhighlight %}

See this StackOverflow question for more information.

+ +

Windows Phone 8 and Internet Explorer 10

+

Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.

+{% highlight css %} +@-webkit-viewport { width: device-width; } +@-moz-viewport { width: device-width; } +@-ms-viewport { width: device-width; } +@-o-viewport { width: device-width; } +@viewport { width: device-width; } +{% endhighlight %} + +{% highlight js %} +if (navigator.userAgent.match(/IEMobile\/10\.0/)) { + var msViewportStyle = document.createElement("style") + msViewportStyle.appendChild( + document.createTextNode( + "@-ms-viewport{width:auto!important}" + ) + ) + document.getElementsByTagName("head")[0].appendChild(msViewportStyle) +} +{% endhighlight %} +

For more information and usage guidelines, read Windows Phone 8 and Device-Width.

+ +

Safari percent rounding

+

In the latest Safari for Mac, its rendering engine has a little trouble with the long decimal places of our .col-*-1 grid classes, meaning if you have 12 individual columns you'll notice they come up short compared to other rows of columns. There's not much we can do here (see #9282) but you do have some options:

+ +

We'll keep an eye on this though and update our code if we have an easy solution.

+ +

Modals and mobile devices

+

Support for overflow: hidden on the <body> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <body> content will begin to scroll.

+ +

Browser zooming

+

Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.

+
+ + + + +
+
+

Third party support

+
+

While we don't officially support any third party plugins or add-ons, we do offer some useful advice to help avoid potential issues in your projects.

+ +

Google Maps

+

If you're using Google Maps on a Bootstrapped project, you might run into some display problems due to our use of * { box-sizing: border-box; }. Previously, you may have also ran into issues with the use of max-width on images. The following snippet should avoid all those problems.

+{% highlight css %} +/* Fix Google Maps canvas + * + * Wrap your Google Maps embed in a `.google-map-canvas` to reset Bootstrap's + * global `box-sizing` changes. You may optionally need to reset the `max-width` + * on images in case you've applied that anywhere else. (That shouldn't be as + * necessary with Bootstrap 3 though as that behavior is relegated to the + * `.img-responsive` class.) + */ + +.google-map-canvas, +.google-map-canvas * { .box-sizing(content-box); } + +/* Optional responsive image override */ +img { max-width: none; } +{% endhighlight %} +
+ + + + +
+
+

Accessibility

+
+

Bootstrap follows common web standards, and with minimal extra effort, can be used to create sites that are accessibile to those using AT.

+ +

Skip navigation

+

If your navigation contains many links and comes before the main content in the DOM, add a Skip to content link immediately after your opening <body> tag. (read why)

+{% highlight html %} + + Skip to content +
+ The main page content. +
+ +{% endhighlight %} + +

Nested headers

+

Another "gotcha" has to do with how you nest your <header> elements. Section 508 states that your largest header must be an h1, and the next header must be an <h2>, etc. This is hard to achieve in practice, but if the largest header on your site is smaller than Bootstrap's default 38px, you should consider modifying your stylesheets before using a smaller header element.

+ +

Additional resources

+
@@ -194,7 +471,7 @@ bootstrap/

It does not require you to: