Skip to content

B
bootstrap
Commit b4e0e4fe authored by Julian Thilo's avatar Julian Thilo
Browse files
Options

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
parent f00c885d
Hide whitespace changes
Inline Side-by-side
Showing with 82 additions and 51 deletions
docs/assets/css/docs.css
View file @ b4e0e4fe
...@@ -249,7 +249,7 @@ body { ...@@ -249,7 +249,7 @@ body {
border-left: 5px solid #f5d659; border-left: 5px solid #f5d659;
} }
.bs-callout-info { .bs-callout-info {
background-color: #daecf9; background-color: #f0f7fd;
border-left: 5px solid #55a9e1; border-left: 5px solid #55a9e1;
} }
......
docs/components.html
View file @ b4e0e4fe
...@@ -185,8 +185,10 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na ...@@ -185,8 +185,10 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
</ul> </ul>
<h3>Glyphicons attribution</h3> <div class="bs-callout-info">
<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> <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> <h2 id="icons-how-to">How to use</h2>
...@@ -195,7 +197,10 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na ...@@ -195,7 +197,10 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-search"></span>
{% endhighlight %} {% endhighlight %}
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p> <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> <h2 id="icons-examples">Icon examples</h2>
...@@ -225,7 +230,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na ...@@ -225,7 +230,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
</div> </div>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout"> <div class="bs-callout bs-callout-warning">
<h4>Accessibility</h4> <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> <p>Keep in mind that using icons without any additional content means the icons are not represented to screen reader users.</p>
</div> </div>
...@@ -566,7 +571,13 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na ...@@ -566,7 +571,13 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
{% endhighlight %} {% endhighlight %}
<h3 id="btn-groups-justified">Justified button groups</h3> <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="bs-example">
<div class="btn-group btn-group-justified"> <div class="btn-group btn-group-justified">
<a href="#" class="btn btn-default">Left</a> <a href="#" class="btn btn-default">Left</a>
...@@ -592,7 +603,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na ...@@ -592,7 +603,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
</div> </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> <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> <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> <p>Button dropdowns require the <a href="#dropdown-plugin">dropdown plugin</a> to be included in your version of Bootstrap.</p>
</div> </div>
...@@ -929,7 +940,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na ...@@ -929,7 +940,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="nav-disabled-links">Disabled state</h3> <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> <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> <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> <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> </div>
...@@ -1213,7 +1224,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na ...@@ -1213,7 +1224,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
</div> </div>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout"> <div class="bs-callout bs-callout-danger">
<h4>Body padding required</h4> <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> <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 %} {% highlight css %}
...@@ -1242,7 +1253,7 @@ body { padding-top: 70px; } ...@@ -1242,7 +1253,7 @@ body { padding-top: 70px; }
</div> </div>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout"> <div class="bs-callout bs-callout-danger">
<h4>Body padding required</h4> <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> <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 %} {% highlight css %}
...@@ -1343,7 +1354,7 @@ body { padding-bottom: 70px; } ...@@ -1343,7 +1354,7 @@ body { padding-bottom: 70px; }
</div><!-- /.navbar --> </div><!-- /.navbar -->
{% endhighlight %} {% endhighlight %}
<div class="bs-callout"> <div class="bs-callout bs-callout-danger">
<h4>Plugin dependency</h4> <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> <p>The responsive navbar requires the <a href="#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
</div> </div>
...@@ -1660,7 +1671,7 @@ body { padding-bottom: 70px; } ...@@ -1660,7 +1671,7 @@ body { padding-bottom: 70px; }
<h4>Self collapsing</h4> <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> <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> <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> <p>Badges won't self collapse in Internet Explorer 8 because it lacks support for the <code>:empty</code> selector.</p>
</div> </div>
...@@ -1854,7 +1865,13 @@ body { padding-bottom: 70px; } ...@@ -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> <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> <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="bs-example">
<div class="alert"> <div class="alert">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
...@@ -1947,7 +1964,7 @@ body { padding-bottom: 70px; } ...@@ -1947,7 +1964,7 @@ body { padding-bottom: 70px; }
</div> </div>
<p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p> <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> <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> <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> </div>
......
docs/css.html
View file @ b4e0e4fe
...@@ -245,7 +245,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes." ...@@ -245,7 +245,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
</div> </div>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout"> <div class="bs-callout bs-callout-danger">
<h4>Need more examples?</h4> <h4>Need more examples?</h4>
<p>We dive into more grid layouts in a separte page, free of chrome and documentation to better show you the power of the grid.</p> <p>We dive into more grid layouts in a separte page, free of chrome and documentation to better show you the power of the grid.</p>
<p><a class="btn btn-danger" target="_blank" href="../examples/grid/">More grid examples</a></p> <p><a class="btn btn-danger" target="_blank" href="../examples/grid/">More grid examples</a></p>
...@@ -506,7 +506,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes." ...@@ -506,7 +506,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<em>rendered as italicized text</em> <em>rendered as italicized text</em>
{% endhighlight %} {% endhighlight %}
<p>Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p> <div class="bs-callout bs-callout-info">
<h4>Alternate elements</h4>
<p>Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
</div>
<h3>Alignment classes</h3> <h3>Alignment classes</h3>
<p>Easily realign text to components with text alignment classes.</p> <p>Easily realign text to components with text alignment classes.</p>
...@@ -774,10 +777,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes." ...@@ -774,10 +777,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
</dl> </dl>
{% endhighlight %} {% endhighlight %}
<h5>Auto-truncating</h5> <div class="bs-callout bs-callout-info">
<p> <h4>Auto-truncating</h4>
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout. <p>Horizontal description lists will truncate terms that are too long to fit in the left column with <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.</p>
</p> </div>
</div> </div>
...@@ -864,7 +867,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -864,7 +867,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="tables-striped">Striped</h3> <h3 id="tables-striped">Striped</h3>
<p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p> <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>
<div class="bs-callout"> <div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4> <h4>Cross-browser compatibility</h4>
<p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in IE8.</p> <p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in IE8.</p>
</div> </div>
...@@ -1164,7 +1167,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1164,7 +1167,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-inline">Inline form</h3> <h3 id="forms-inline">Inline form</h3>
<p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p> <p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p>
<div class="bs-callout"> <div class="bs-callout bs-callout-danger">
<h4>Requires custom widths</h4> <h4>Requires custom widths</h4>
<p>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.</p> <p>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.</p>
</div> </div>
...@@ -1246,7 +1249,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1246,7 +1249,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Inputs</h3> <h3>Inputs</h3>
<p>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.</p> <p>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.</p>
<div class="bs-callout"> <div class="bs-callout bs-callout-danger">
<h4>Type declaration required</h4> <h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p> <p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
</div> </div>
...@@ -1385,7 +1388,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1385,7 +1388,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-invalid-inputs">Invalid inputs</h3> <h3 id="forms-invalid-inputs">Invalid inputs</h3>
<p>Style inputs via default browser functionality. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p> <p>Style inputs via default browser functionality. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
<div class="bs-callout"> <div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4> <h4>Cross-browser compatibility</h4>
<p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p> <p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p>
</div> </div>
...@@ -1409,12 +1412,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1409,12 +1412,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3> <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
<p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once.</p> <p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once.</p>
<div class="bs-callout"> <div class="bs-callout bs-callout-warning">
<h4>Link functionality of <code>&lt;a&gt;</code> not impacted</h4> <h4>Link functionality of <code>&lt;a&gt;</code> not impacted</h4>
<p>This class will only change the appearance of <code>&lt;a class="btn btn-default"&gt;</code> buttons, not their functionality. Use custom JavaScript to disable links here.</p> <p>This class will only change the appearance of <code>&lt;a class="btn btn-default"&gt;</code> buttons, not their functionality. Use custom JavaScript to disable links here.</p>
</div> </div>
<div class="bs-callout"> <div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4> <h4>Cross-browser compatibility</h4>
<p>While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <code>&lt;disabled&gt;</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p> <p>While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <code>&lt;disabled&gt;</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
</div> </div>
...@@ -1511,7 +1514,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1511,7 +1514,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-input-groups">Input groups</h3> <h3 id="forms-input-groups">Input groups</h3>
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p> <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
<div class="bs-callout"> <div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4> <h4>Cross-browser compatibility</h4>
<p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p> <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
</div> </div>
...@@ -1894,7 +1897,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1894,7 +1897,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button> <button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout"> <div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4> <h4>Cross-browser compatibility</h4>
<p>If you add the <code>disabled</code> attribute to a <code>&lt;button&gt;</code>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.</p> <p>If you add the <code>disabled</code> attribute to a <code>&lt;button&gt;</code>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.</p>
</div> </div>
...@@ -1912,7 +1915,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1912,7 +1915,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p> <p>
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
</p> </p>
<div class="bs-callout"> <div class="bs-callout bs-callout-warning">
<h4>Link functionality not impacted</h4> <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> <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> </div>
...@@ -1933,7 +1936,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1933,7 +1936,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<input class="btn btn-default" type="submit" value="Submit"> <input class="btn btn-default" type="submit" value="Submit">
{% endhighlight %} {% endhighlight %}
<div class="bs-callout"> <div class="bs-callout bs-callout-warning">
<h4>Cross-browser rendering</h4> <h4>Cross-browser rendering</h4>
<p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p> <p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
</div> </div>
...@@ -1950,7 +1953,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1950,7 +1953,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
<p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p> <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>
<div class="bs-callout"> <div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4> <h4>Cross-browser compatibility</h4>
<p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p> <p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
</div> </div>
......
docs/customize.html
View file @ b4e0e4fe
...@@ -355,9 +355,14 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge ...@@ -355,9 +355,14 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div> </div>
</div> </div>
</div> </div>
<div class="bs-callout"> <div class="bs-callout bs-callout-info">
<h4>Heads up!</h4> <h4>Produces two files</h4>
<p>All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p> <p>All checked plugins will be compiled into a readable <code>bootstrap.js</code> and a minified <code>bootstrap.min.js</code>. We recommend you use the minified version in production.</p>
</div>
<div class="bs-callout bs-callout-danger">
<h4>jQuery required</h4>
<p>All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
</div> </div>
</div> </div>
...@@ -1128,7 +1133,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge ...@@ -1128,7 +1133,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<div class="bs-customize-download"> <div class="bs-customize-download">
<a class="btn" href="#" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</a> <a class="btn" href="#" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</a>
</div> </div>
<div class="bs-callout"> <div class="bs-callout bs-callout-danger">
<h4>What's included?</h4> <h4>What's included?</h4>
<p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p> <p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p>
</div> </div>
......
docs/getting-started.html
View file @ b4e0e4fe
...@@ -49,7 +49,7 @@ lead: "An overview of Bootstrap, how to download and use, basic templates and ex ...@@ -49,7 +49,7 @@ lead: "An overview of Bootstrap, how to download and use, basic templates and ex
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout" id="callout-less-compilation"> <div class="bs-callout bs-callout-warning" id="callout-less-compilation">
<h4>LESS compilation</h4> <h4>LESS compilation</h4>
<p>If you download the original files, you need to compile Bootstrap's LESS files into usable CSS. To do that, Bootstrap only officially supports <a href="http://twitter.github.io/recess/">Recess</a>, Twitter's CSS hinter built on top of <a href="http://lesscss.org">less.js</a>.</p> <p>If you download the original files, you need to compile Bootstrap's LESS files into usable CSS. To do that, Bootstrap only officially supports <a href="http://twitter.github.io/recess/">Recess</a>, Twitter's CSS hinter built on top of <a href="http://lesscss.org">less.js</a>.</p>
</div> </div>
...@@ -81,7 +81,7 @@ bootstrap/ ...@@ -81,7 +81,7 @@ bootstrap/
{% endhighlight %} {% endhighlight %}
<p>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 (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p> <p>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 (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
<div class="bs-callout"> <div class="bs-callout bs-callout-danger">
<h4>jQuery required</h4> <h4>jQuery required</h4>
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#examples">starter template</a>.</p> <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#examples">starter template</a>.</p>
</div> </div>
...@@ -228,7 +228,7 @@ bootstrap/ ...@@ -228,7 +228,7 @@ bootstrap/
<p>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.</p> <p>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.</p>
<div class="bs-callout"> <div class="bs-callout bs-callout-info">
<h4>Compiled or minified?</h4> <h4>Compiled or minified?</h4>
<p>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.</p> <p>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.</p>
</div> </div>
...@@ -282,7 +282,7 @@ bootstrap/ ...@@ -282,7 +282,7 @@ bootstrap/
</ul> </ul>
<p>Going beyond light customizations and into visual overhauls is just as straightforward as the above custom button. For a site like <a href="http://yourkarma.com">Karma</a>, which uses Bootstrap as a CSS reset with heavy modifications, more extensive work is involved, but well worth it in the end.</p> <p>Going beyond light customizations and into visual overhauls is just as straightforward as the above custom button. For a site like <a href="http://yourkarma.com">Karma</a>, which uses Bootstrap as a CSS reset with heavy modifications, more extensive work is involved, but well worth it in the end.</p>
<div class="bs-callout"> <div class="bs-callout bs-callout-info">
<h4>Alternate customization methods</h4> <h4>Alternate customization methods</h4>
<p>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 <a href="http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html">your own classes via mixins</a>. For the time being, neither options are documented here.</p> <p>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 <a href="http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html">your own classes via mixins</a>. For the time being, neither options are documented here.</p>
</div> </div>
......
docs/javascript.html
View file @ b4e0e4fe
...@@ -14,8 +14,14 @@ lead: "Bring Bootstrap's components to life with over a dozen custom jQuery plug ...@@ -14,8 +14,14 @@ lead: "Bring Bootstrap's components to life with over a dozen custom jQuery plug
</div> </div>
<h3 id="js-individual-compiled">Individual or compiled</h3> <h3 id="js-individual-compiled">Individual or compiled</h3>
<p>Plugins can be included individually, or all at once. <strong>Do not attempt to include both.</strong> Both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all plugins in a single file.</p> <p>Plugins can be included individually (using <code>bootstrap-*.js</code> original files, or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>.</p>
<div class="bs-callout">
<div class="bs-callout bs-callout-danger">
<h4>Do not attempt to include both.</h4>
<p>Both <code>bootstrap.js</code> and <code>bootstrap.min.js</code> contain all plugins in a single file.</p>
</div>
<div class="bs-callout bs-callout-danger">
<h4>Plugin dependencies</h4> <h4>Plugin dependencies</h4>
<p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs.</p> <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs.</p>
</div> </div>
...@@ -65,7 +71,7 @@ $('#myModal').on('show.bs.modal', function (e) { ...@@ -65,7 +71,7 @@ $('#myModal').on('show.bs.modal', function (e) {
}) })
{% endhighlight %} {% endhighlight %}
<div class="bs-callout" id="callout-third-party-libs"> <div class="bs-callout bs-callout-warning" id="callout-third-party-libs">
<h4>Third-party libraries</h4> <h4>Third-party libraries</h4>
<p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own. Ask on the <a href="http://groups.google.com/group/twitter-bootstrap">mailing list</a> if you need help.</p> <p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own. Ask on the <a href="http://groups.google.com/group/twitter-bootstrap">mailing list</a> if you need help.</p>
</div> </div>
...@@ -532,7 +538,7 @@ $('.dropdown-toggle').dropdown() ...@@ -532,7 +538,7 @@ $('.dropdown-toggle').dropdown()
$('#navbar-example').scrollspy() $('#navbar-example').scrollspy()
{% endhighlight %} {% endhighlight %}
<div class="bs-callout"> <div class="bs-callout bs-callout-danger">
<h4>Resolvable ID targets required</h4> <h4>Resolvable ID targets required</h4>
<p>Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the DOM like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.</p> <p>Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the DOM like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.</p>
</div> </div>
...@@ -825,7 +831,7 @@ $('#example').tooltip(options) ...@@ -825,7 +831,7 @@ $('#example').tooltip(options)
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="bs-callout"> <div class="bs-callout bs-callout-info">
<h4>Data attributes for individual tooltips</h4> <h4>Data attributes for individual tooltips</h4>
<p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p> <p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
</div> </div>
...@@ -869,7 +875,7 @@ $('#example').tooltip(options) ...@@ -869,7 +875,7 @@ $('#example').tooltip(options)
<h2>Examples</h2> <h2>Examples</h2>
<p>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.</p> <p>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.</p>
<div class="bs-callout"> <div class="bs-callout bs-callout-danger">
<h4>Plugin dependency</h4> <h4>Plugin dependency</h4>
<p>Popovers require the <a href="#tooltips">tooltip plugin</a> to be included in your version of Bootstrap.</p> <p>Popovers require the <a href="#tooltips">tooltip plugin</a> to be included in your version of Bootstrap.</p>
</div> </div>
...@@ -1009,7 +1015,7 @@ $('#example').tooltip(options) ...@@ -1009,7 +1015,7 @@ $('#example').tooltip(options)
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="bs-callout"> <div class="bs-callout bs-callout-info">
<h4>Data attributes for individual popovers</h4> <h4>Data attributes for individual popovers</h4>
<p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p> <p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
</div> </div>
...@@ -1229,7 +1235,7 @@ $('.nav-tabs').button() ...@@ -1229,7 +1235,7 @@ $('.nav-tabs').button()
<h4>$().button('toggle')</h4> <h4>$().button('toggle')</h4>
<p>Toggles push state. Gives the button the appearance that it has been activated.</p> <p>Toggles push state. Gives the button the appearance that it has been activated.</p>
<div class="bs-callout"> <div class="bs-callout bs-callout-info">
<h4>Auto toggling</h4> <h4>Auto toggling</h4>
<p>You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p> <p>You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
</div> </div>
...@@ -1244,7 +1250,7 @@ $('.nav-tabs').button() ...@@ -1244,7 +1250,7 @@ $('.nav-tabs').button()
<button type="button" class="btn" data-loading-text="loading stuff...">...</button> <button type="button" class="btn" data-loading-text="loading stuff...">...</button>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout"> <div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4> <h4>Cross-browser compatibility</h4>
<p><a href="https://github.com/twitter/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p> <p><a href="https://github.com/twitter/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
</div> </div>
...@@ -1274,7 +1280,7 @@ $('.nav-tabs').button() ...@@ -1274,7 +1280,7 @@ $('.nav-tabs').button()
<h3>About</h3> <h3>About</h3>
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p> <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
<div class="bs-callout"> <div class="bs-callout bs-callout-danger">
<h4>Plugin dependency</h4> <h4>Plugin dependency</h4>
<p>Collapse requires the <a href="#transitions">transitions plugin</a> to be included in your version of Bootstrap.</p> <p>Collapse requires the <a href="#transitions">transitions plugin</a> to be included in your version of Bootstrap.</p>
</div> </div>
...@@ -1541,7 +1547,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () { ...@@ -1541,7 +1547,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
<h3>Optional captions</h3> <h3>Optional captions</h3>
<p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p> <p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p>
<div class="bs-callout"> <div class="bs-callout bs-callout-info">
<h4>Responsive visibility</h4> <h4>Responsive visibility</h4>
<p><strong>Captions are hidden by default</strong> and will show up only with viewports greater than 768px wide.</p> <p><strong>Captions are hidden by default</strong> and will show up only with viewports greater than 768px wide.</p>
</div> </div>
...@@ -1712,7 +1718,7 @@ $('#myCarousel').on('slide.bs.carousel', function () { ...@@ -1712,7 +1718,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {
<div data-spy="affix" data-offset-top="200">...</div> <div data-spy="affix" data-offset-top="200">...</div>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout"> <div class="bs-callout bs-callout-warning">
<h4>Requires positioning</h4> <h4>Requires positioning</h4>
<p>You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>. 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.</p> <p>You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>. 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.</p>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment