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/css.html | 37 ++++++++++++++++++++----------------- 1 file changed, 20 insertions(+), 17 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 1d8cee56d..658f2ea9a 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.

-- cgit v1.2.3