mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
thumbnails cleanup: no more UL or LI elements needed, instead just use standard grid markup
This commit is contained in:
Mark Otto
parent
08eea302ef
commit
f12946be5a
25
docs/assets/css/bootstrap-responsive.css
vendored
25
docs/assets/css/bootstrap-responsive.css
vendored
@ -355,12 +355,6 @@
|
||||
uneditable-input.offset1 {
|
||||
margin-left: 9.615384615384613%;
|
||||
}
|
||||
.thumbnails {
|
||||
margin-left: -30px;
|
||||
}
|
||||
.thumbnails > li {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
@ -486,12 +480,7 @@
|
||||
.container {
|
||||
width: auto;
|
||||
}
|
||||
.row,
|
||||
.thumbnails {
|
||||
margin-left: 0;
|
||||
}
|
||||
.thumbnails > li {
|
||||
float: none;
|
||||
.row {
|
||||
margin-left: 0;
|
||||
}
|
||||
[class*="span"],
|
||||
@ -500,19 +489,7 @@
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.span12 {
|
||||
width: 100%;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.input-large,
|
||||
.input-xlarge,
|
||||
.input-xxlarge,
|
||||
input[class*="span"],
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
|
||||
26
docs/assets/css/bootstrap.css
vendored
26
docs/assets/css/bootstrap.css
vendored
@ -5173,32 +5173,6 @@ input[type="submit"].btn::-moz-focus-inner {
|
||||
border-width: 11px 0 11px 11px;
|
||||
}
|
||||
|
||||
.thumbnails {
|
||||
margin-left: -20px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
@ -512,7 +512,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<p>Add any of the follow classes to the <code>.table</code> base class.</p>
|
||||
|
||||
<h3><code>.table-striped</code></h3>
|
||||
<p>Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE7-IE8).</p>
|
||||
<p>Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE8).</p>
|
||||
<div class="bs-docs-example">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
@ -1741,7 +1741,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<img src="..." class="img-circle">
|
||||
<img src="..." class="img-polaroid">
|
||||
</pre>
|
||||
<p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> do not work in IE7-8 due to lack of <code>border-radius</code> support.</p>
|
||||
<p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> do not work in IE8 due to lack of <code>border-radius</code> support.</p>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
@ -1884,135 +1884,92 @@
|
||||
<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="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
</div>
|
||||
<div class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
</div>
|
||||
<div class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
</div>
|
||||
<div class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Highly customizable</h2>
|
||||
<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="thumbnail">
|
||||
<img src="http://placehold.it/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 class="thumbnail">
|
||||
<img src="http://placehold.it/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 class="thumbnail">
|
||||
<img src="http://placehold.it/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>
|
||||
|
||||
<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">
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/300x200" alt="">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<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="bs-docs-example">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/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>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/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>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="">
|
||||
<h3>Thumbnail label</h3>
|
||||
<p>Thumbnail caption...</p>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h2>More examples</h2>
|
||||
<p>Explore all your options with the various grid classes available to you. You can also mix and match different sizes.</p>
|
||||
<ul class="thumbnails">
|
||||
<li class="span4">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/360x270" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/160x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/160x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -2144,7 +2101,7 @@
|
||||
</pre>
|
||||
|
||||
<h3>Striped</h3>
|
||||
<p>Uses a gradient to create a striped effect. Not available in IE7-8.</p>
|
||||
<p>Uses a gradient to create a striped effect. Not available in IE8.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="progress progress-striped">
|
||||
<div class="bar" style="width: 20%;"></div>
|
||||
@ -2259,7 +2216,7 @@
|
||||
|
||||
|
||||
<h2>Browser support</h2>
|
||||
<p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.</p>
|
||||
<p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE8-9 or older versions of Firefox.</p>
|
||||
<p>Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.</p>
|
||||
|
||||
</section>
|
||||
|
||||
@ -106,7 +106,7 @@
|
||||
</div>
|
||||
<p class="lead">Before downloading, be sure to have a code editor (we recommend <a href="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.</p>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
<h2>Download compiled</h2>
|
||||
<p><strong>Fastest way to get started:</strong> get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.</p>
|
||||
|
||||
@ -108,7 +108,7 @@
|
||||
<h1>Introducing Bootstrap.</h1>
|
||||
<p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<img src="assets/img/bs-docs-twitter-github.png">
|
||||
<h2>By nerds, for nerds.</h2>
|
||||
@ -117,7 +117,7 @@
|
||||
<div class="span4">
|
||||
<img src="assets/img/bs-docs-responsive-illustrations.png">
|
||||
<h2>Made for everyone.</h2>
|
||||
<p>Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via <a href="./scaffolding.html#responsive">responsive CSS</a> as well.</p>
|
||||
<p>Bootstrap was made to not only look and behave great in the latest desktop browsers (including IE8+), but in tablet and smartphone browsers via <a href="./scaffolding.html#responsive">responsive CSS</a> as well.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<img src="assets/img/bs-docs-bootstrap-features.png">
|
||||
@ -130,7 +130,7 @@
|
||||
|
||||
<h1>Built with Bootstrap.</h1>
|
||||
<p class="marketing-byline">For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./getting-started.html#examples">browse the examples</a>.</p>
|
||||
<div class="row-fluid">
|
||||
<div class="row">
|
||||
<ul class="thumbnails example-sites">
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="http://soundready.fm/" target="_blank">
|
||||
|
||||
@ -259,7 +259,7 @@
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="row">
|
||||
<div class="span2">
|
||||
<!--Sidebar content-->
|
||||
</div>
|
||||
|
||||
4
docs/templates/pages/base-css.mustache
vendored
4
docs/templates/pages/base-css.mustache
vendored
@ -449,7 +449,7 @@
|
||||
<p>{{_i}}Add any of the follow classes to the <code>.table</code> base class.{{/i}}</p>
|
||||
|
||||
<h3><code>{{_i}}.table-striped{{/i}}</code></h3>
|
||||
<p>{{_i}}Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE7-IE8).{{/i}}</p>
|
||||
<p>{{_i}}Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE8).{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
@ -1678,7 +1678,7 @@
|
||||
<img src="..." class="img-circle">
|
||||
<img src="..." class="img-polaroid">
|
||||
</pre>
|
||||
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}<code>.img-rounded</code> and <code>.img-circle</code> do not work in IE7-8 due to lack of <code>border-radius</code> support.{{/i}}</p>
|
||||
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}<code>.img-rounded</code> and <code>.img-circle</code> do not work in IE8 due to lack of <code>border-radius</code> support.{{/i}}</p>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
165
docs/templates/pages/components.mustache
vendored
165
docs/templates/pages/components.mustache
vendored
@ -1813,135 +1813,92 @@
|
||||
<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="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
</div>
|
||||
<div class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
</div>
|
||||
<div class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
</div>
|
||||
<div class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>{{_i}}Highly customizable{{/i}}</h2>
|
||||
<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="thumbnail">
|
||||
<img src="http://placehold.it/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 class="thumbnail">
|
||||
<img src="http://placehold.it/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 class="thumbnail">
|
||||
<img src="http://placehold.it/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>
|
||||
</div>
|
||||
</div>
|
||||
</div>{{! /.bs-docs-example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="thumbnails">
|
||||
<li class="span4">
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/300x200" alt="">
|
||||
<img src="http://placehold.it/260x180" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<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="bs-docs-example">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/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>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/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>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="thumbnail">
|
||||
<img src="http://placehold.it/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>
|
||||
</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="">
|
||||
<h3>{{_i}}Thumbnail label{{/i}}</h3>
|
||||
<p>{{_i}}Thumbnail caption...{{/i}}</p>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h2>{{_i}}More examples{{/i}}</h2>
|
||||
<p>{{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}</p>
|
||||
<ul class="thumbnails">
|
||||
<li class="span4">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/360x270" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/160x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/260x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/160x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -2073,7 +2030,7 @@
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Striped{{/i}}</h3>
|
||||
<p>{{_i}}Uses a gradient to create a striped effect. Not available in IE7-8.{{/i}}</p>
|
||||
<p>{{_i}}Uses a gradient to create a striped effect. Not available in IE8.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="progress progress-striped">
|
||||
<div class="bar" style="width: 20%;"></div>
|
||||
@ -2188,7 +2145,7 @@
|
||||
|
||||
|
||||
<h2>{{_i}}Browser support{{/i}}</h2>
|
||||
<p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}</p>
|
||||
<p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE8-9 or older versions of Firefox.{{/i}}</p>
|
||||
<p>{{_i}}Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.{{/i}}</p>
|
||||
|
||||
</section>
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
</div>
|
||||
<p class="lead">{{_i}}Before downloading, be sure to have a code editor (we recommend <a href="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.{{/i}}</p>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
<h2>{{_i}}Download compiled{{/i}}</h2>
|
||||
<p>{{_i}}<strong>Fastest way to get started:</strong> get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.{{/i}}</p>
|
||||
|
||||
6
docs/templates/pages/index.mustache
vendored
6
docs/templates/pages/index.mustache
vendored
@ -37,7 +37,7 @@
|
||||
<h1>{{_i}}Introducing Bootstrap.{{/i}}</h1>
|
||||
<p class="marketing-byline">{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}</p>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<img src="assets/img/bs-docs-twitter-github.png">
|
||||
<h2>{{_i}}By nerds, for nerds.{{/i}}</h2>
|
||||
@ -46,7 +46,7 @@
|
||||
<div class="span4">
|
||||
<img src="assets/img/bs-docs-responsive-illustrations.png">
|
||||
<h2>{{_i}}Made for everyone.{{/i}}</h2>
|
||||
<p>{{_i}}Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via <a href="./scaffolding.html#responsive">responsive CSS</a> as well.{{/i}}</p>
|
||||
<p>{{_i}}Bootstrap was made to not only look and behave great in the latest desktop browsers (including IE8+), but in tablet and smartphone browsers via <a href="./scaffolding.html#responsive">responsive CSS</a> as well.{{/i}}</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<img src="assets/img/bs-docs-bootstrap-features.png">
|
||||
@ -59,7 +59,7 @@
|
||||
|
||||
<h1>{{_i}}Built with Bootstrap.{{/i}}</h1>
|
||||
<p class="marketing-byline">{{_i}}For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./getting-started.html#examples">browse the examples</a>.{{/i}}</p>
|
||||
<div class="row-fluid">
|
||||
<div class="row">
|
||||
<ul class="thumbnails example-sites">
|
||||
<li class="span3">
|
||||
<a class="thumbnail" href="http://soundready.fm/" target="_blank">
|
||||
|
||||
2
docs/templates/pages/scaffolding.mustache
vendored
2
docs/templates/pages/scaffolding.mustache
vendored
@ -188,7 +188,7 @@
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="row">
|
||||
<div class="span2">
|
||||
<!--{{_i}}Sidebar content{{/i}}-->
|
||||
</div>
|
||||
|
||||
@ -16,12 +16,4 @@
|
||||
#grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
|
||||
#grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
|
||||
|
||||
// Thumbnails
|
||||
.thumbnails {
|
||||
margin-left: -@gridGutterWidth1200;
|
||||
}
|
||||
.thumbnails > li {
|
||||
margin-left: @gridGutterWidth1200;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -43,15 +43,10 @@
|
||||
.container {
|
||||
width: auto;
|
||||
}
|
||||
// Undo negative margin on rows and thumbnails
|
||||
.row,
|
||||
.thumbnails {
|
||||
// Undo negative margin on rows
|
||||
.row {
|
||||
margin-left: 0;
|
||||
}
|
||||
.thumbnails > li {
|
||||
float: none;
|
||||
margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present
|
||||
}
|
||||
// Make all grid-sized elements block level again
|
||||
[class*="span"],
|
||||
// Makes uneditable inputs full-width when using grid sizing
|
||||
@ -60,20 +55,12 @@
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
.span12 {
|
||||
width: 100%;
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
|
||||
|
||||
// FORM FIELDS
|
||||
// -----------
|
||||
// Make span* classes full width
|
||||
.input-large,
|
||||
.input-xlarge,
|
||||
.input-xxlarge,
|
||||
input[class*="span"],
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
|
||||
@ -3,26 +3,6 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files
|
||||
|
||||
// Make wrapper ul behave like the grid
|
||||
.thumbnails {
|
||||
margin-left: -@gridGutterWidth;
|
||||
list-style: none;
|
||||
.clearfix();
|
||||
}
|
||||
// Fluid rows have no left margin
|
||||
.row-fluid .thumbnails {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Float li to make thumbnails appear in a row
|
||||
.thumbnails > li {
|
||||
float: left; // Explicity set the float since we don't require .span* classes
|
||||
margin-bottom: @baseLineHeight;
|
||||
margin-left: @gridGutterWidth;
|
||||
}
|
||||
|
||||
// The actual thumbnail (can be `a` or `div`)
|
||||
.thumbnail {
|
||||
display: block;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user