Permalink
Find file
8c25a02 Jan 10, 2015
139 lines (122 sloc) 5.73 KB
<!DOCTYPE html>
<html lang="pt_BR">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 Demo</title>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://imsky.github.com/holder/holder.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Web Dev Academy</h1>
<p>Veja o Tutorial completo em <a href="http://webdevacademy.com.br/tutoriais/bootstrap-imagens-responsivas">webdevacademy.com.br/bootstrap/imagens-responsivas</a></p>
<hr />
<h2>Imagem Responsiva</h2>
<div class="row">
<div class="col-md-6">
<img src="http://media.webdevacademy.com.br/2014/02/placeholder.jpg" class="img-responsive" alt="Imagem Responsiva">
</div>
</div>
<hr />
<h2>Imagem com Cantos Arredondados</h2>
<div class="row">
<div class="col-md-4">
<img src="http://media.webdevacademy.com.br/2014/02/placeholder.jpg" class="img-responsive img-rounded" alt="Imagem com Canto Arrendodado">
</div>
<div class="col-md-4">
<img src="http://media.webdevacademy.com.br/2014/02/placeholder.jpg" class="img-responsive img-thumbnail" alt="Imagem Miniatura">
</div>
<div class="col-md-4">
<img src="http://media.webdevacademy.com.br/2014/02/placeholder.jpg" class="img-responsive img-circle" alt="Imagem Circular">
</div>
</div>
<hr />
<h2>Imagem em Miniatura com Legendas</h2>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="http://media.webdevacademy.com.br/2014/02/placeholder.jpg" alt="Imagem Responsiva">
<div class="right-caption">
<p>Legenda da Foto</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://media.webdevacademy.com.br/2014/02/placeholder.jpg" alt="Imagem Responsiva">
<div class="right-caption">
<p>Legenda da Foto</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://media.webdevacademy.com.br/2014/02/placeholder.jpg" alt="Imagem Responsiva">
<div class="right-caption">
<p>Legenda da Foto</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://media.webdevacademy.com.br/2014/02/placeholder.jpg" alt="Imagem Responsiva">
<div class="right-caption">
<p>Legenda da Foto</p>
</div>
</div>
</div>
</div>
<hr />
<h2>Imagem com Media Object</h2>
<div class="row">
<div id="items-list" class="col-xs-8">
<div class="media">
<a class="media-left" href="#">
<img alt="64x64" width="150" height="100" src="http://media.webdevacademy.com.br/2014/02/placeholder.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">Titulo</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<div class="media">
<a class="media-left" href="#">
<img alt="64x64" width="150" height="100" src="http://media.webdevacademy.com.br/2014/02/placeholder.jpg" data-holder-rendered="true">
</a>
<div class="media-body">
<h4 class="media-heading">Titulo</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<div class="media">
<a class="media-left" href="#">
<img alt="64x64" width="150" height="100" src="http://media.webdevacademy.com.br/2014/02/placeholder.jpg" data-holder-rendered="true">
</a>
<div class="media-body">
<h4 class="media-heading">Titulo</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>
<hr />
<footer class="footer-inverse">
<div class="container">
<p class="text-muted">&copy;2015 - Web Dev Academy. Creative Commons License.</p>
</div>
</footer>
<!-- jQuery (necessario para os plugins do Bootstrap) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- JavaScript do Bootstrap compilado e minimizado -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>