From f00c885d4ce1c36755aee64ee517b0dbb3ab52b3 Mon Sep 17 00:00:00 2001 From: Julian Thilo Date: Tue, 25 Jun 2013 23:12:36 +0200 Subject: [PATCH 1/5] Docs: create new callout classes --- docs/assets/css/docs.css | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index cef5f33343..76d64adf47 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -223,11 +223,10 @@ body { /* Side notes for calling out things -------------------------------------------------- */ +/* Base styles (regardless of theme) */ .bs-callout { margin: 20px 0; padding: 15px 30px 15px 15px; - background-color: #fcf2f2; - border-left: 5px solid #df7c7b; } .bs-callout h4 { margin-top: 0; @@ -240,6 +239,20 @@ body { background-color: #fff; } +/* Themes for different contexts */ +.bs-callout-danger { + background-color: #fcf2f2; + border-left: 5px solid #df7c7b; +} +.bs-callout-warning { + background-color: #fefbed; + border-left: 5px solid #f5d659; +} +.bs-callout-info { + background-color: #daecf9; + border-left: 5px solid #55a9e1; +} + /* Special grid styles From b4e0e4fee65fb50f7981d28bb875083e0da1a303 Mon Sep 17 00:00:00 2001 From: Julian Thilo Date: Wed, 26 Jun 2013 15:59:33 +0200 Subject: [PATCH 2/5] Adjust info callout, add callouts to docs * Adjust the background-color of bs-callout-info to match danger and warning in tone * Convert all the callouts * Change some callouts to info/warning * Add new callout --- docs/assets/css/docs.css | 2 +- docs/components.html | 43 +++++++++++++++++++++++++++------------ docs/css.html | 37 +++++++++++++++++---------------- docs/customize.html | 13 ++++++++---- docs/getting-started.html | 8 ++++---- docs/javascript.html | 30 ++++++++++++++++----------- 6 files changed, 82 insertions(+), 51 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 76d64adf47..30b0f02e7f 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -249,7 +249,7 @@ body { border-left: 5px solid #f5d659; } .bs-callout-info { - background-color: #daecf9; + background-color: #f0f7fd; border-left: 5px solid #55a9e1; } diff --git a/docs/components.html b/docs/components.html index 55f27cbc33..634b8bde07 100644 --- a/docs/components.html +++ b/docs/components.html @@ -185,8 +185,10 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na -

Glyphicons attribution

-

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

+
+

Glyphicons attribution

+

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

+

How to use

@@ -195,7 +197,10 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na {% endhighlight %}

Want to change the icon color? Just change the color of the parent element.

-

When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.

+
+

Readability

+

When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.

+

Icon examples

@@ -225,7 +230,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na {% endhighlight %} -
+

Accessibility

Keep in mind that using icons without any additional content means the icons are not represented to screen reader users.

@@ -566,7 +571,13 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na {% endhighlight %}

Justified button groups

-

Make a group of buttons stretch at the same size to span the entire width of its parent. This only works with <a> elements as the <button> doesn't pick up these styles.

+

Make a group of buttons stretch at the same size to span the entire width of its parent.

+ +
+

Element-specific usage

+

This only works with <a> elements as the <button> doesn't pick up these styles.

+
+
Left @@ -592,7 +603,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

-
+

Plugin dependency

Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.

@@ -929,7 +940,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na

For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects.

-
+

Link functionality not impacted

This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.

@@ -1213,7 +1224,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
{% endhighlight %} -
+

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

{% highlight css %} @@ -1242,7 +1253,7 @@ body { padding-top: 70px; }
{% endhighlight %} -
+

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

{% highlight css %} @@ -1343,7 +1354,7 @@ body { padding-bottom: 70px; }
{% endhighlight %} -
+

Plugin dependency

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

@@ -1660,7 +1671,7 @@ body { padding-bottom: 70px; }

Self collapsing

When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.

-
+

Cross-browser compatibility

Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.

@@ -1854,7 +1865,13 @@ body { padding-bottom: 70px; }

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.

Default alert

-

Wrap any text and an optional dismiss button in .alert for a basic warning alert message. To ensure proper behavior across all devices, be sure to use <button> element with the data-dismiss="alert" data attribute.

+

Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

+ +
+

Ensure proper behavior across all devices

+

Be sure to use the <button> element with the data-dismiss="alert" data attribute.

+
+
@@ -1947,7 +1964,7 @@ body { padding-bottom: 70px; }

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

-
+

Cross-browser compatibility

Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.

diff --git a/docs/css.html b/docs/css.html index 1d8cee56d4..658f2ea9ae 100644 --- a/docs/css.html +++ b/docs/css.html @@ -245,7 +245,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
{% endhighlight %} -
+

Need more examples?

We dive into more grid layouts in a separte page, free of chrome and documentation to better show you the power of the grid.

More grid examples

@@ -506,7 +506,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes." rendered as italicized text {% endhighlight %} -

Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

+
+

Alternate elements

+

Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

+

Alignment classes

Easily realign text to components with text alignment classes.

@@ -774,10 +777,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes." {% endhighlight %} -
Auto-truncating
-

- Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout. -

+
+

Auto-truncating

+

Horizontal description lists will truncate terms that are too long to fit in the left column with text-overflow. In narrower viewports, they will change to the default stacked layout.

+
@@ -864,7 +867,7 @@ For example, <section> should be wrapped as inline.

Striped

Use .table-striped to add zebra-striping to any table row within the <tbody>.

-
+

Cross-browser compatibility

Striped tables are styled via the :nth-child CSS selector, which is not available in IE8.

@@ -1164,7 +1167,7 @@ For example, <section> should be wrapped as inline.

Inline form

Add .form-inline for left-aligned and inline-block controls for a compact layout.

-
+

Requires custom widths

Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.

@@ -1246,7 +1249,7 @@ For example, <section> should be wrapped as inline.

Inputs

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

-
+

Type declaration required

Inputs will only be fully styled if their type is properly declared.

@@ -1385,7 +1388,7 @@ For example, <section> should be wrapped as inline.

Invalid inputs

Style inputs via default browser functionality. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.

-
+

Cross-browser compatibility

Invalid inputs are styled via the :invalid CSS selector, which is not supported by Internet Explorer 9 and below.

@@ -1409,12 +1412,12 @@ For example, <section> should be wrapped as inline.

Disabled fieldsets

Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.

-
+

Link functionality of <a> not impacted

This class will only change the appearance of <a class="btn btn-default"> buttons, not their functionality. Use custom JavaScript to disable links here.

-
+

Cross-browser compatibility

While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <disabled> attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.

@@ -1511,7 +1514,7 @@ For example, <section> should be wrapped as inline.

Input groups

Add text or buttons before, after, or on both sides of any text-based input. Use .input-group with a .add-on to prepend or append elements to an <input>.

-
+

Cross-browser compatibility

Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.

@@ -1894,7 +1897,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -
+

Cross-browser compatibility

If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.

@@ -1912,7 +1915,7 @@ For example, <section> should be wrapped as inline.

We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

-
+

Link functionality not impacted

This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.

@@ -1933,7 +1936,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -
+

Cross-browser rendering

As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.

@@ -1950,7 +1953,7 @@ For example, <section> should be wrapped as inline.

Add classes to an <img> element to easily style images in any project.

-
+

Cross-browser compatibility

Keep in mind that Internet Explorer 8 lacks support for rounded corners.

diff --git a/docs/customize.html b/docs/customize.html index 19957867f2..c91a23c14b 100644 --- a/docs/customize.html +++ b/docs/customize.html @@ -355,9 +355,14 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
-
-

Heads up!

-

All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of jQuery to be included.

+
+

Produces two files

+

All checked plugins will be compiled into a readable bootstrap.js and a minified bootstrap.min.js. We recommend you use the minified version in production.

+
+ +
+

jQuery required

+

All plugins require the latest version of jQuery to be included.

@@ -1128,7 +1133,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
Customize and Download
-
+

What's included?

Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.

diff --git a/docs/getting-started.html b/docs/getting-started.html index 718e8ed79d..1acea891f5 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -49,7 +49,7 @@ lead: "An overview of Bootstrap, how to download and use, basic templates and ex {% endhighlight %} -
+

LESS compilation

If you download the original files, you need to compile Bootstrap's LESS files into usable CSS. To do that, Bootstrap only officially supports Recess, Twitter's CSS hinter built on top of less.js.

@@ -81,7 +81,7 @@ bootstrap/ {% 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.

-
+

jQuery required

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

@@ -228,7 +228,7 @@ bootstrap/

Once you've downloaded and included Bootstrap's CSS into your templates, you can move on to customizing the included components. To do so, create a new stylesheet (LESS, if you like, or just plain CSS) to house your customizations.

-
+

Compiled or minified?

Unless you plan on reading a good chunk of the compiled CSS, go with the minified. It's the same code, just compacted. Less bandwidth is good, especially in production environments.

@@ -282,7 +282,7 @@ bootstrap/

Going beyond light customizations and into visual overhauls is just as straightforward as the above custom button. For a site like Karma, which uses Bootstrap as a CSS reset with heavy modifications, more extensive work is involved, but well worth it in the end.

-
+

Alternate customization methods

While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source LESS code to your own classes via mixins. For the time being, neither options are documented here.

diff --git a/docs/javascript.html b/docs/javascript.html index 9a5a5b6f06..9d9ecd1f84 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -14,8 +14,14 @@ lead: "Bring Bootstrap's components to life with over a dozen custom jQuery plug

Individual or compiled

-

Plugins can be included individually, or all at once. Do not attempt to include both. Both bootstrap.js and bootstrap.min.js contain all plugins in a single file.

-
+

Plugins can be included individually (using bootstrap-*.js original files, or all at once (using bootstrap.js or the minified bootstrap.min.js.

+ +
+

Do not attempt to include both.

+

Both bootstrap.js and bootstrap.min.js contain all plugins in a single file.

+
+ +

Plugin dependencies

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs.

@@ -65,7 +71,7 @@ $('#myModal').on('show.bs.modal', function (e) { }) {% endhighlight %} -
+

Third-party libraries

Bootstrap does not officially support third-party JavaScript libraries like Prototype or jQuery UI. Despite .noConflict and namespaced events, there may be compatibility problems that you need to fix on your own. Ask on the mailing list if you need help.

@@ -532,7 +538,7 @@ $('.dropdown-toggle').dropdown() $('#navbar-example').scrollspy() {% endhighlight %} -
+

Resolvable ID targets required

Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.

@@ -825,7 +831,7 @@ $('#example').tooltip(options) -
+

Data attributes for individual tooltips

Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.

@@ -869,7 +875,7 @@ $('#example').tooltip(options)

Examples

Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover.

-
+

Plugin dependency

Popovers require the tooltip plugin to be included in your version of Bootstrap.

@@ -1009,7 +1015,7 @@ $('#example').tooltip(options) -
+

Data attributes for individual popovers

Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.

@@ -1229,7 +1235,7 @@ $('.nav-tabs').button()

$().button('toggle')

Toggles push state. Gives the button the appearance that it has been activated.

-
+

Auto toggling

You can enable auto toggling of a button by using the data-toggle attribute.

@@ -1244,7 +1250,7 @@ $('.nav-tabs').button() {% endhighlight %} -
+

Cross-browser compatibility

Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".

@@ -1274,7 +1280,7 @@ $('.nav-tabs').button()

About

Get base styles and flexible support for collapsible components like accordions and navigation.

-
+

Plugin dependency

Collapse requires the transitions plugin to be included in your version of Bootstrap.

@@ -1541,7 +1547,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {

Optional captions

Add captions to your slides easily with the .carousel-caption element within any .item. Place just about any optional HTML within there and it will be automatically aligned and formatted.

-
+

Responsive visibility

Captions are hidden by default and will show up only with viewports greater than 768px wide.

@@ -1712,7 +1718,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {
...
{% endhighlight %} -
+

Requires positioning

You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.

From aa49c919c65ea4eb7777d3f54cdc9da0e1a05f9f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 17 Jul 2013 19:08:08 -0700 Subject: [PATCH 3/5] Fixes #8356: Move browser compatibility from wiki into real docs --- docs/getting-started.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/docs/getting-started.html b/docs/getting-started.html index 56e6cbc323..f951cfc785 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -81,6 +81,24 @@ bootstrap/
+ +
+
+

Browser compatibility

+
+

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.

+

Specifically, we support the latest versions of the following:

+
    +
  • Chrome (Mac, Windows, iOS, and Android)
    • +
  • Safari (Mac and iOS only, as Windows has more or less been discontinued)
    • +
  • Firefox (Mac, Windows)
    • +
  • Internet Explorer
    • +
  • Opera (Mac, Windows)
    • +
+

Unofficially, Bootstrap should look and behave just fine in Chromium for Linux and Internet Explorer 7-8, though full support is not guaranteed.

+
+
From f4b9938d8c0c23ff3b1b5e1e8fee9229d2e67bfa Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 17 Jul 2013 19:20:08 -0700 Subject: [PATCH 4/5] Move license FAQs to the docs, add link to side nav --- docs/_includes/nav-getting-started.html | 6 ++++ docs/getting-started.html | 46 +++++++++++++++++++++++++ 2 files changed, 52 insertions(+) diff --git a/docs/_includes/nav-getting-started.html b/docs/_includes/nav-getting-started.html index fd6f8c98b0..bde8bf4045 100644 --- a/docs/_includes/nav-getting-started.html +++ b/docs/_includes/nav-getting-started.html @@ -8,6 +8,9 @@
  • What's included
    • +
  • + Browser support +
  • Templates and examples
    • +
  • + License FAQs +
  • Customizing Bootstrap
    • \ No newline at end of file diff --git a/docs/getting-started.html b/docs/getting-started.html index f951cfc785..4ff2a9d88f 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -231,6 +231,52 @@ bootstrap/ + +
    +
    +

    License FAQs

    +
    +

    Bootstrap is released under the Apache 2 license. Boiled down to smaller chunks, it can be described with the following conditions.

    + +
    +
    +

    It allows you to:

    +
      +
    • Freely download and use Twitter open source software, in whole or in part, for personal, company internal or commercial purposes
      • +
    • Use Twitter open source software in packages or distributions that you create
      • +
    +
    +
    +

    It forbids you to:

    +
      +
    • Redistribute any piece of Twitter open source originated software without proper attribution
      • +
    • Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution
      • +
    • Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question
      • +
    +
    +
    +
    +
    +

    It requires you to:

    +
      +
    • Include a copy of the license in any redistribution you may make that includes Twitter software
      • +
    • Provide clear attribution to Twitter for any distributions that include Twitter open source software
      • +
    +
    +
    +

    It does not require you to:

    +
      +
    • Include the source of the Twitter software itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
      • +
    • Submit changes that you make to the software back to Twitter (though such feedback is encouraged)
      • +
    +
    +
    +

    The full Bootstrap license is located in the project repository for more information.

    +
    + + +
    From 06d47b008233c487844146cf1cc037d691068a0a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 17 Jul 2013 19:26:37 -0700 Subject: [PATCH 5/5] Fixes #8360: Add mention of IE compatibility mode to docs --- docs/getting-started.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/getting-started.html b/docs/getting-started.html index 4ff2a9d88f..32ff37530c 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -88,6 +88,8 @@ bootstrap/

    Browser compatibility

    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.

    + +

    Supported browsers

    Specifically, we support the latest versions of the following:

    • Chrome (Mac, Windows, iOS, and Android)
      • @@ -97,6 +99,9 @@ bootstrap/
    • Opera (Mac, Windows)

    Unofficially, Bootstrap should look and behave just fine in Chromium for Linux and Internet Explorer 7-8, though full support is not guaranteed.

    + +

    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 <meta http-equiv="X-UA-Compatible" content="IE=edge"> in your pages. See this StackOverflow question for more information.