rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Sidenotes instead of alerts

Browse Source 
* I propose: make the docs rely more heavily on the new design language,
replace alerts (not the .alert examples) by sidenotes.
* Remove alert-heading class, which no longer exists in CSS.
This commit is contained in:
Julian Thilo 2013-04-14 04:04:01 +02:00
parent ae98f1803f
commit d7bc89b433
1 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
docs/docs.html
View File

@ -2561,10 +2561,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% endhighlight %} {% endhighlight %}
<p class="alert alert-info"> <div class="bs-docs-sidenote">
<strong>Heads up!</strong> <p><strong>Accessibility</strong></p>
Using icons without any additional content means the icons are not represented to screen reader users. <p>Keep in mind that using icons without any additional content means the icons are not represented to screen reader users.</p>
</p> </div>
<h5>Dropdown in a button group</h5> <h5>Dropdown in a button group</h5>
<div class="bs-docs-example"> <div class="bs-docs-example">
@ -3602,8 +3602,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div><!-- /.navbar --> </div><!-- /.navbar -->
{% endhighlight %} {% endhighlight %}
<div class="alert alert-info"> <div class="bs-docs-sidenote">
<strong>Heads up!</strong> The responsive navbar requires the <a href="#collapse">collapse plugin</a>. <p><strong>Plugin dependency</strong></p>
<p>The responsive navbar requires the <a href="#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
</div> </div>
@ -5288,9 +5289,9 @@ $('.dropdown-toggle').dropdown()
$('.navbar').scrollspy() $('.navbar').scrollspy()
{% endhighlight %} {% endhighlight %}
<div class="alert alert-info"> <div class="bs-docs-sidenote">
<strong>Heads up!</strong> <p><strong>Resolvable ID targets required</strong></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>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>
<h3>Methods</h3> <h3>Methods</h3>
@ -5577,9 +5578,9 @@ $('#example').tooltip(options)
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="alert alert-info"> <div class="bs-docs-sidenote">
<strong>Heads up!</strong> <p><strong>Data attributes for individual tooltips</strong></p>
Options for individual tooltips can alternatively be specified through the use of data attributes. <p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
</div> </div>
<h3>Markup</h3> <h3>Markup</h3>
@ -5757,9 +5758,9 @@ $('#example').tooltip(options)
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="alert alert-info"> <div class="bs-docs-sidenote">
<strong>Heads up!</strong> <p><strong>Data attributes for individual popovers</strong>
Options for individual popovers can alternatively be specified through the use of data attributes. <p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
</div> </div>
<h3>Markup</h3> <h3>Markup</h3>
@ -5808,7 +5809,7 @@ $('#example').tooltip(options)
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="alert alert-block alert-error fade in"> <div class="alert alert-block alert-error fade in">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<h4 class="alert-heading">Oh snap! You got an error!</h4> <h4>Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p> <p>
<a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a> <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
@ -5977,9 +5978,9 @@ $('.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="alert alert-info"> <div class="bs-docs-sidenote">
<strong>Heads up!</strong> <p><strong>Auto toggling</strong></p>
You can enable auto toggling of a button by using the <code>data-toggle</code> attribute. <p>You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
</div> </div>
{% highlight html linenos %} {% highlight html linenos %}
<button type="button" class="btn" data-toggle="button">...</button> <button type="button" class="btn" data-toggle="button">...</button>
@ -5992,9 +5993,9 @@ $('.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="alert alert-info"> <div class="bs-docs-sidenote">
<strong>Heads up!</strong> <p><strong>Cross-browser compatibility</strong></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><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>
<h4>$().button('reset')</h4> <h4>$().button('reset')</h4>
@ -6393,6 +6394,7 @@ $('.carousel').carousel({
<h4>.carousel('pause')</h4> <h4>.carousel('pause')</h4>
<p>Stops the carousel from cycling through items.</p> <p>Stops the carousel from cycling through items.</p>
<h4>.carousel(number)</h4> <h4>.carousel(number)</h4>
<p>Cycles the carousel to a particular frame (0 based, similar to an array).</p> <p>Cycles the carousel to a particular frame (0 based, similar to an array).</p>
@ -6544,9 +6546,9 @@ $('.typeahead').typeahead()
<div data-spy="affix" data-offset-top="200">...</div> <div data-spy="affix" data-offset-top="200">...</div>
{% endhighlight %} {% endhighlight %}
<div class="alert alert-info"> <div class="bs-docs-sidenote">
<strong>Heads up!</strong> <p><strong>Heads up!</strong></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>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>
<h3>Via JavaScript</h3> <h3>Via JavaScript</h3>