<div class="bs-callout bs-callout-danger">
<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. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files).</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. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files). <a href="{{ site.repo }}/blob/v{{ site.current_version }}/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
</div>
<h3 id="js-data-attrs">Data attributes</h3>
<h2 id="modals-examples">Examples</h2>
<p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
+ <div class="bs-callout bs-callout-warning" id="callout-stacked-modals">
+ <h4>Overlapping modals not supported</h4>
+ <p>Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.</p>
+ </div>
+ <div class="bs-callout bs-callout-warning">
+ <h4>Mobile device caveats</h4>
+ <p>There are some caveats regarding using modals on mobile devices. <a href="{{ page.base_url }}getting-started#mobile-modals">See our browser support docs</a> for details.</p>
+ </div>
+
<h3>Static example</h3>
<p>A rendered modal with header, body, and set of actions in the footer.</p>
<div class="bs-example bs-example-modal">
</div><!-- /.modal -->
<div class="bs-example" style="padding-bottom: 24px;">
- <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
+ <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+ Launch demo modal
+ </button>
</div><!-- /example -->
{% highlight html %}
- <!-- Button trigger modal -->
- <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
-
- <!-- Modal -->
- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h4 class="modal-title">Modal title</h4>
- </div>
- <div class="modal-body">
- ...
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary">Save changes</button>
- </div>
- </div><!-- /.modal-content -->
- </div><!-- /.modal-dialog -->
- </div><!-- /.modal -->
+<!-- Button trigger modal -->
+<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+ Launch demo modal
+</button>
+
+<!-- Modal -->
+<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+ <h4 class="modal-title" id="myModalLabel">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Make modals accessible</h4>
- <p>
- Be sure to add <code>role="dialog"</code> to your primary modal div. In the example above, <code>div#myModal</code>.<br>
- Also, the <code>aria-labelledby</code> attribute references your modal title. In this example, <code>h4#myModalLabel</code>.<br>
- Finally, <code>aria-hidden="true"</code> tells assistive technologies to skip DOM elements.<br>
- Additionally, you may give a description of your modal dialog. Use the <code>aria-describedby</code> attribute in the modal's primary <code><div></code> to point to this description (this is not shown in the above example).
- </p>
+ <p>Be sure to add <code>role="dialog"</code> to <code>.modal</code>, <code>aria-labelledby="myModalLabel"</code> attribute to reference the modal title, and <code>aria-hidden="true"</code> to tell assistive technologies to skip the modal's DOM elements.</p>
+ <p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p>
</div>
<h2 id="modals-usage">Usage</h2>
+ <p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code>.model-open</code> to the <code><body></code> to override default scrolling behavior and generates a <code>.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p>
<h3>Via data attributes</h3>
<p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
<tbody>
<tr>
<td>backdrop</td>
- <td>boolean</td>
+ <td>boolean or the string <code>'static'</code></td>
<td>true</td>
<td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
</tr>
<td>remote</td>
<td>path</td>
<td>false</td>
- <td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the root of the modal element. If you're using the data api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
+ <td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the root of the modal element. If you're using the data-api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
{% highlight html %}
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
{% endhighlight %}
+ </td>
</tr>
</tbody>
</table>
<h2 id="dropdowns-usage">Usage</h2>
+ <p>Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the <code>.open</code> class on the parent list item. When opened, the plugin also adds <code>.dropdown-backdrop</code> as a click area for closing dropdown menus when clicking outside the menu.</p>
<h3>Via data attributes</h3>
<p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
+
+
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
<h2 id="scrollspy-usage">Usage</h2>
<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>
{% highlight html %}
<body data-spy="scroll" data-target="#navbar-example">
...
</div>
</div><!-- /example -->
+ <div class="bs-callout bs-callout-info">
+ <h4>Extends tabbed navigation</h4>
+ <p>This plugin extends the <a href="../components/#nav-tabs">tabbed navigation component</a> to add tabbable areas.</p>
+ </div>
+
<h2 id="tabs-usage">Usage</h2>
<p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p>
{% endhighlight %}
<h3>Markup</h3>
- <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap tab styling.</p>
+ <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="{{ page.base_url }}components#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="{{ page.base_url }}components#nav-pills">pill styling</a>.</p>
{% highlight html %}
+<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
+
+<!-- Tab panes -->
+<div class="tab-content">
+ <div class="tab-pane active" id="home">...</div>
+ <div class="tab-pane" id="profile">...</div>
+ <div class="tab-pane" id="messages">...</div>
+ <div class="tab-pane" id="settings">...</div>
+</div>
{% endhighlight %}
- <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
+ <h3>Fade effect</h3>
+ <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>. The first tab pane must also have <code>.in</code> to properly fade in initial content.</p>
+{% highlight html %}
+<div class="tab-content">
+ <div class="tab-pane fade in active" id="home">...</div>
+ <div class="tab-pane fade" id="profile">...</div>
+ <div class="tab-pane fade" id="messages">...</div>
+ <div class="tab-pane fade" id="settings">...</div>
+</div>
+{% endhighlight %}
<h3>Methods</h3>
<h4>$().tab</h4>
</p>
{% highlight html %}
<ul class="nav nav-tabs" id="myTab">
- <li class="active"><a href="#home">Home</a></li>
- <li><a href="#profile">Profile</a></li>
- <li><a href="#messages">Messages</a></li>
- <li><a href="#settings">Settings</a></li>
+ <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
+ <li><a href="#profile" data-toggle="tab">Profile</a></li>
+ <li><a href="#messages" data-toggle="tab">Messages</a></li>
+ <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
</div>
</div><!-- /example -->
+ <div class="bs-callout bs-callout-danger">
+ <h4>Opt-in functionality</h4>
+ <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
+ </div>
<div class="bs-callout bs-callout-info">
<h4>Tooltips in button groups and input groups require special setting</h4>
<p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p>
</div>
-
+ <div class="bs-callout bs-callout-info">
+ <h4>Tooltips on disabled elements require wrapper elements</h4>
+ <p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code><div></code> and apply the tooltip to that <code><div></code> instead.</p>
+ </div>
<h2 id="tooltips-usage">Usage</h2>
+ <p>The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.</p>
<p>Trigger the tooltip via JavaScript:</p>
{% highlight js %}
$('#example').tooltip(options)
+{% endhighlight %}
+
+ <h3>Markup</h3>
+ <p>The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code>top</code> by the plugin).</p>
+{% highlight html linenos %}
+<div class="tooltip">
+ <div class="tooltip-inner">
+ Tooltip!
+ </div>
+ <div class="tooltip-arrow"></div>
+</div>
{% endhighlight %}
<h3>Options</h3>
<h4>Plugin dependency</h4>
<p>Popovers require the <a href="#tooltips">tooltip plugin</a> to be included in your version of Bootstrap.</p>
</div>
+ <div class="bs-callout bs-callout-danger">
+ <h4>Opt-in functionality</h4>
+ <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
+ </div>
<div class="bs-callout bs-callout-info">
<h4>Popovers in button groups and input groups require special setting</h4>
<p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p>
</div>
+ <div class="bs-callout bs-callout-info">
+ <h4>Popovers on disabled elements require wrapper elements</h4>
+ <p>To add a popover to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code><div></code> and apply the popover to that <code><div></code> instead.</p>
+ </div>
<h3>Static popover</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p>
<div class="popover bottom">
<div class="arrow"></div>
<h3 class="popover-title">Popover bottom</h3>
+
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<h3>Live demo</h3>
<div class="bs-example" style="padding-bottom: 24px;">
- <a href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
+ <a href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?" role="button">Click to toggle popover</a>
</div>
<h4>Four directions</h4>
<td>selector</td>
<td>string</td>
<td>false</td>
- <td>if a selector is provided, tooltip objects will be delegated to the specified targets if a selector is provided, tooltip objects will be delegated to the specified targets. in practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/KPeKS/4/">an informative example</a>.</td>
+ <td>if a selector is provided, tooltip objects will be delegated to the specified targets. in practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td>
</tr>
<tr>
<td>trigger</td>
<p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
</div>
- <h3>Markup</h3>
- <p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
-
<h3>Methods</h3>
<h4>$().popover(options)</h4>
<p>Initializes popovers for an element collection.</p>
</div><!-- /example -->
<div class="bs-example">
- <div class="alert alert-block alert-danger fade in">
+ <div class="alert alert-danger fade in">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<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>
- <a class="btn btn-danger" href="#">Take this action</a> <a class="btn btn-default" href="#">Or do this</a>
+ <button type="button" class="btn btn-danger">Take this action</button>
+ <button type="button" class="btn btn-default">Or do this</button>
</p>
</div>
</div><!-- /example -->
<h2 id="buttons-usage">Usage</h2>
<p>Enable buttons via JavaScript:</p>
{% highlight js %}
-$('.nav-tabs').button()
+$('.btn-group').button()
{% endhighlight %}
<h3>Markup</h3>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
- <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+ <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
- <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
+ <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
- <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
+ <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
- <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+ <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
- <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
+ <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
- <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
+ <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
<h2 id="collapse-usage">Usage</h2>
+ <p>The collapse plugin utilizes a few classes to handle the heavy lifting:</p>
+ <ul>
+ <li><code>.collapse</code> hides the content</li>
+ <li><code>.collapse.in</code> shows the content</li>
+ <li><code>.collapsing</code> is added when the transition starts, and removed when it finishes</li>
+ </ul>
+ <p>These classes can be found in <code>component-animations.less</code>.</p>
<h3>Via data attributes</h3>
<p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a CSS selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
<h2 id="carousel-examples">Examples</h2>
<p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
<div class="bs-example">
- <div id="carousel-example-generic" class="carousel slide bs-docs-carousel-example">
+ <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
- <img src="data:image/png;base64," data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
+ <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
</div>
<div class="item">
- <img src="data:image/png;base64," data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
+ <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
</div>
<div class="item">
- <img src="data:image/png;base64," data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
+ <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
- <span class="icon-prev"></span>
+ <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
- <span class="icon-next"></span>
+ <span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div><!-- /example -->
{% highlight html %}
-<div id="carousel-example-generic" class="carousel slide">
+<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
- <span class="icon-prev"></span>
+ <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
- <span class="icon-next"></span>
+ <span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
{% endhighlight %}
-<div class="bs-callout bs-callout-info">
- <h4>Glyphicon Alternative</h4>
- <p>With <a href="{{ page.base_url }}components/#glyphicons">Glyphicons</a> available, you may choose to style the left and right toggle buttons with <code>.glyphicon .glyphicon-chevron-left</code> and <code>.glyphicon .glyphicon-chevron-right</code>.</p>
+<div class="bs-callout bs-callout-warning" id="callout-carousel-transitions">
+ <h4>Transition animations not supported in Internet Explorer 8 & 9</h4>
+ <p>Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 8 & 9 don't support the necessary CSS properties. Thus, there are no slide transition animations when using these browsers. We have intentionally decided not to include jQuery-based fallbacks for the transitions.</p>
</div>
<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>
<div class="bs-example">
- <div id="carousel-example-captions" class="carousel slide bs-docs-carousel-example">
+ <div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
- <img data-src="holder.js/900x500/auto/#777:#777" src="data:image/png;base64," alt="First slide image">
+ <img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
- <img data-src="holder.js/900x500/auto/#666:#666" src="data:image/png;base64," alt="Second slide image">
+ <img data-src="holder.js/900x500/auto/#666:#666" alt="Second slide image">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
- <img data-src="holder.js/900x500/auto/#555:#5555" src="data:image/png;base64," alt="Third slide image">
+ <img data-src="holder.js/900x500/auto/#555:#5555" alt="Third slide image">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
- <span class="icon-prev"></span>
+ <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
- <span class="icon-next"></span>
+ <span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div><!-- /example -->
<h3>Via data attributes</h3>
<p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to its current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code>0</code>.</p>
+ <p>The <code>data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load.</p>
<h3>Via JavaScript</h3>
<p>Call carousel manually with:</p>
<div class="bs-callout bs-callout-warning">
<h4>Requires independent styling ;)</h4>
<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 fixed to the page. And <code>affix-bottom</code> should be positioned absolute. 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.
+ 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.
</p>
</div>
projects / bootswatch / blobdiff