Merge pull request #15111 from twbs/events-tables-wrapping

Don't line wrap event names in JS plugin docs

docs/_includes/js/affix.html

@@ -77,7 +77,7 @@ $('#myAffix').affix({
   <h3 id="affix-events">Events</h3>
   <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">
+    <table class="table table-bordered table-striped bs-events-table">
       <thead>
         <tr>
           <th style="width: 150px;">Event Type</th>

docs/_includes/js/alerts.html

@@ -47,7 +47,7 @@
   <h3 id="alerts-events">Events</h3>
   <p>Bootstrap's alert plugin exposes a few events for hooking into alert functionality.</p>
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped bs-events-table">
       <thead>
         <tr>
           <th style="width: 150px;">Event Type</th>

docs/_includes/js/carousel.html

@@ -227,7 +227,7 @@ $('.carousel').carousel({
     <li><code>relatedTarget</code>: The DOM element that is being slid into place as the active item.</li>
   </ul>
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped bs-events-table">
       <thead>
        <tr>
          <th style="width: 150px;">Event Type</th>

docs/_includes/js/collapse.html

@@ -212,7 +212,7 @@ $('#myCollapsible').collapse({
   <h3 id="collapse-events">Events</h3>
   <p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p>
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped bs-events-table">
       <thead>
        <tr>
          <th style="width: 150px;">Event Type</th>

docs/_includes/js/dropdowns.html

@@ -166,7 +166,7 @@ $('.dropdown-toggle').dropdown()
   <p>All dropdown events are fired at the <code>.dropdown-menu</code>'s parent element.</p>
   <p>All dropdown events have a <code>relatedTarget</code> property, whose value is the toggling anchor element.</p>
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped bs-events-table">
       <thead>
         <tr>
           <th style="width: 150px;">Event Type</th>

docs/_includes/js/modal.html

@@ -383,7 +383,7 @@ $('#myModal').modal({
   <h3 id="modals-events">Events</h3>
   <p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped bs-events-table">
       <thead>
        <tr>
          <th style="width: 150px;">Event Type</th>

docs/_includes/js/popovers.html

@@ -268,7 +268,7 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
   {% highlight js %}$('#element').popover('destroy'){% endhighlight %}
   <h3 id="popovers-events">Events</h3>
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped bs-events-table">
       <thead>
         <tr>
           <th style="width: 150px;">Event Type</th>

docs/_includes/js/scrollspy.html

@@ -128,7 +128,7 @@ $('[data-spy="scroll"]').each(function () {
 
   <h3 id="scrollspy-events">Events</h3>
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped bs-events-table">
       <thead>
        <tr>
          <th style="width: 150px;">Event Type</th>

docs/_includes/js/tabs.html

@@ -128,7 +128,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
   </ol>
   <p>If no tab was already active, then the <code>hide.bs.tab</code> and <code>hidden.bs.tab</code> events will not be fired.</p>
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped bs-events-table">
       <thead>
        <tr>
          <th style="width: 150px;">Event Type</th>

docs/_includes/js/tooltips.html

@@ -231,7 +231,7 @@ $('#example').tooltip(options)
 
   <h3 id="tooltips-events">Events</h3>
   <div class="table-responsive">
-    <table class="table table-bordered table-striped">
+    <table class="table table-bordered table-striped bs-events-table">
       <thead>
         <tr>
           <th style="width: 150px;">Event Type</th>

docs/assets/css/src/docs.css

@@ -1147,6 +1147,11 @@ h1[id] {
   overflow: auto;
 }
 
+/* Don't wrap event names in Events tables in JS plugin docs */
+.bs-events-table > thead > tr > th:first-child,
+.bs-events-table > tbody > tr > td:first-child {
+  white-space: nowrap;
+}
 
 /*
  * Code snippets