mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-17 19:06:40 +02:00
Code Issues Releases Wiki Activity

Merge branch '3.0.0-wip' of https://github.com/twitter/bootstrap into 3.0.0-wip

Browse Source
This commit is contained in:
Artur Kwiatkowski
2013-04-22 15:21:55 +02:00
parent 3861e3f5d5 e0d60b1325
commit b7dcefea83
19 changed files with 241 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
docs/assets/css/bootstrap.css vendored
View File

@@ -623,18 +623,21 @@ abbr.initialism {
}
blockquote {
padding: 0 0 0 15px;
padding: 10px 20px;
margin: 0 0 20px;
border-left: 5px solid #eeeeee;
}
blockquote p {
margin-bottom: 0;
font-size: 17.5px;
font-weight: 300;
line-height: 1.25;
}
blockquote p:last-child {
margin-bottom: 0;
}
blockquote small {
display: block;
line-height: 20px;
@@ -2874,10 +2877,9 @@ fieldset[disabled] .btn-link:focus {
color: #ffffff;
text-decoration: none;
background-color: #357ebd;
background-image: -moz-linear-gradient(top, #428bca, #357ebd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#357ebd));
background-image: -webkit-linear-gradient(top, #428bca, #357ebd);
background-image: -o-linear-gradient(top, #428bca, #357ebd);
background-image: -moz-linear-gradient(top, #428bca, #357ebd);
background-image: linear-gradient(to bottom, #428bca, #357ebd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
@@ -2889,10 +2891,9 @@ fieldset[disabled] .btn-link:focus {
color: #ffffff;
text-decoration: none;
background-color: #357ebd;
background-image: -moz-linear-gradient(top, #428bca, #357ebd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#357ebd));
background-image: -webkit-linear-gradient(top, #428bca, #357ebd);
background-image: -o-linear-gradient(top, #428bca, #357ebd);
background-image: -moz-linear-gradient(top, #428bca, #357ebd);
background-image: linear-gradient(to bottom, #428bca, #357ebd);
background-repeat: repeat-x;
outline: 0;
@@ -3470,8 +3471,8 @@ button.close {
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover {
color: #fff;
background-color: @grayLight;
border-color: @grayLight;
background-color: @gray-light;
border-color: @gray-light;
}
.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
@@ -3483,7 +3484,7 @@ button.close {
// Dropdowns in stacked tabs
.tabs-stacked .open > a:hover {
border-color: @grayLight;
border-color: @gray-light;
}
*/
@@ -4662,22 +4663,18 @@ button.close {
color: #356635;
}
.alert-danger,
.alert-error {
.alert-danger {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
.alert-danger hr,
.alert-error hr {
.alert-danger hr {
border-top-color: #e6c1c7;
}
.alert-danger > a,
.alert-error > a,
.alert-danger > p > a,
.alert-error > p > a {
.alert-danger > p > a {
color: #953b39;
}
@@ -4714,7 +4711,8 @@ button.close {
.img-thumbnail {
padding: 4px;
line-height: 20px;
border: 1px solid #ddd;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
@@ -4744,7 +4742,7 @@ a.thumbnail:focus {
.thumbnail .caption {
padding: 9px;
color: #555555;
color: #333333;
}
.media,
@@ -4958,7 +4956,6 @@ a.list-group-item.active > .badge,
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-webkit-background-size: 40px 40px;
-moz-background-size: 40px 40px;
@@ -4983,7 +4980,6 @@ a.list-group-item.active > .badge,
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
@@ -4996,7 +4992,6 @@ a.list-group-item.active > .badge,
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
@@ -5009,7 +5004,6 @@ a.list-group-item.active > .badge,
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
@@ -5022,7 +5016,6 @@ a.list-group-item.active > .badge,
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
@@ -5134,10 +5127,9 @@ a.list-group-item.active > .badge,
.carousel-control.left {
background-color: rgba(0, 0, 0, 0.0001);
background-color: transparent;
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
@@ -5148,10 +5140,9 @@ a.list-group-item.active > .badge,
left: auto;
background-color: rgba(0, 0, 0, 0.5);
background-color: transparent;
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
@@ -5311,53 +5302,79 @@ a.list-group-item.active > .badge,
width: device-width;
}
@media screen and (max-width: 400px) {
@-ms-viewport {
width: 320px;
}
}
.hidden {
display: none;
visibility: hidden;
}
.visible-phone {
display: none !important;
display: inherit !important;
}
.visible-tablet {
display: none !important;
}
.hidden-desktop {
.visible-desktop {
display: none !important;
}
.visible-desktop {
.hidden-phone {
display: none !important;
}
.hidden-tablet {
display: inherit !important;
}
.hidden-desktop {
display: inherit !important;
}
@media (min-width: 768px) and (max-width: 979px) {
.hidden-desktop {
.visible-phone {
display: none !important;
}
.visible-tablet {
display: inherit !important;
}
.visible-desktop {
display: none !important ;
display: none !important;
}
.visible-tablet {
.hidden-phone {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
}
@media (max-width: 767px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
}
@media (min-width: 980px) {
.visible-phone {
display: none !important;
}
.visible-phone {
.visible-tablet {
display: none !important;
}
.visible-desktop {
display: inherit !important;
}
.hidden-phone {
display: inherit !important;
}
.hidden-tablet {
display: inherit !important;
}
.hidden-desktop {
display: none !important;
}
}

61
docs/docs.html
View File

@@ -1896,7 +1896,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h3 id="forms-control-sizes">Control sizing</h3>
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.col-span-*</code> classes.</p>
<h4>Relative sizing</h4>
<p>Create larger or smaller form controls that match button sizes.</p>
@@ -2679,7 +2679,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input class="span2" id="inputIcon" type="text">
<input class="col-span-2" id="inputIcon" type="text">
</div>
</div>
</div>
@@ -2690,7 +2690,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input class="span2" id="inputIcon" type="text">
<input class="col-span-2" id="inputIcon" type="text">
</div>
</div>
</div>
@@ -3761,7 +3761,7 @@ body {
<h1>Breadcrumbs <small></small></h1>
</div>
<p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
<p>Separators are automatically added in CSS through `:after` and `content`.</p>
<div class="bs-docs-example">
<ul class="breadcrumb">
<li class="active">Home</li>
@@ -4246,7 +4246,7 @@ body {
<h3 id="alerts-alternatives">Contextual alternatives</h3>
<p>Add optional classes to change an alert's connotation.</p>
<div class="bs-docs-example">
<div class="alert alert-error">
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
@@ -4260,7 +4260,7 @@ body {
</div>
</div>
{% highlight html linenos %}
<div class="alert alert-error">...</div>
<div class="alert alert-danger">...</div>
<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
{% endhighlight %}
@@ -5327,7 +5327,7 @@ $('.dropdown-toggle').dropdown()
<h2>Example in navbar</h2>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<div class="bs-docs-example">
<div id="navbarExample" class="navbar navbar-static">
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Project Name</a>
@@ -5347,7 +5347,7 @@ $('.dropdown-toggle').dropdown()
</div>
</div>
</div>
<div data-spy="scroll" data-target="#navbarExample" data-offset="0" class="scrollspy-example">
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" class="scrollspy-example">
<h4 id="fat">@fat</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<h4 id="mdo">@mdo</h4>
@@ -5364,15 +5364,12 @@ $('.dropdown-toggle').dropdown()
</div><!-- /example -->
<hr class="bs-docs-separator">
<h2>Usage</h2>
<h3>Via data attributes</h3>
<p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body) and <code>data-target=".navbar"</code> to select which nav to use. You'll want to use scrollspy with a <code>.nav</code> component.</p>
<p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code>&lt;body&gt;</code>. Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p>
{% highlight html linenos %}
<body data-spy="scroll" data-target=".navbar">
<body data-spy="scroll" data-target="#navbar-example">
...
</body>
{% endhighlight %}
@@ -5380,7 +5377,7 @@ $('.dropdown-toggle').dropdown()
<h3>Via JavaScript</h3>
<p>Call the scrollspy via JavaScript:</p>
{% highlight js linenos %}
$('.navbar').scrollspy()
$('#navbar-example').scrollspy()
{% endhighlight %}
<div class="bs-docs-sidenote">
@@ -6332,11 +6329,11 @@ $('#myCollapsible').on('hidden', function () {
<h2>Examples</h2>
<p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
<div class="bs-docs-example">
<div class="carousel slide bs-docs-carousel-example">
<div id="carousel-example-generic" class="carousel slide bs-docs-carousel-example">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
@@ -6349,21 +6346,21 @@ $('#myCollapsible').on('hidden', function () {
<img data-src="holder.js/900x500/auto/#777:#fff/text:Third slide" alt="">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<div class="carousel slide">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
@@ -6378,10 +6375,10 @@ $('#myCollapsible').on('hidden', function () {
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
@@ -6394,11 +6391,11 @@ $('#myCollapsible').on('hidden', function () {
<p><strong>Captions are hidden by default</strong> and will show up only with viewports greater than 768px wide.</p>
</div>
<div class="bs-docs-example">
<div class="carousel slide bs-docs-carousel-example">
<div id="carousel-example-captions" class="carousel slide bs-docs-carousel-example">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
@@ -6423,10 +6420,10 @@ $('#myCollapsible').on('hidden', function () {
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>