update more readme changes - introduce target specificty convention to more plugins

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">
 &lt;a class="btn" data-toggle="modal" href="#myModal" &gt;Launch Modal&lt;/a&gt;
 </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">
 &lt;ul class="tabs"&gt;
   &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
-  &lt;li class="dropdown"&gt;
-    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown&lt;/a&gt;
+  &lt;li id="secondary" class="dropdown"&gt;
+    &lt;a href="#secondary" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown&lt;/a&gt;
     &lt;ul class="dropdown-menu"&gt;
       &lt;li&gt;&lt;a href="#"&gt;Secondary link&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
@@ -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 () {
 &lt;/script&gt;</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')
 &lt;/scrip&gt;</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>