From 766be659c15d0fef1c83767504b3aac96af19c1c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 8 May 2013 22:58:54 -0700 Subject: [PATCH] .bs-docs-sidenote to .bs-callout --- docs/assets/css/docs.css | 10 +++++----- docs/components.html | 16 ++++++++-------- docs/css.html | 22 +++++++++++----------- docs/javascript.html | 20 ++++++++++---------- docs/welcome.html | 6 +++--- 5 files changed, 37 insertions(+), 37 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 03b2ce29c7..16645011fa 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -170,20 +170,20 @@ body { /* Side notes for calling out things -------------------------------------------------- */ -.bs-docs-sidenote { +.bs-callout { margin: 20px 0; padding: 15px 30px 15px 15px; background-color: #fcf2f2; border-left: 5px solid #df7c7b; } -.bs-docs-sidenote h4 { +.bs-callout h4 { margin-top: 0; } -.bs-docs-sidenote p:last-child { +.bs-callout p:last-child { margin-bottom: 0; } -.bs-docs-sidenote code, -.bs-docs-sidenote .highlight { +.bs-callout code, +.bs-callout .highlight { background-color: #fff; } diff --git a/docs/components.html b/docs/components.html index f03547471b..33ebeeacff 100644 --- a/docs/components.html +++ b/docs/components.html @@ -225,7 +225,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.

@@ -592,7 +592,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.

@@ -950,7 +950,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.

@@ -1231,7 +1231,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>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:

{% highlight css %} @@ -1267,7 +1267,7 @@ body {
{% endhighlight %} -
+

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:

{% highlight css %} @@ -1375,7 +1375,7 @@ body {
{% endhighlight %} -
+

Plugin dependency

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

@@ -1704,7 +1704,7 @@ body {

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.

@@ -1963,7 +1963,7 @@ body {

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 02e184751b..c9f945f4ee 100644 --- a/docs/css.html +++ b/docs/css.html @@ -738,7 +738,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.

@@ -1038,7 +1038,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.

@@ -1130,7 +1130,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.

@@ -1269,7 +1269,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.

@@ -1293,12 +1293,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"> 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.

@@ -1399,7 +1399,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.

@@ -1816,7 +1816,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.

@@ -1834,7 +1834,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.

@@ -1855,7 +1855,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.

@@ -1872,7 +1872,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/javascript.html b/docs/javascript.html index 6e3d6df388..a07ec37d2d 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -15,7 +15,7 @@ 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.

-
+

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 (in notes like this one).

@@ -526,7 +526,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>.

@@ -815,7 +815,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.

@@ -859,7 +859,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.

@@ -999,7 +999,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.

@@ -1219,7 +1219,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.

@@ -1234,7 +1234,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".

@@ -1264,7 +1264,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.

@@ -1531,7 +1531,7 @@ $('#myCollapsible').on('hidden', 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.

@@ -1697,7 +1697,7 @@ $('.carousel').carousel({
...
{% 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.

diff --git a/docs/welcome.html b/docs/welcome.html index 04fc9166d9..130ceb38b7 100644 --- a/docs/welcome.html +++ b/docs/welcome.html @@ -76,7 +76,7 @@ lead: "Welcome to the Bootstrap documentation, the living, interactive style and {% 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.

@@ -216,7 +216,7 @@ lead: "Welcome to the Bootstrap documentation, the living, interactive style and

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.

@@ -270,7 +270,7 @@ lead: "Welcome to the Bootstrap documentation, the living, interactive style and

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.