diff options
Diffstat (limited to 'docs/javascript.html')
| -rw-r--r-- | docs/javascript.html | 39 |
1 files changed, 18 insertions, 21 deletions
diff --git a/docs/javascript.html b/docs/javascript.html index 45a7a2fe8..8a9a203e7 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -112,7 +112,7 @@ <div class="span9"> <h3>What's included</h3> <p>Bring some of Bootstrap's primary components to life with custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. We encourage you to extend and modify them to fit your specific development needs.</p> - <table class="striped-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 150px;">File</th> @@ -186,7 +186,7 @@ <h3>Using bootstrap-modal</h3> <pre class="prettyprint linenums">$('#myModal').modal(options)</pre> <h3>Options</h3> - <table class="striped-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -208,16 +208,11 @@ <td>true</td> <td>Closes the modal when escape key is pressed</td> </tr> - <tr> - <td>show</td> - <td>boolean</td> - <td>true</td> - <td>Opens modal on class initialization</td> - </tr> </tbody> </table> <h3>Markup</h3> - <p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as additoinal data attributes.</p> + <p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal.</p> + <p>Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.</p> <pre class="prettyprint linenums"> <a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a> </pre> @@ -240,7 +235,7 @@ $('#myModal').modal({ <pre class="prettyprint linenums">$('#myModal').modal('hide')</pre> <h3>Events</h3> <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p> - <table class="striped-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 150px;">Event</th> @@ -311,12 +306,14 @@ $('#myModal').on('hidden', function () { <h3>Using boostrap-dropdown.js</h3> <pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre> <h3>Markup</h3> - <p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code>. Any valid bootstrap dropdown will automatically be activated.</p> + <p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code> and any valid bootstrap dropdown will automatically be activated.</p> + <p><span class="label notice">Notice</span> For added control and flexibility, optionally specify a <code>data-target="#fat"</code> or <code>href="#fat"</code> - this allows you to target specific dropdowns.</p> + <pre class="prettyprint linenums"> <ul class="tabs"> <li class="active"><a href="#">Home</a></li> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> + <li id="secondary" class="dropdown"> + <a href="#secondary" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> @@ -343,7 +340,7 @@ $('#myModal').on('hidden', function () { <input type="text" class="search-query span2" placeholder="Search"> </form> <ul class="nav secondary-nav"> - <li class="dropdown"> + <li id="fat-menu" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> @@ -352,7 +349,7 @@ $('#myModal').on('hidden', function () { <li><a href="#">Another link</a></li> </ul> </li> - <li class="dropdown"> + <li id="mdo-menu" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> @@ -493,7 +490,7 @@ $('#myModal').on('hidden', function () { </script></pre> </p> <h3>Events</h3> - <table class="zebra-striped"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 150px;">Event</th> @@ -571,7 +568,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h3>Using bootstrap-twipsy.js</h3> <pre class="prettyprint linenums">$('#example').twipsy(options)</pre> <h3>Options</h3> - <table class="striped-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -661,7 +658,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h3>Using boostrap-popover.js</h3> <pre class="prettyprint linenums">$('#example').popover(options)</pre> <h3>Options</h3> - <table class="striped-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -834,7 +831,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { $('.btn').button('complete') </scrip></pre> <h3>Demo</h3> - <table class="striped-table"> + <table class="bordered-table striped-table"> <tbody> <tr> <td>Stateful</td> @@ -903,7 +900,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h3>Using bootstrap-collapse.js</h3> <pre class="prettyprint linenums">$(".collapse").collapse()</pre> <h3>Options</h3> - <table class="striped-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -953,7 +950,7 @@ $('#myCollapsible').collapse({ <p> Bootstrap's collapse class exposes a few events for hooking into collapse functionality. </p> - <table class="striped-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 150px;">Event</th> |