Académique Documents
Professionnel Documents
Culture Documents
html
1 <!DOCTYPE html>
2 <html lang="pt-br">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <meta name="description" content="Site de apoio ao livro . Contém informações gerais sobre o
livro Bootstrap do Maujor com todos os exemplos disponíveis para download ou consulta online">
8 <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end,
frontend, livros de maujor">
9 <meta name="author" content="Maurício 'Maujor' Samy Silva">
10 <title>Livro Bootstrap Maujor</title>
11 <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
12 <link href="../bootstrap/css/bootstrap-theme.css" rel="stylesheet">
13 </head>
14 <body>
15 <div class="container-fluid">
16 <div class="row">
17 <div class="col-lg-12 logo"></div>
18 <div class="col-lg-12">
19 <h1 class="well text-center">Capítulo 4 — <small>Componentes</small></h1>
20 </div>
21 </div>
22 </div>
23 <div class="container">
24 <div class="row text-center">
25 <h2>Thumbnail</h2>
26 <div class="col-md-3 col-sm-6">
27 <a href="t1.jpg" class="thumbnail">
28 <img src="t1.jpg" alt="carro1">
29 </a>
30 </div>
31 <div class="col-md-3 col-sm-6">
32 <a href="t2.jpg" class="thumbnail">
33 <img src="t2.jpg" alt="carro2">
34 </a>
35 </div>
36 <div class="col-md-3 col-sm-6">
37 <a href="t3.jpg" class="thumbnail">
38 <img src="t3.jpg" alt="carro3">
39 </a>
40 </div>
41 <div class="col-md-3 col-sm-6">
42 <a href="t4.jpg" class="thumbnail">
43 <img src="t4.jpg" alt="carro4">
44 </a>
45 </div>
46 </div> <!-- /.row -->
47 <hr>
48 <div class="row text-center">
49 <h2>Thumbnail com conteúdo</h2>
50 <div class="col-md-3 col-sm-6">
51 <div class="thumbnail">
52 <img src="t1.jpg" alt="carro1">
53 <div class="caption text-left">
54 <h3>Descrição da imagem</h3>
55 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus
quis laoreet faucibus, ante augue malesuada.</p>
56 <p><a class="btn btn-primary" href="#" role="button">Saiba mais...</a></p>
57 </div>
58 </div>
59 </div>
60 <div class="col-md-3 col-sm-6">
61 <div class="thumbnail">
62 <img src="t2.jpg" alt="carro1">
63 <div class="caption text-left">
64 <h3>Descrição da imagem</h3>
65 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus
quis laoreet faucibus, ante augue malesuada.</p>
66
view-source:file:///C:/Users/lmorais/Desktop/Livro-PDF-BS3_MAUJOR/Livro-PDF-BS3_MAUJOR/codigos/c4/thumbnail.html 1/3
19/12/2019 thumbnail.html
128 });
129
130
view-source:file:///C:/Users/lmorais/Desktop/Livro-PDF-BS3_MAUJOR/Livro-PDF-BS3_MAUJOR/codigos/c4/thumbnail.html 2/3
19/12/2019 thumbnail.html
$('#readable').on('click', function() {
131 $('link').remove();
132 $('<link href="../bootstrap/css/journal.css" rel="stylesheet">').insertAfter('title');
133 });
134 </script>
135
136 </body>
137 </html>
view-source:file:///C:/Users/lmorais/Desktop/Livro-PDF-BS3_MAUJOR/Livro-PDF-BS3_MAUJOR/codigos/c4/thumbnail.html 3/3