mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-15 11:59:39 +03:00
Code Activity

Adjust info callout, add callouts to docs

Browse Source 
* 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
This commit is contained in:
Julian Thilo
2013-06-26 15:59:33 +02:00
parent f00c885d4c
commit b4e0e4fee6
6 changed files with 82 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components.html
+30 -13
View File
@@ -185,8 +185,10 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
</ul>
<h3>Glyphicons attribution</h3>
<p><a href="http://glyphicons.com/">Glyphicons</a> 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 <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p>
<div class="bs-callout-info">
<h4>Glyphicons attribution</h4>
<p><a href="http://glyphicons.com/">Glyphicons</a> 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 <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p>
</div>
<h2 id="icons-how-to">How to use</h2>
@@ -195,7 +197,10 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<span class="glyphicon glyphicon-search"></span>
{% endhighlight %}
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
<p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
<div class="bs-callout bs-callout-warning">
<h4>Readability</h4>
<p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
</div>
<h2 id="icons-examples">Icon examples</h2>
@@ -225,7 +230,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
</div>
{% endhighlight %}
<div class="bs-callout">
<div class="bs-callout bs-callout-warning">
<h4>Accessibility</h4>
<p>Keep in mind that using icons without any additional content means the icons are not represented to screen reader users.</p>
</div>
@@ -566,7 +571,13 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
{% endhighlight %}
<h3 id="btn-groups-justified">Justified button groups</h3>
<p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code>&lt;a&gt;</code> elements</strong> as the <code>&lt;button&gt;</code> doesn't pick up these styles.</p>
<p>Make a group of buttons stretch at the same size to span the entire width of its parent.</p>
<div class="bs-callout bs-callout-warning">
<h4>Element-specific usage</h4>
<p>This only works with <code>&lt;a&gt;</code> elements as the <code>&lt;button&gt;</code> doesn't pick up these styles.</p>
</div>
<div class="bs-example">
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-default">Left</a>
@@ -592,7 +603,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
</div>
<p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
<div class="bs-callout">
<div class="bs-callout bs-callout-danger">
<h4>Plugin dependency</h4>
<p>Button dropdowns require the <a href="#dropdown-plugin">dropdown plugin</a> to be included in your version of Bootstrap.</p>
</div>
@@ -929,7 +940,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="nav-disabled-links">Disabled state</h3>
<p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p>
<div class="bs-callout">
<div class="bs-callout bs-callout-warning">
<h4>Link functionality not impacted</h4>
<p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p>
</div>
@@ -1213,7 +1224,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
</div>
{% endhighlight %}
<div class="bs-callout">
<div class="bs-callout bs-callout-danger">
<h4>Body padding required</h4>
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code>&lt;body&gt;</code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
{% highlight css %}
@@ -1242,7 +1253,7 @@ body { padding-top: 70px; }
</div>
{% endhighlight %}
<div class="bs-callout">
<div class="bs-callout bs-callout-danger">
<h4>Body padding required</h4>
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code>&lt;body&gt;</code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
{% highlight css %}
@@ -1343,7 +1354,7 @@ body { padding-bottom: 70px; }
</div><!-- /.navbar -->
{% endhighlight %}
<div class="bs-callout">
<div class="bs-callout bs-callout-danger">
<h4>Plugin dependency</h4>
<p>The responsive navbar requires the <a href="#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
</div>
@@ -1660,7 +1671,7 @@ body { padding-bottom: 70px; }
<h4>Self collapsing</h4>
<p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
<div class="bs-callout">
<div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<p>Badges won't self collapse in Internet Explorer 8 because it lacks support for the <code>:empty</code> selector.</p>
</div>
@@ -1854,7 +1865,13 @@ body { padding-bottom: 70px; }
<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="./docs/#js-alerts">alerts jQuery plugin</a>.</p>
<h3 id="alerts-default">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>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
<p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message.</p>
<div class="bs-callout bs-callout-warning">
<h4>Ensure proper behavior across all devices</h4>
<p>Be sure to use the <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
</div>
<div class="bs-example">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">&times;</button>
@@ -1947,7 +1964,7 @@ body { padding-bottom: 70px; }
</div>
<p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
<div class="bs-callout">
<div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<p>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.</p>
</div>