From b4e0e4fee65fb50f7981d28bb875083e0da1a303 Mon Sep 17 00:00:00 2001 From: Julian Thilo Date: Wed, 26 Jun 2013 15:59:33 +0200 Subject: 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/components.html | 43 ++++++++++++++++++++++++++++++------------- 1 file changed, 30 insertions(+), 13 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 55f27cbc3..634b8bde0 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.

-- cgit v1.2.3