Thumbnail HTML

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 — <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>
34 </a>
35 </div>
39 </a>
40 </div>
44 </a>
45 </div>
46 </div> 
47 <hr>
48 <div class="row text-center">
49 <h2>Thumbnail com conteúdo</h2>
51 <div class="thumbnail">
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>
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>
77 </div>
78 </div>
79 </div>
87 </div>
88 </div>
89 </div>
90 </div> 
91 </div> 
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() {
117 $('<link href="../bootstrap/css/cyborg.css" rel="stylesheet">').insertAfter('title');
118 });
119
120 $('#cosmo').on('click', function() {
122 $('<link href="../bootstrap/css/cosmo.css" rel="stylesheet">').insertAfter('title');
123 });
124
125 $('#superhero').on('click', function() {
127 $('<link href="../bootstrap/css/superhero.css" rel="stylesheet">').insertAfter('title');
128 });
129
130
19/12/2019 thumbnail.html
$('#readable').on('click', function() {
132 $('<link href="../bootstrap/css/journal.css" rel="stylesheet">').insertAfter('title');
133 });
134 </script>
135
136 </body>
137 </html>

Thumbnail HTML

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Thumbnail HTML

Caricato da

Copyright:

Formati disponibili

19/12/2019 thumbnail.

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

Potrebbero piacerti anche