Skip to content

Commit e2a0ce2

Browse files
mdomdo
committed
adding new tabble stuff, still a huge work in progress
1 parent 12af75e commit e2a0ce2

File tree

5 files changed

+286
-74
lines changed

5 files changed

+286
-74
lines changed

‎bootstrap.css

+48-11
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* http://www.apache.org/licenses/LICENSE-2.0
77
*
88
* Designed and built with all the love in the world @twitter by @mdo and @fat.
9-
* Date: Tue Oct 11 21:49:21 PDT 2011
9+
* Date: Tue Oct 11 23:12:13 PDT 2011
1010
*/
1111
/* Reset.less
1212
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -1616,7 +1616,7 @@ a.menu:after, .dropdown-toggle:after {
16161616
display: block;
16171617
}
16181618
.tabs, .pills {
1619-
margin: 0 0 20px;
1619+
margin: 0 0 18px;
16201620
padding: 0;
16211621
list-style: none;
16221622
zoom: 1;
@@ -1640,13 +1640,13 @@ a.menu:after, .dropdown-toggle:after {
16401640
display: block;
16411641
}
16421642
.tabs {
1643-
float: left;
1644-
width: 100%;
1645-
border-bottom: 1px solid #ddd;
1643+
border-color: #ddd;
1644+
border-style: solid;
1645+
border-width: 0 0 1px;
16461646
}
16471647
.tabs > li {
16481648
position: relative;
1649-
top: 1px;
1649+
margin-bottom: -1px;
16501650
}
16511651
.tabs > li > a {
16521652
padding: 0 15px;
@@ -1662,11 +1662,51 @@ a.menu:after, .dropdown-toggle:after {
16621662
background-color: #eee;
16631663
border-color: #eee #eee #ddd;
16641664
}
1665-
.tabs > li.active > a {
1665+
.tabs .active > a, .tabs .active > a:hover {
16661666
color: #808080;
16671667
background-color: #ffffff;
16681668
border: 1px solid #ddd;
16691669
border-bottom-color: transparent;
1670+
cursor: default;
1671+
}
1672+
.tabbable {
1673+
margin-bottom: 18px;
1674+
}
1675+
.tabbable .tabs {
1676+
margin-bottom: 0;
1677+
border-bottom: 0;
1678+
}
1679+
.tabbable .tab-content {
1680+
padding: 19px;
1681+
border: 1px solid #ddd;
1682+
}
1683+
.tabbable.tabs-bottom .tabs > li {
1684+
margin-top: -1px;
1685+
margin-bottom: 0;
1686+
}
1687+
.tabbable.tabs-bottom .tabs > li > a {
1688+
-webkit-border-radius: 0 0 4px 4px;
1689+
-moz-border-radius: 0 0 4px 4px;
1690+
border-radius: 0 0 4px 4px;
1691+
}
1692+
.tabbable.tabs-bottom .tabs > li > a:hover {
1693+
border-bottom-color: transparent;
1694+
border-top-color: #ddd;
1695+
}
1696+
.tabbable.tabs-bottom .tabs > .active > a, .tabbable.tabs-bottom .tabs > .active > a:hover {
1697+
border-color: transparent #ddd #ddd #ddd;
1698+
}
1699+
.tabbable.tabs-left .tabs {
1700+
float: left;
1701+
}
1702+
.tabbable.tabs-left .tabs > li {
1703+
float: none;
1704+
}
1705+
.tabbable.tabs-right .tabs {
1706+
float: right;
1707+
}
1708+
.tabbable.tabs-right .tabs > li {
1709+
float: none;
16701710
}
16711711
.tabs .menu-dropdown, .tabs .dropdown-menu {
16721712
top: 35px;
@@ -1709,10 +1749,7 @@ a.menu:after, .dropdown-toggle:after {
17091749
.pills-vertical > li {
17101750
float: none;
17111751
}
1712-
.tab-content, .pill-content {
1713-
clear: both;
1714-
}
1715-
.tab-content > *, .pill-content > * {
1752+
.tab-content > .tab-pane, .pill-content > .pill-pane {
17161753
display: none;
17171754
}
17181755
.tab-content > .active, .pill-content > .active {

‎bootstrap.min.css

+13-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

+131-18
Original file line numberDiff line numberDiff line change
@@ -1448,6 +1448,7 @@ <h2>Tabs and pills</h2>
14481448
</div>
14491449
<div class="span12">
14501450
<h3>Basic tabs example</h3>
1451+
<p>Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a <a href="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p>
14511452
<ul class="tabs">
14521453
<li class="active"><a href="#">Home</a></li>
14531454
<li><a href="#">Profile</a></li>
@@ -1475,24 +1476,136 @@ <h3>Basic tabs example</h3>
14751476
</pre>
14761477
<h3>Alternate tabs</h3>
14771478
<p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p>
1478-
<ul class="tabs tabs-left">
1479-
<li class="active"><a href="#">Active link</a></li>
1480-
<li><a href="#">Link</a></li>
1481-
<li><a href="#">Linky link</a></li>
1482-
<li><a href="#">What up link</a></li>
1483-
</ul>
1484-
<ul class="tabs tabs-right">
1485-
<li class="active"><a href="#">Active link</a></li>
1486-
<li><a href="#">Link</a></li>
1487-
<li><a href="#">Linky link</a></li>
1488-
<li><a href="#">What up link</a></li>
1489-
</ul>
1490-
<ul class="tabs tabs-bottom">
1491-
<li class="active"><a href="#">Active link</a></li>
1492-
<li><a href="#">Link</a></li>
1493-
<li><a href="#">Linky link</a></li>
1494-
<li><a href="#">What up link</a></li>
1495-
</ul>
1479+
<div class="row">
1480+
<div class="span3">
1481+
<div class="clearfix">
1482+
<ul class="tabs tabs-left">
1483+
<li class="active"><a href="#">Active link</a></li>
1484+
<li><a href="#">Link</a></li>
1485+
<li><a href="#">Linky link</a></li>
1486+
<li><a href="#">What up link</a></li>
1487+
</ul>
1488+
</div>
1489+
</div>
1490+
<div class="span3">
1491+
<div class="clearfix">
1492+
<ul class="tabs tabs-right">
1493+
<li class="active"><a href="#">Active link</a></li>
1494+
<li><a href="#">Link</a></li>
1495+
<li><a href="#">Linky link</a></li>
1496+
<li><a href="#">What up link</a></li>
1497+
</ul>
1498+
</div>
1499+
</div>
1500+
<div class="span6">
1501+
<div class="clearfix">
1502+
<ul class="tabs tabs-bottom">
1503+
<li class="active"><a href="#">Active link</a></li>
1504+
<li><a href="#">Link</a></li>
1505+
<li><a href="#">Linky link</a></li>
1506+
</ul>
1507+
</div>
1508+
</div>
1509+
</div>
1510+
<h3>Tabbable tabs</h3>
1511+
<p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs&mdash;default (top), right, bottom, left&mdash;with example tab areas.</p>
1512+
1513+
<div class="tabbable">
1514+
<ul class="tabs" data-tabs="tabs">
1515+
<li class="active"><a href="#1">Section 1</a></li>
1516+
<li><a href="#2">Section 2</a></li>
1517+
<li><a href="#3">Section 3</a></li>
1518+
<li><a href="#4">Section 4</a></li>
1519+
</ul>
1520+
<div class="tab-content">
1521+
<div class="tab-pane active" id="1">
1522+
<p>Oh hai #1!</p>
1523+
</div>
1524+
<div class="tab-pane" id="2">
1525+
<p>Oh hai #2!</p>
1526+
</div>
1527+
<div class="tab-pane" id="3">
1528+
<p>Oh hai #3!</p>
1529+
</div>
1530+
<div class="tab-pane" id="4">
1531+
<p>Oh hai #4!</p>
1532+
</div>
1533+
</div>
1534+
</div>
1535+
1536+
<div class="row">
1537+
<div class="span6">
1538+
<div class="tabbable tabs-left">
1539+
<ul class="tabs" data-tabs="tabs">
1540+
<li class="active"><a href="#1">Section 1</a></li>
1541+
<li><a href="#2">Section 2</a></li>
1542+
<li><a href="#3">Section 3</a></li>
1543+
</ul>
1544+
<div class="tab-content" id="myTabContent2">
1545+
<div class="tab-pane active" id="1">
1546+
<h4>Section 1</h4>
1547+
<p>Oh hai!</p>
1548+
</div>
1549+
<div class="tab-pane" id="2">
1550+
<h4>Section 2</h4>
1551+
<p>Oh hai!</p>
1552+
</div>
1553+
<div class="tab-pane" id="3">
1554+
<h4>Section 3</h4>
1555+
<p>Oh hai!</p>
1556+
</div>
1557+
</div>
1558+
</div>
1559+
</div>
1560+
<div class="span6">
1561+
<div class="tabbable tabs-right">
1562+
<ul class="tabs" data-tabs="tabs">
1563+
<li class="active"><a href="#1">Section 1</a></li>
1564+
<li><a href="#2">Section 2</a></li>
1565+
<li><a href="#3">Section 3</a></li>
1566+
</ul>
1567+
<div class="tab-content" id="myTabContent3">
1568+
<div class="tab-pane active" id="1">
1569+
<h4>Section 1</h4>
1570+
<p>Oh hai!</p>
1571+
</div>
1572+
<div class="tab-pane" id="2">
1573+
<h4>Section 2</h4>
1574+
<p>Oh hai!</p>
1575+
</div>
1576+
<div class="tab-pane" id="3">
1577+
<h4>Section 3</h4>
1578+
<p>Oh hai!</p>
1579+
</div>
1580+
</div>
1581+
</div>
1582+
</div>
1583+
</div>
1584+
1585+
<div class="tabbable tabs-bottom">
1586+
<div class="tab-content">
1587+
<div class="tab-pane active" id="1">
1588+
<p>Oh hai #1!</p>
1589+
</div>
1590+
<div class="tab-pane" id="2">
1591+
<p>Oh hai #2!</p>
1592+
</div>
1593+
<div class="tab-pane" id="3">
1594+
<p>Oh hai #3!</p>
1595+
</div>
1596+
<div class="tab-pane" id="4">
1597+
<p>Oh hai #4!</p>
1598+
</div>
1599+
</div>
1600+
<ul class="tabs" data-tabs="tabs">
1601+
<li class="active"><a href="#1">Section 1</a></li>
1602+
<li><a href="#2">Section 2</a></li>
1603+
<li><a href="#3">Section 3</a></li>
1604+
<li><a href="#4">Section 4</a></li>
1605+
</ul>
1606+
</div>
1607+
1608+
14961609
<p>In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.</p>
14971610
<hr>
14981611
<h3>Basic pills example</h3>

0 commit comments

Comments
 (0)