StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PObootstrap - tabbable with tabs on left not working at all
primarykey
Id
17386724
data
AcceptedAnswerId
17386817
AnswerCount
2
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-06-30T03:00:30.763
FavoriteCount
0
LastActivityDate
2013-09-13T17:37:15.740
LastEditDate
2013-09-13T17:37:15.740
LastEditorUserId
1009603
OwnerUserId
2212601
ParentId
0
PostTypeId
1
Score
2
ViewCount
9908
LastEditorDisplayName
text
Body
<p>I am attempting to create tabbable tabs where the tabs are stacked vertically on the left side of the page, and the content on the right side of the page changes with the tabs. Here is my code: </p> <pre><code><div class="tabbable tabs-left"> <ul class="nav nav-tabs" data-tabs="tabs"> <li class="active"> <a href="#foodTab" data-toggle="tab"> Food</a></li> <li class=""> <a href="#toyTab" data-toggle="tab"> Toy</a></li> <li class=""> <a href="#clothesTab" data-toggle="tab"> Clothes</a></li> <li class=""> <a href="#booksTab" data-toggle="tab"> Book</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade active" id="foodTab"> Oh my god it's the food tab! </div> <div class="tab-pane fade" id="toyTab"> Toy tab! </div> <div class="tab-pane fade" id="clothesTab"> clothing tab </div> <div class="tab-pane fade" id="booksTab"> books books books </div> </div> </div> </code></pre> <p>What happens is that the tabs show up, but all the content is invisible, and clicking on the tabs changes the active tab but does not change anything on the right side. I attempted to create a jsfiddle but it's even worse there, maybe someone can teach me how to do this correctly: <a href="http://jsfiddle.net/ewRZZ/3/" rel="nofollow">http://jsfiddle.net/ewRZZ/3/</a> </p> <p>Finally, I am including the following files in the following order inside the html head: - bootstrap.min.css - bootstrap-responsive.min.css - jquery-1.8.3.min.js - bootstrap.min.js </p> <p>I also have specified the correct DOCTYPE at the top of the page so I know that is not the issue. </p> <p>I tried copy-pasting the jquery code from the bootstrap website and then changing "#myTab a" to "#foodTab a" etc, but it changed nothing. Maybe I was doing it wrong? </p> <p>I actually got tabs to work on other pages on the same site (with the same code that includes the script). The only difference is that those tabs were on the top, not along the side, and thus I did not enclose them in a <code><div class="tabbable"></div></code>. Maybe this has something to do with it? Thanks :) </p>
Tags
<jquery><html><css><twitter-bootstrap><tabs>
Title
bootstrap - tabbable with tabs on left not working at all
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USPSL
UserOwnerUserId
1. USmage
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  PObootstrap - tabbable with tabs on left not working at all
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.