Skip to content

Commit 93a888b

Browse files
Sln-GRSln-GR
authored
commit inicial
0 parents  commit 93a888b

9 files changed

+588
-0
lines changed

‎a-cards.html

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-BR">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Bootstrap - Cards</title>
7+
<link rel="stylesheet" href="./lib/bootstrap.min.css">
8+
<style>
9+
.card-img-overlay {
10+
background-color: rgba(0,0,0, 0.5);
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<h1>Bootstrap - Cards</h1>
16+
<div class="container">
17+
<div class="row">
18+
<div class="col-4">
19+
<article class="card">
20+
<header class="card-header">
21+
Criando um card
22+
</header>
23+
<img src="https://via.placeholder.com/100x100" alt="">
24+
<div class="card-body">
25+
<h4 class="card-title">Cards do bootstrap</h4>
26+
<p class="card-text">
27+
Utilizando a semantica correta article, header e footer!
28+
</p>
29+
<a href="#" class="btn btn-primary">Leia mais</a>
30+
</div>
31+
<footer class="card-footer">
32+
Postado em <time>02/11/2024</time>
33+
</footer>
34+
</article>
35+
</div>
36+
<div class="col-4">
37+
<div class="card">
38+
<img src="https://i.pinimg.com/originals/8e/0d/56/8e0d568f9f5c2ff9c1dbd9696f808a3f.jpg" alt="">
39+
<div class="card-body">
40+
<h4 class="card-title">Título do Card</h4>
41+
<h5 class="card-subtitle">Subtítulo</h5>
42+
<p class="card-text">
43+
Adicionando uma imagem ao card!
44+
</p>
45+
<a href="#" class="btn btn-primary">Botão link</a>
46+
</div>
47+
</div>
48+
</div>
49+
<div class="col-4">
50+
<div class="card text-bg-dark">
51+
<div class="card-header">
52+
Cabeçalho do header
53+
</div>
54+
<img src="https://via.placeholder.com/100x100" alt="">
55+
<div class="card-body">
56+
<h4 class="card-title">Título do Card</h4>
57+
<h5 class="card-subtitle">Subtítulo</h5>
58+
<p class="card-text">
59+
No mundo profissional, poderiamos utilizar em um blog! Nesse card usamos a classe text-bg-dark também!
60+
</p>
61+
<a href="#" class="btn btn-primary">Botão link</a>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
<div class="row">
67+
<div class="col-4">
68+
<div class="card text-bg-dark">
69+
<img src="https://st2.depositphotos.com/6544740/9337/i/450/depositphotos_93376372-stock-photo-sunset-over-sea-pier.jpg" alt="">
70+
<div class="card-img-overlay">
71+
<h4 class="card-title">Título do Card</h4>
72+
<h5 class="card-subtitle">Subtítulo</h5>
73+
<p class="card-text">
74+
Trocamos a classe card-body por card-img-overlay! + text-bg-dark para o texto ficar branco!
75+
</p>
76+
<p class="card-text">
77+
Abrir uma tag style para melhorar a legibilidade,
78+
.card-img-overlay { background-color: rgba (0,0,0, 0.7)}
79+
</p>
80+
<a href="#" class="btn btn-primary">Botão link</a>
81+
</div>
82+
</div>
83+
</div>
84+
<div class="container d-flex justify-content-end">
85+
<div class="row">
86+
<div class="col">
87+
<div>
88+
<button type="button" class="btn btn-warning ">
89+
<a style="text-decoration: none; color: #fff;" href="./index.html">Voltar ao Index</a>
90+
</button>
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
</div>
96+
97+
98+
<script src="./lib/bootstrap.bundle.min.js"></script>
99+
</body>
100+
</html>

‎b-carousel.html

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-BR">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Carousel</title>
7+
<link rel="stylesheet" href="lib/bootstrap.min.css">
8+
9+
<style>
10+
.carousel-item img {
11+
height: 60vw;
12+
}
13+
</style>
14+
15+
</head>
16+
<body>
17+
<div class="container">
18+
<div id="carousel-exemplo" class="carousel carousel-fade slide" data-bs-ride="carousel">
19+
<div class="carousel-inner">
20+
<div data-bs-interval="3000" class="carousel-item active" >
21+
<img class="d-block w-100" src="https://c.pxhere.com/photos/dd/b4/cat_face_eyes_portrait_face_cat_pet_mieze_kitten-393851.jpg!d">
22+
<div class="carousel-caption">
23+
<h2>Foto de um gato</h2>
24+
</div>
25+
</div>
26+
<div data-bs-interval="3000" class="carousel-item">
27+
<img class="d-block w-100" src="https://upload.wikimedia.org/wikipedia/commons/9/94/Gato_(2)_REFON.jpg">
28+
<div class="carousel-caption">
29+
<h2>Foto de um gato</h2>
30+
</div>
31+
</div>
32+
<div data-bs-interval="3000" class="carousel-item">
33+
<img class="d-block w-100" src="https://www.zooplus.pt/magazine/wp-content/uploads/2021/03/kitten-sitzt-boden-768x512-1.jpeg">
34+
<div class="carousel-caption">
35+
<h2>Foto de um gato</h2>
36+
</div>
37+
</div>
38+
</div>
39+
<button data-bs-target="#carousel-exemplo" data-bs-slide="prev" class="carousel-control-prev" type="button">
40+
<span class="carousel-control-prev-icon"></span>
41+
</button>
42+
<button data-bs-target="#carousel-exemplo" data-bs-slide="next" class="carousel-control-next" type="button">
43+
<span class="carousel-control-next-icon"></span>
44+
</button>
45+
<div class="carousel-indicators">
46+
<button class="active" type="button" data-bs-target="#carousel-exemplo" data-bs-slide-to="0"></button>
47+
<button type="button" data-bs-target="#carousel-exemplo" data-bs-slide-to="1"></button>
48+
<button type="button" data-bs-target="#carousel-exemplo" data-bs-slide-to="2"></button>
49+
</div>
50+
</div>
51+
</div>
52+
<div class="container d-flex justify-content-end">
53+
<div class="row">
54+
<div class="col">
55+
<div>
56+
<button type="button" class="btn btn-warning ">
57+
<a style="text-decoration: none; color: #fff;" href="./index.html">Voltar ao Index</a>
58+
</button>
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
64+
<script src="./lib/bootstrap.bundle.min.js"></script>
65+
</body>
66+
</html>

‎c-modal-popup.html

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-BR">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Modal - Pop-up!</title>
7+
<link rel="stylesheet" href="./lib/bootstrap.min.css">
8+
</head>
9+
<body>
10+
<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exemplo-modal">
11+
Abri modal
12+
</button>
13+
<div id="exemplo-modal" class="modal">
14+
<div class="modal-dialog">
15+
<div class="modal-content"> <!--Divide-se em cabeçalho corpo e rodapé-->
16+
<div class="modal-header">
17+
<h5>Título da Modal</h5>
18+
</div>
19+
<div class="modal-body">
20+
<p>
21+
Esse é um parágrafo de um pop-up. Ele fecha ao clicar fora dele!
22+
</p>
23+
</div>
24+
<div class="modal-footer">
25+
<h5>Rodapé da modal</h5>
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
31+
<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exemplo-modal-static">
32+
Abrir Modal Static
33+
</button>
34+
<div id="exemplo-modal-static" class="modal" data-bs-backdrop="static">
35+
<div class="modal-dialog">
36+
<div class="modal-content"> <!--Divide-se em cabeçalho corpo e rodapé-->
37+
<div class="modal-header">
38+
<h5>Título da Modal</h5>
39+
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
40+
</div>
41+
<div class="modal-body">
42+
<p>
43+
Essa modal não fecha ao clicar fora dela! Clique no X
44+
em cancelar ou confirmar!
45+
</p>
46+
</div>
47+
<div class="modal-footer">
48+
<button class="btn btn-danger" type="button" data-bs-dismiss="modal">Cancelar</button>
49+
<button class="btn btn-success" type="button" data-bs-dismiss="modal">Confirmar</button>
50+
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
<div class="container d-flex justify-content-center p-5">
56+
<div class="row">
57+
<div class="col">
58+
<div>
59+
<button type="button" class="btn btn-warning ">
60+
<a style="text-decoration: none; color: #fff;" href="./index.html">Voltar ao Index</a>
61+
</button>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
67+
68+
69+
<script src="./lib/bootstrap.bundle.min.js"></script>
70+
<script> // Mostra a modal automaticamente depois que carrega toda a página
71+
document.addEventListener('DOMContentLoaded', function() {
72+
const modalExemplo = new bootstrap.Modal('#exemplo-modal')
73+
74+
setTimeout(function() {
75+
modalExemplo.show()
76+
}, 1000)
77+
})
78+
</script>
79+
</body>
80+
</html>

‎d-dropdown-menu.html

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Menu Dropdown!</title>
7+
<link rel="stylesheet" href="./lib/bootstrap.min.css">
8+
</head>
9+
<body>
10+
<div class="container mt-3">
11+
<div class="d-inline-block">
12+
<div class="dropdown">
13+
<button data-bs-toggle="dropdown" class="btn btn-primary dropdown-toggle">
14+
Cadastrar
15+
</button>
16+
<ul class="dropdown-menu dropdown-menu-dark">
17+
<li class="dropdown-item">
18+
<a href="#">Novo usuário</a>
19+
</li>
20+
<li class="dropdown-item">
21+
<a href="#">Novo fornecedor</a>
22+
</li>
23+
<li class="dropdown-item">
24+
<a href="#">Novo funcionário</a>
25+
</li>
26+
</ul>
27+
</div>
28+
</div>
29+
<div class="d-inline-block ml-2">
30+
<div class="btn-group">
31+
<button class="btn btn-primary">
32+
Cadastrar
33+
</button>
34+
<button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
35+
<ul class="dropdown-menu dropdown-menu-dark">
36+
<li class="dropdown-item">
37+
<a href="#">Novo usuário</a>
38+
</li>
39+
<li class="dropdown-item">
40+
<a href="#">Novo fornecedor</a>
41+
</li>
42+
<li class="dropdown-item">
43+
<a href="#">Novo funcionário</a>
44+
</li>
45+
</ul>
46+
</div>
47+
</div>
48+
</div>
49+
<div class="container d-flex justify-content-center p-5">
50+
<div class="row">
51+
<div class="col">
52+
<div>
53+
<button type="button" class="btn btn-warning ">
54+
<a style="text-decoration: none; color: #fff;" href="./index.html">Voltar ao Index</a>
55+
</button>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
61+
<script src="./lib/bootstrap.bundle.min.js"></script>
62+
</body>
63+
</html>

0 commit comments

Comments
 (0)