#
bootstrap:
- mkdir -p bootstrap/img
+ mkdir -p bootstrap/fonts
mkdir -p bootstrap/css
mkdir -p bootstrap/js
- cp img/* bootstrap/img/
+ cp fonts/* bootstrap/fonts/
recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
- recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.css
- recess --compress ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.min.css
cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-affix.js > bootstrap/js/bootstrap.js
- uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.tmp.js
+ uglifyjs bootstrap/js/bootstrap.js -nc > bootstrap/js/bootstrap.min.tmp.js
echo "/*!\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > bootstrap/js/copyright.js
cat bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js > bootstrap/js/bootstrap.min.js
rm bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js
cursor: default;
background-color: transparent;
background-image: none;
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
-.open {
- *z-index: 1000;
-}
-
.open > .dropdown-menu {
display: block;
}
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
- background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+ background-image: linear-gradient(top, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #bbbbbb;
- *border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #a2a2a2;
.btn-group-vertical {
display: inline-block;
- *display: inline;
- /* IE7 inline-block hack */
-
- *zoom: 1;
}
- .btn-group-vertical .btn {
+ .btn-group-vertical > .btn {
display: block;
float: none;
- width: 100%;
+ max-width: 100%;
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
+ border-radius: 0;
}
- .btn-group-vertical .btn + .btn {
+ .btn-group-vertical > .btn + .btn {
margin-top: -1px;
margin-left: 0;
}
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
+ border-radius: 4px;
}
+ .alert,
+ .alert h4 {
+ color: #c09853;
+ }
+
.alert h4 {
margin: 0;
}
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
- background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
+ background-image: linear-gradient(top, #ffffff, #f2f2f2);
background-repeat: repeat-x;
border: 1px solid #d4d4d4;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
+ border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
- *zoom: 1;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
- -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
background-image: -webkit-linear-gradient(top, #222222, #111111);
background-image: -o-linear-gradient(top, #222222, #111111);
- background-image: linear-gradient(to bottom, #222222, #111111);
+ background-image: linear-gradient(top, #222222, #111111);
background-repeat: repeat-x;
- border-color: #252525;
+ border-color: #111111;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}
}
.popover.left .arrow:after {
- right: -1px;
- bottom: -11px;
- border-left-color: rgba(0, 0, 0, 0.25);
- border-width: 11px 0 11px 11px;
+ right: 1px;
+ bottom: -10px;
+ border-left-color: #ffffff;
+ border-right-width: 0;
}
-.thumbnails {
- margin-left: -20px;
- list-style: none;
- *zoom: 1;
-}
-
-.thumbnails:before,
-.thumbnails:after {
- display: table;
- line-height: 0;
- content: "";
-}
-
-.thumbnails:after {
- clear: both;
-}
-
-.row-fluid .thumbnails {
- margin-left: 0;
-}
-
-.thumbnails > li {
- float: left;
- margin-bottom: 20px;
- margin-left: 20px;
-}
-
.thumbnail {
display: block;
padding: 4px;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
- background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
+ background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
background-repeat: repeat-x;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
+ border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
- -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
<h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1>
</div>
- <h2>Default thumbnails</h2>
+ <h3>Default thumbnails</h3>
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
- <div class="row-fluid">
- <ul class="thumbnails">
- <li class="span3">
+ <div class="bs-docs-example">
+ <div class="row">
+ <div class="span3">
<a href="#" class="thumbnail">
- <img src="http://placehold.it/260x180" alt="">
+ <img data-src="holder.js/260x180" alt="">
</a>
- </li>
- <li class="span3">
+ </div>
+ <div class="span3">
<a href="#" class="thumbnail">
- <img src="http://placehold.it/260x180" alt="">
+ <img data-src="holder.js/260x180" alt="">
</a>
- </li>
- <li class="span3">
+ </div>
+ <div class="span3">
<a href="#" class="thumbnail">
- <img src="http://placehold.it/260x180" alt="">
+ <img data-src="holder.js/260x180" alt="">
</a>
- </li>
- <li class="span3">
+ </div>
+ <div class="span3">
<a href="#" class="thumbnail">
- <img src="http://placehold.it/260x180" alt="">
+ <img data-src="holder.js/260x180" alt="">
</a>
- </li>
- </ul>
+ </div>
+ </div>
</div>
- <img src="http://placehold.it/260x180" alt="">
+<pre class="prettyprint linenums">
+<div class="row">
+ <div class="span3">
+ <a href="#" class="thumbnail">
++ <img src="holder.js/260x180" alt="">
+ </a>
+ </div>
+ ...
+</div>
+</pre>
- <h2>Highly customizable</h2>
+ <h3>Custom content thumbnails</h3>
<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
- <div class="row-fluid">
- <ul class="thumbnails">
- <li class="span4">
+ <div class="bs-docs-example">
+ <div class="row">
+ <div class="span4">
<div class="thumbnail">
- <img src="http://placehold.it/300x200" alt="">
+ <img data-src="holder.js/300x200" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
- </li>
- <li class="span4">
+ </div>
+ <div class="span4">
<div class="thumbnail">
- <img src="http://placehold.it/300x200" alt="">
+ <img data-src="holder.js/300x200" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
- </li>
- <li class="span4">
+ </div>
+ <div class="span4">
<div class="thumbnail">
- <img src="http://placehold.it/300x200" alt="">
+ <img data-src="holder.js/300x200" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
- </li>
- </ul>
+ </div>
+ </div>
</div>
-
- <h3>Why use thumbnails</h3>
- <p>Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.</p>
-
- <h3>Simple, flexible markup</h3>
- <p>Thumbnail markup is simple—a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.</p>
-
- <h3>Uses grid column sizes</h3>
- <p>Lastly, the thumbnails component uses existing grid system classes—like <code>.span2</code> or <code>.span3</code>—for control of thumbnail dimensions.</p>
-
- <h2>Markup</h2>
- <p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p>
-<pre class="prettyprint linenums">
-<ul class="thumbnails">
- <li class="span4">
- <a href="#" class="thumbnail">
- <img data-src="holder.js/300x200" alt="">
- </a>
- </li>
- ...
-</ul>
-</pre>
- <p>For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code><a></code> for a <code><div></code> like so:</p>
<pre class="prettyprint linenums">
-<ul class="thumbnails">
- <li class="span4">
+<div class="row">
+ <div class="span4">
<div class="thumbnail">
- <img src="http://placehold.it/300x200" alt="">
+ <img data-src="holder.js/300x200" alt="">
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
</div>
<h1>{{_i}}Thumbnails{{/i}} <small>{{_i}}Grids of images, videos, text, and more{{/i}}</small></h1>
</div>
- <h2>{{_i}}Default thumbnails{{/i}}</h2>
+ <h3>{{_i}}Default thumbnails{{/i}}</h3>
<p>{{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}</p>
- <div class="row-fluid">
- <ul class="thumbnails">
- <li class="span3">
+ <div class="bs-docs-example">
+ <div class="row">
+ <div class="span3">
<a href="#" class="thumbnail">
- <img src="http://placehold.it/260x180" alt="">
+ <img data-src="holder.js/260x180" alt="">
</a>
- </li>
- <li class="span3">
+ </div>
+ <div class="span3">
<a href="#" class="thumbnail">
- <img src="http://placehold.it/260x180" alt="">
+ <img data-src="holder.js/260x180" alt="">
</a>
- </li>
- <li class="span3">
+ </div>
+ <div class="span3">
<a href="#" class="thumbnail">
- <img src="http://placehold.it/260x180" alt="">
+ <img data-src="holder.js/260x180" alt="">
</a>
- </li>
- <li class="span3">
+ </div>
+ <div class="span3">
<a href="#" class="thumbnail">
- <img src="http://placehold.it/260x180" alt="">
+ <img data-src="holder.js/260x180" alt="">
</a>
- </li>
- </ul>
- </div>
+ </div>
+ </div>
+ </div>{{! /.bs-docs-example }}
+<pre class="prettyprint linenums">
+<div class="row">
+ <div class="span3">
+ <a href="#" class="thumbnail">
- <img src="http://placehold.it/260x180" alt="">
++ <img src="holder.js/260x180" alt="">
+ </a>
+ </div>
+ ...
+</div>
+</pre>
- <h2>{{_i}}Highly customizable{{/i}}</h2>
+ <h3>{{_i}}Custom content thumbnails{{/i}}</h3>
<p>{{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}</p>
- <div class="row-fluid">
- <ul class="thumbnails">
- <li class="span4">
+ <div class="bs-docs-example">
+ <div class="row">
+ <div class="span4">
<div class="thumbnail">
- <img src="http://placehold.it/300x200" alt="">
+ <img data-src="holder.js/300x200" alt="">
<div class="caption">
<h3>{{_i}}Thumbnail label{{/i}}</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
</div>
</div>
- </li>
- <li class="span4">
+ </div>
+ <div class="span4">
<div class="thumbnail">
- <img src="http://placehold.it/300x200" alt="">
+ <img data-src="holder.js/300x200" alt="">
<div class="caption">
<h3>{{_i}}Thumbnail label{{/i}}</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
</div>
</div>
- </li>
- <li class="span4">
+ </div>
+ <div class="span4">
<div class="thumbnail">
- <img src="http://placehold.it/300x200" alt="">
+ <img data-src="holder.js/300x200" alt="">
<div class="caption">
<h3>{{_i}}Thumbnail label{{/i}}</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
</div>
</div>
- </li>
- </ul>
- </div>
-
- <h3>{{_i}}Why use thumbnails{{/i}}</h3>
- <p>{{_i}}Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}</p>
-
- <h3>{{_i}}Simple, flexible markup{{/i}}</h3>
- <p>{{_i}}Thumbnail markup is simple—a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.{{/i}}</p>
-
- <h3>{{_i}}Uses grid column sizes{{/i}}</h3>
- <p>{{_i}}Lastly, the thumbnails component uses existing grid system classes—like <code>.span2</code> or <code>.span3</code>—for control of thumbnail dimensions.{{/i}}</p>
-
- <h2>{{_i}}Markup{{/i}}</h2>
- <p>{{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:{{/i}}</p>
-<pre class="prettyprint linenums">
-<ul class="thumbnails">
- <li class="span4">
- <a href="#" class="thumbnail">
- <img data-src="holder.js/300x200" alt="">
- </a>
- </li>
- ...
-</ul>
-</pre>
- <p>{{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code><a></code> for a <code><div></code> like so:{{/i}}</p>
+ </div>
+ </div>
+ </div>{{! /.bs-docs-example }}
<pre class="prettyprint linenums">
-<ul class="thumbnails">
- <li class="span4">
+<div class="row">
+ <div class="span4">
<div class="thumbnail">
- <img src="http://placehold.it/300x200" alt="">
+ <img data-src="holder.js/300x200" alt="">
<h3>{{_i}}Thumbnail label{{/i}}</h3>
<p>{{_i}}Thumbnail caption...{{/i}}</p>
</div>
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: @warningBackground;
border: 1px solid @warningBorder;
- .border-radius(@baseBorderRadius);
+ border-radius: @baseBorderRadius;
+ }
+ .alert,
+ .alert h4 {
+ // Specified for the h4 to prevent conflicts of changing @headingsColor
color: @warningText;
}
.alert h4 {
// ----------------------
.btn-group-vertical {
- display: inline-block; // makes buttons only take up the width they need
- .ie7-inline-block();
+ display: inline-block; // Make buttons only take up the width they need
}
- .btn-group-vertical .btn {
+ .btn-group-vertical > .btn {
display: block;
float: none;
- width: 100%;
+ border-radius: 0;
+ max-width: 100%;
- .border-radius(0);
}
- .btn-group-vertical .btn + .btn {
+ .btn-group-vertical > .btn + .btn {
margin-left: 0;
margin-top: -1px;
}
}
.carousel-inner {
+ position: relative;
overflow: hidden;
width: 100%;
- position: relative;
}
- .carousel {
+ .carousel-inner {
- .item {
+ > .item {
display: none;
position: relative;
.transition(.6s ease-in-out left);
</li>
</ul>
-<h4>Fluid thumbnails</h4>
-<div class="row-fluid">
- <div class="span8">
- <ul class="thumbnails">
- <li class="span4">
- <a href="#" class="thumbnail">
- <img data-src="holder.js/260x180" alt="">
- </a>
- </li>
- <li class="span4">
- <a href="#" class="thumbnail">
- <img data-src="holder.js/260x180" alt="">
- </a>
- </li>
- <li class="span4">
- <a href="#" class="thumbnail">
- <img data-src="holder.js/260x180" alt="">
- </a>
- </li>
- </ul>
- </div>
-</div>
-
-
-
<!-- Tabs
================================================== -->
projects / thirdparty / bootstrap.git / commitdiff
