1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 13:13:03 +02:00

adding media grid styles

This commit is contained in:
Mark Otto
2011-09-10 22:31:43 -07:00
parent 536fe2c743
commit 40693f2618
4 changed files with 108 additions and 5 deletions

View File

@@ -42,11 +42,12 @@
<div class="container">
<h3><a href="#">Bootstrap</a></h3>
<ul class="nav">
<li class="active"><a href="#masthead">Overview</a></li>
<li class="active"><a href="#overview">Overview</a></li>
<li><a href="#about">About</a></li>
<li><a href="#grid-system">Grid</a></li>
<li><a href="#layouts">Layouts</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#typography">Type</a></li>
<li><a href="#media">Media</a></li>
<li><a href="#tables">Tables</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#navigation">Navigation</a></li>
@@ -61,7 +62,7 @@
<!-- Masthead (blueprinty thing)
================================================== -->
<header class="jumbotron masthead">
<header class="jumbotron masthead" id="overview">
<div class="inner">
<div class="container">
<h1>Bootstrap, from Twitter</h1>
@@ -698,6 +699,52 @@
<!-- Media
================================================== -->
<section id="media">
<div class="page-header">
<h1>Media <small>Displaying images and videos</small></h1>
</div>
<!-- Table structure -->
<div class="row">
<div class="span4">
<h2>Media grid</h2>
<p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p>
</div>
<div class="span12">
<ul class="media-grid">
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/210x150" alt="">
</a>
</li>
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/210x150" alt="">
</a>
</li>
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/210x150" alt="">
</a>
</li>
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/210x150" alt="">
</a>
</li>
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/210x150" alt="">
</a>
</li>
</ul>
</div>
</div><!-- /row -->
</section>
<!-- Tables
================================================== -->
<section id="tables">