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/css.html
+20 -17
View File
@@ -245,7 +245,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
</div>
{% endhighlight %}
<div class="bs-callout">
<div class="bs-callout bs-callout-danger">
<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><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."
<em>rendered as italicized text</em>
{% 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>
<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."
</dl>
{% endhighlight %}
<h5>Auto-truncating</h5>
<p>
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>
<div class="bs-callout bs-callout-info">
<h4>Auto-truncating</h4>
<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>
</div>
</div>
@@ -864,7 +867,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<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>
<div class="bs-callout">
<div class="bs-callout bs-callout-danger">
<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>
</div>
@@ -1164,7 +1167,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<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>
<div class="bs-callout">
<div class="bs-callout bs-callout-danger">
<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>
</div>
@@ -1246,7 +1249,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<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>
<div class="bs-callout">
<div class="bs-callout bs-callout-danger">
<h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
</div>
@@ -1385,7 +1388,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<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>
<div class="bs-callout">
<div class="bs-callout bs-callout-danger">
<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>
</div>
@@ -1409,12 +1412,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<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>
<div class="bs-callout">
<div class="bs-callout bs-callout-warning">
<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>
</div>
<div class="bs-callout">
<div class="bs-callout bs-callout-danger">
<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>
</div>
@@ -1511,7 +1514,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<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>
<div class="bs-callout">
<div class="bs-callout bs-callout-danger">
<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>
</div>
@@ -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>
{% endhighlight %}
<div class="bs-callout">
<div class="bs-callout bs-callout-danger">
<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>
</div>
@@ -1912,7 +1915,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
</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>
@@ -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">
{% endhighlight %}
<div class="bs-callout">
<div class="bs-callout bs-callout-warning">
<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>
</div>
@@ -1950,7 +1953,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
<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>
<p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
</div>