rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

updated pills to include vertical (stacked) variation in patterns and documentation

Browse Source
This commit is contained in:
Mark Otto 2011-10-11 21:49:37 -07:00
parent b8a4921b57
commit 12af75eef4
4 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
bootstrap.css vendored
View File

@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Mon Oct 10 19:37:09 PDT 2011
* Date: Tue Oct 11 21:49:21 PDT 2011
*/
/* Reset.less
* 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).
@ -1706,6 +1706,9 @@ a.menu:after, .dropdown-toggle:after {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
background-color: #0069d6;
}
.pills-vertical > li {
float: none;
}
.tab-content, .pill-content {
clear: both;
}

1
bootstrap.min.css vendored
View File

@ -273,6 +273,7 @@ a.menu:after,.dropdown-toggle:after{width:0;height:0;display:inline-block;conten
.tabs li.open a.menu:after,.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;}
.pills a{margin:5px 3px 5px 0;padding:0 15px;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;}
.pills .active a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0069d6;}
.pills-vertical>li{float:none;}
.tab-content,.pill-content{clear:both;}
.tab-content>*,.pill-content>*{display:none;}
.tab-content>.active,.pill-content>.active{display:block;}

8
docs/index.html
View File

@ -1447,7 +1447,7 @@
<p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
</div>
<div class="span12">
<h3>Basic tab example</h3>
<h3>Basic tabs example</h3>
<ul class="tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
@ -1473,7 +1473,7 @@
&lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3>Alternate styles</h3>
<h3>Alternate tabs</h3>
<p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p>
<ul class="tabs tabs-left">
<li class="active"><a href="#">Active link</a></li>
@ -1512,9 +1512,9 @@
&lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3>Alternate styles</h3>
<h3>Vertical pill nav</h3>
<p>With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs</p>
<ul class="pills pills-vertical">
<ul class="pills pills-vertical span4">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>

7
lib/patterns.less
View File

@ -412,6 +412,13 @@ a.menu:after,
background-color: @linkColor;
}
}
// Stacked pills
.pills-vertical {
> li {
float: none;
}
}
// For js-enabled tabbed areas
.tab-content,