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

Merge pull request #14166 from hnrch02/docs-cleanup

Browse Source 
Docs cleanup
This commit is contained in:
Mark Otto 2014-07-23 20:39:40 -07:00
commit 463fe476d8
3 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
docs/_includes/js/affix.html
View File

@ -14,8 +14,8 @@
<p>Here's how the affix plugin works:</p>
<ol>
<li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in its top-most position. At this point no CSS positioning is required.</li>
<li>Scrolling past the element you want affixed should trigger the actual affixing. This is where <code>.affix</code> replaces <code>.affix-top</code> and sets <code>position: fixed;</code> (provided by Bootstrap's code CSS).</li>
<li>If a bottom offset is defined, scrolling past that should replace <code>.affix</code> with <code>.affix-bottom</code>. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add <code>position: absolute;</code> when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.</li>
<li>Scrolling past the element you want affixed should trigger the actual affixing. This is where <code>.affix</code> replaces <code>.affix-top</code> and sets <code>position: fixed;</code> (provided by Bootstrap's CSS).</li>
<li>If a bottom offset is defined, scrolling past it should replace <code>.affix</code> with <code>.affix-bottom</code>. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add <code>position: absolute;</code> when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.</li>
</ol>
<p>Follow the above steps to set your CSS for either of the usage options below.</p>
@ -31,14 +31,14 @@
<h3>Via JavaScript</h3>
<p>Call the affix plugin via JavaScript:</p>
{% highlight js %}
$('#my-affix').affix({
offset: {
top: 100
, bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
$('#myAffix').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
})
}
})
{% endhighlight %}
@ -75,7 +75,7 @@
<h3>Events</h3>
<p>Bootstrap's affix class exposes a few events for hooking into affix functionality.</p>
<p>Bootstrap's affix plugin exposes a few events for hooking into affix functionality.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>

24
docs/_includes/js/alerts.html
View File

@ -3,14 +3,12 @@
<h2 id="alerts-examples">Example alerts</h2>
<p>Add dismiss functionality to all alert messages with this plugin.</p>
<div class="bs-example">
<div class="bs-example bs-example-standalone">
<div class="alert alert-warning alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
</div><!-- /example -->
<div class="bs-example">
<div class="alert alert-danger alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4>Oh snap! You got an error!</h4>
@ -24,21 +22,25 @@
<h2 id="alerts-usage">Usage</h2>
<p>Enable dismissal of an alert via JavaScript:</p>
{% highlight js %}$(".alert").alert(){% endhighlight %}
<h3>Markup</h3>
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
{% highlight html %}<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>{% endhighlight %}
{% highlight html %}
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
{% endhighlight %}
<p>To have your alerts use animation when closing, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
<h3>Methods</h3>
<h4>$().alert()</h4>
<p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
<p>Makes an alert listen for click events on descendant elements which have the <code>data-dismiss="alert"</code> attribute. (Not necessary when using the data-api's auto-initialization.)</p>
<h4>.alert('close')</h4>
<h4>$().alert('close')</h4>
<p>Closes an alert.</p>
{% highlight js %}$(".alert").alert('close'){% endhighlight %}
<h3>Events</h3>
@ -64,7 +66,7 @@
</table>
</div><!-- /.table-responsive -->
{% highlight js %}
$('#my-alert').on('closed.bs.alert', function () {
$('#myAlert').on('closed.bs.alert', function () {
// do something…
})
{% endhighlight %}

3
docs/assets/css/src/docs.css
View File

@ -906,6 +906,9 @@ h1[id] {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.bs-example-standalone {
border-radius: 4px;
}
}
/* Undo width of container */