diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components.html | 23 | ||||
| -rw-r--r-- | docs/templates/pages/components.mustache | 23 |
2 files changed, 12 insertions, 34 deletions
diff --git a/docs/components.html b/docs/components.html index b169164ad..2198145ec 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1454,11 +1454,12 @@ ================================================== --> <section id="alerts"> <div class="page-header"> - <h1>Alerts <small>Styles for contextual feedback messages</small></h1> + <h1>Alerts</h1> </div> + <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="./javascript.html#alerts">alerts jQuery plugin</a>.</p> - <h2>Default alert</h2> - <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message.</p> + <h3>Default alert</h3> + <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message. <strong>To ensure proper behavior across all devices</strong>, be sure to use <code><button></code> element with the <code>data-dismiss="alert"</code> data attribute.</p> <div class="bs-docs-example"> <div class="alert"> <button type="button" class="close" data-dismiss="alert">×</button> @@ -1472,17 +1473,7 @@ </div> </pre> - <h3>Dismiss buttons</h3> - <p>Mobile Safari and Mobile Opera browsers, in addition to the <code>data-dismiss="alert"</code> attribute, require an <code>href="#"</code> for the dismissal of alerts when using an <code><a></code> tag.</p> - <pre class="prettyprint linenums"><a href="#" class="close" data-dismiss="alert">&times;</a></pre> - <p>Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.</p> - <pre class="prettyprint linenums"><button type="button" class="close" data-dismiss="alert">&times;</button></pre> - - <h3>Dismiss alerts via JavaScript</h3> - <p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.</p> - - - <h2>Options</h2> + <h3>Block alerts</h3> <p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p> <div class="bs-docs-example"> <div class="alert alert-block"> @@ -1499,10 +1490,8 @@ </div> </pre> - - <h2>Contextual alternatives</h2> + <h3>Contextual alternatives</h3> <p>Add optional classes to change an alert's connotation.</p> - <div class="bs-docs-example"> <div class="alert alert-error"> <button type="button" class="close" data-dismiss="alert">×</button> diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 9c4842385..18b1c4812 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1386,11 +1386,12 @@ ================================================== --> <section id="alerts"> <div class="page-header"> - <h1>Alerts <small>Styles for contextual feedback messages</small></h1> + <h1>Alerts</h1> </div> + <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="./javascript.html#alerts">alerts jQuery plugin</a>.</p> - <h2>Default alert</h2> - <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message.</p> + <h3>Default alert</h3> + <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message. <strong>To ensure proper behavior across all devices</strong>, be sure to use <code><button></code> element with the <code>data-dismiss="alert"</code> data attribute.</p> <div class="bs-docs-example"> <div class="alert"> <button type="button" class="close" data-dismiss="alert">×</button> @@ -1404,17 +1405,7 @@ </div> </pre> - <h3>Dismiss buttons</h3> - <p>Mobile Safari and Mobile Opera browsers, in addition to the <code>data-dismiss="alert"</code> attribute, require an <code>href="#"</code> for the dismissal of alerts when using an <code><a></code> tag.</p> - <pre class="prettyprint linenums"><a href="#" class="close" data-dismiss="alert">&times;</a></pre> - <p>Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.</p> - <pre class="prettyprint linenums"><button type="button" class="close" data-dismiss="alert">&times;</button></pre> - - <h3>Dismiss alerts via JavaScript</h3> - <p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.</p> - - - <h2>Options</h2> + <h3>Block alerts</h3> <p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p> <div class="bs-docs-example"> <div class="alert alert-block"> @@ -1431,10 +1422,8 @@ </div> </pre> - - <h2>Contextual alternatives</h2> + <h3>Contextual alternatives</h3> <p>Add optional classes to change an alert's connotation.</p> - <div class="bs-docs-example"> <div class="alert alert-error"> <button type="button" class="close" data-dismiss="alert">×</button> |