<li>Typeahead has been dropped, in favor of using <ahref="http://twitter.github.io/typeahead.js/">Twitter Typeahead</a>.</li>
<li>Typeahead has been dropped, in favor of using <ahref="http://twitter.github.io/typeahead.js/">Twitter Typeahead</a>.</li>
<li>Modal markup has changed significantly. The <code>.modal-header</code>, <code>.modal-body</code>, and <code>.modal-footer</code> sections are now wrapped in <code>.modal-content</code> and <code>.modal-dialog</code> for better mobile styling and behavior.</li>
<li>Modal markup has changed significantly. The <code>.modal-header</code>, <code>.modal-body</code>, and <code>.modal-footer</code> sections are now wrapped in <code>.modal-content</code> and <code>.modal-dialog</code> for better mobile styling and behavior.</li>
<li>The HTML loaded by the <code>remote</code> modal option is now injected into the <code>.modal</code> instead of into the <code>.modal-body</code>. This allows you to also easily vary the header and footer of the modal, not just the modal body.</li>
<li>The HTML loaded by the <code>remote</code> modal option is now injected into the <code>.modal</code> instead of into the <code>.modal-body</code>. This allows you to also easily vary the header and footer of the modal, not just the modal body.</li>
<li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc..</li>
<li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc.</li>
</ul>
</ul>
<p>For more information on upgrading to v3.0, and code snippets from the community, see <ahref="http://bootply.com/">Bootply</a>.</p>
<p>For more information on upgrading to v3.0, and code snippets from the community, see <ahref="http://bootply.com/">Bootply</a>.</p>
<p>Manually toggles a modal.<strong>Returns to the caller before the modal has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.modal</code> or <code>hidden.bs.modal</code> event occurs).</p>
<p>Manually opens a modal.<strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code>shown.bs.modal</code> event occurs).</p>
<p>Manually hides a modal.<strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code>hidden.bs.modal</code> event occurs).</p>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
<td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
</tr>
</tr>
<tr>
<tr>
<td>shown.bs.modal</td>
<td>shown.bs.modal</td>
<td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).</td>
<td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
</tr>
</tr>
<tr>
<tr>
<td>hide.bs.modal</td>
<td>hide.bs.modal</td>
...
@@ -346,8 +346,8 @@ $('#myModal').modal({
...
@@ -346,8 +346,8 @@ $('#myModal').modal({
</table>
</table>
</div><!-- /.table-responsive -->
</div><!-- /.table-responsive -->
{% highlight js %}
{% highlight js %}
$('#myModal').on('hidden.bs.modal', function () {
$('#myModal').on('hidden.bs.modal', function (e) {
// do something…
// do something...
})
})
{% endhighlight %}
{% endhighlight %}
</div>
</div>
...
@@ -529,6 +529,7 @@ $('#myDropdown').on('show.bs.dropdown', function () {
...
@@ -529,6 +529,7 @@ $('#myDropdown').on('show.bs.dropdown', function () {
@@ -588,7 +589,13 @@ $('#myDropdown').on('show.bs.dropdown', function () {
...
@@ -588,7 +589,13 @@ $('#myDropdown').on('show.bs.dropdown', function () {
<h3>Via data attributes</h3>
<h3>Via data attributes</h3>
<p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code><body></code>). Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p>
<p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code><body></code>). Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p>
@@ -1926,22 +1933,27 @@ $('#myCarousel').on('slide.bs.carousel', function () {
...
@@ -1926,22 +1933,27 @@ $('#myCarousel').on('slide.bs.carousel', function () {
<hrclass="bs-docs-separator">
<hrclass="bs-docs-separator">
<h2id="affix-usage">Usage</h2>
<h2id="affix-usage">Usage</h2>
<p>Use the affix plugin via data attributes or manually with your own JavaScript. <strong>In both situations, you must provide CSS for the positioning of your content.</strong></p>
<h3>Positioning via CSS</h3>
<p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.</p>
<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 it's 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 elemtn from there.</li>
</ol>
<p>Follow the above steps to set your CSS for either of the usage options below.</p>
<h3>Via data attributes</h3>
<h3>Via data attributes</h3>
<p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.</p>
<p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.</p>
Affix toggles between three states/classes: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin).
The <code>.affix-top</code> class should be in the regular flow of the document. The <code>.affix</code> class should be <code>position: fixed</code>. And <code>.affix-bottom</code> should be <code>position: absolute</code>. Note: <code>.affix-bottom</code> is special in that the plugin will place the element with JS relative to the <code>offset: { bottom: number }</code> option you've provided.
