Você está na página 1de 3

19/12/2019 thumbnail.

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 &#8212; <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

<p><a class="btn btn-primary" href="#" role="button">Saiba mais...</a></p>


67 </div>
68 </div>
69 </div>
70 <div class="col-md-3 col-sm-6">
71 <div class="thumbnail">
72 <img src="t3.jpg" alt="carro1">
73 <div class="caption text-left">
74 <h3>Descrição da imagem</h3>
75 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus
quis laoreet faucibus, ante augue malesuada.</p>
76 <p><a class="btn btn-primary" href="#" role="button">Saiba mais...</a></p>
77 </div>
78 </div>
79 </div>
80 <div class="col-md-3 col-sm-6">
81 <div class="thumbnail">
82 <img src="t4.jpg" alt="carro1">
83 <div class="caption text-left">
84 <h3>Descrição da imagem</h3>
85 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus
quis laoreet faucibus, ante augue malesuada.</p>
86 <p><a class="btn btn-primary" href="#" role="button">Saiba mais...</a></p>
87 </div>
88 </div>
89 </div>
90 </div> <!-- /.row -->
91 </div> <!-- /.container -->
92 <script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
93 <script type="text/javascript">
94 //<![CDATA[
95 (window.jQuery)||document.write('<script type="text/javascript"
src="../bootstrap/js/jquery.min.js"><\/script>');//]]>
96 </script>
97 <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
98 <div class="container temas">
99 <h4>Escolha um tema</h4>
100 <p>Temas gratuitos por: <a href="https://bootswatch.com/">Bootswatch</a></p>
101 <button type="button" class="btn btn-default btn-xs" id="default">Default</button>
102 <button type="button" class="btn btn-default btn-xs" id="cyborg">Cyborg</button>
103 <button type="button" class="btn btn-default btn-xs" id="cosmo">Cosmo</button>
104 <button type="button" class="btn btn-default btn-xs" id="superhero">Superhero</button>
105 <button type="button" class="btn btn-default btn-xs" id="readable">Journal</button>
106 </div>
107 <script type="text/javascript">
108 $('#default').on('click', function() {
109 $('link').remove();
110 $('<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">').insertAfter('title');
111 $('<link href="../bootstrap/css/bootstrap-theme.css"
rel="stylesheet">').insertAfter('link');
112 });
113
114
115 $('#cyborg').on('click', function() {
116 $('link').remove();
117 $('<link href="../bootstrap/css/cyborg.css" rel="stylesheet">').insertAfter('title');
118 });
119
120 $('#cosmo').on('click', function() {
121 $('link').remove();
122 $('<link href="../bootstrap/css/cosmo.css" rel="stylesheet">').insertAfter('title');
123 });
124
125 $('#superhero').on('click', function() {
126 $('link').remove();
127 $('<link href="../bootstrap/css/superhero.css" rel="stylesheet">').insertAfter('title');

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

Você também pode gostar