Skip to content

Commit 54fa34d

Browse files
StructuralWizardStructuralWizard
committed
remove bootstrap
1 parent 3c68c8a commit 54fa34d

File tree

1 file changed

+1
-330
lines changed

1 file changed

+1
-330
lines changed

‎docs/Day4/index.md‎

Lines changed: 1 addition & 330 deletions
Original file line numberDiff line numberDiff line change
@@ -1739,336 +1739,7 @@ You can visualise this code in [W3Schools html web testing](https://www.w3school
17391739
</summary>
17401740

17411741
```
1742-
<html lang="pt-br">
1743-
<head>
1744-
<meta charset="UTF-8">
1745-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1746-
<title>Mostruário de Bootstrap e Tailwind CSS</title>
1747-
<!-- Fonte Inter do Google Fonts -->
1748-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
1749-
<!-- Bootstrap CSS -->
1750-
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
1751-
<!-- Tailwind CSS CDN -->
1752-
<script src="https://cdn.tailwindcss.com"></script>
1753-
<style>
1754-
body {
1755-
font-family: 'Inter', sans-serif;
1756-
background-color: #f8f9fa; /* Fundo cinza claro */
1757-
}
1758-
.section-header {
1759-
border-bottom: 2px solid #e0e0e0;
1760-
padding-bottom: 1rem;
1761-
margin-bottom: 2rem;
1762-
font-weight: 600;
1763-
color: #343a40;
1764-
}
1765-
.card {
1766-
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
1767-
border-radius: 0.75rem; /* Cantos mais arredondados */
1768-
overflow: hidden;
1769-
transition: transform 0.2s ease-in-out;
1770-
}
1771-
.card:hover {
1772-
transform: translateY(-5px);
1773-
}
1774-
.btn-custom {
1775-
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
1776-
border: none;
1777-
color: white;
1778-
padding: 0.75rem 1.5rem;
1779-
border-radius: 0.5rem;
1780-
transition: all 0.3s ease;
1781-
}
1782-
.btn-custom:hover {
1783-
transform: translateY(-2px);
1784-
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
1785-
color: white; /* Garante que o texto permaneça branco ao passar o mouse */
1786-
}
1787-
/* Estilos personalizados para melhor espaçamento e estética */
1788-
.container-fluid {
1789-
padding-left: 1rem;
1790-
padding-right: 1rem;
1791-
}
1792-
.container {
1793-
padding-top: 3rem;
1794-
padding-bottom: 3rem;
1795-
}
1796-
</style>
1797-
</head>
1798-
<body>
1799-
1800-
<!-- Seção da Barra de Navegação -->
1801-
<nav class="navbar navbar-expand-lg bg-white shadow-sm py-3 px-4">
1802-
<div class="container-fluid">
1803-
<a class="navbar-brand text-lg font-bold text-gray-800" href="#">Mostruário Bootstrap</a>
1804-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
1805-
<span class="navbar-toggler-icon"></span>
1806-
</button>
1807-
<div class="collapse navbar-collapse" id="navbarNav">
1808-
<ul class="navbar-nav ms-auto space-x-4">
1809-
<li class="nav-item">
1810-
<a class="nav-link text-gray-700 hover:text-blue-600 font-medium" aria-current="page" href="#layout">Layout</a>
1811-
</li>
1812-
<li class="nav-item">
1813-
<a class="nav-link text-gray-700 hover:text-blue-600 font-medium" href="#components">Componentes</a>
1814-
</li>
1815-
<li class="nav-item">
1816-
<a class="nav-link text-gray-700 hover:text-blue-600 font-medium" href="#forms">Formulários</a>
1817-
</li>
1818-
<li class="nav-item">
1819-
<a class="nav-link text-gray-700 hover:text-blue-600 font-medium" href="#utilities">Utilitários</a>
1820-
</li>
1821-
</ul>
1822-
</div>
1823-
</div>
1824-
</nav>
1825-
1826-
<!-- Seção de Herói -->
1827-
<div class="bg-gradient-to-r from-blue-600 to-purple-700 text-white py-20 px-4 text-center rounded-b-lg shadow-lg">
1828-
<div class="container mx-auto">
1829-
<h1 class="text-5xl font-extrabold mb-4">Explore o Poder do Bootstrap</h1>
1830-
<p class="text-xl mb-8 opacity-90">Um template abrangente mostrando recursos essenciais do Bootstrap e design responsivo.</p>
1831-
<button class="btn btn-lg btn-custom shadow-md hover:shadow-xl">Começar</button>
1832-
</div>
1833-
</div>
1834-
1835-
<main class="container mx-auto mt-12 px-4 md:px-0">
1836-
1837-
<!-- Seção de Layout -->
1838-
<section id="layout" class="mb-12 bg-white p-6 rounded-lg shadow-md">
1839-
<h2 class="text-3xl section-header mb-8">1. Layout e Sistema de Grade</h2>
1840-
<div class="row g-4">
1841-
<div class="col-md-6 col-lg-4">
1842-
<div class="p-4 bg-blue-100 border border-blue-300 rounded-md text-blue-800 h-full flex items-center justify-center">
1843-
<p class="text-lg font-medium">Coluna 1 (col-md-6 col-lg-4)</p>
1844-
</div>
1845-
</div>
1846-
<div class="col-md-6 col-lg-4">
1847-
<div class="p-4 bg-green-100 border border-green-300 rounded-md text-green-800 h-full flex items-center justify-center">
1848-
<p class="text-lg font-medium">Coluna 2 (col-md-6 col-lg-4)</p>
1849-
</div>
1850-
</div>
1851-
<div class="col-md-6 col-lg-4">
1852-
<div class="p-4 bg-yellow-100 border border-yellow-300 rounded-md text-yellow-800 h-full flex items-center justify-center">
1853-
<p class="text-lg font-medium">Coluna 3 (col-md-6 col-lg-4)</p>
1854-
</div>
1855-
</div>
1856-
<div class="col-md-12">
1857-
<div class="p-4 bg-purple-100 border border-purple-300 rounded-md text-purple-800 h-full flex items-center justify-center">
1858-
<p class="text-lg font-medium">Coluna de Largura Total (col-md-12)</p>
1859-
</div>
1860-
</div>
1861-
</div>
1862-
<p class="mt-6 text-gray-700">Demonstra o sistema de grade responsivo do Bootstrap, adaptando colunas para diferentes tamanhos de tela.</p>
1863-
</section>
1864-
1865-
<!-- Seção de Componentes -->
1866-
<section id="components" class="mb-12 bg-white p-6 rounded-lg shadow-md">
1867-
<h2 class="text-3xl section-header mb-8">2. Componentes Principais</h2>
1868-
1869-
<!-- Cards -->
1870-
<h3 class="text-2xl font-semibold mb-4 text-gray-800">2.1 Cards</h3>
1871-
<div class="row g-4 mb-8">
1872-
<div class="col-md-6 col-lg-4">
1873-
<div class="card h-full">
1874-
<img src="https://placehold.co/600x400/FF5733/ffffff?text=Imagem+1" class="card-img-top w-full h-48 object-cover" alt="Imagem do Card 1">
1875-
<div class="card-body">
1876-
<h5 class="card-title text-xl font-semibold mb-2">Título do Card Um</h5>
1877-
<p class="card-text text-gray-700">Texto de exemplo rápido para construir sobre o título do card e compor a maior parte do conteúdo do card.</p>
1878-
<a href="#" class="btn btn-primary bg-blue-500 hover:bg-blue-600 border-none rounded-md px-4 py-2">Ir para algum lugar</a>
1879-
</div>
1880-
</div>
1881-
</div>
1882-
<div class="col-md-6 col-lg-4">
1883-
<div class="card h-full">
1884-
<img src="https://placehold.co/600x400/33FF57/ffffff?text=Imagem+2" class="card-img-top w-full h-48 object-cover" alt="Imagem do Card 2">
1885-
<div class="card-body">
1886-
<h5 class="card-title text-xl font-semibold mb-2">Título do Card Dois</h5>
1887-
<p class="card-text text-gray-700">Outro exemplo de card com um conteúdo um pouco mais longo para mostrar a consistência da altura do card.</p>
1888-
<a href="#" class="btn btn-success bg-green-500 hover:bg-green-600 border-none rounded-md px-4 py-2">Saiba mais</a>
1889-
</div>
1890-
</div>
1891-
</div>
1892-
<div class="col-md-6 col-lg-4">
1893-
<div class="card h-full">
1894-
<img src="https://placehold.co/600x400/5733FF/ffffff?text=Imagem+3" class="card-img-top w-full h-48 object-cover" alt="Imagem do Card 3">
1895-
<div class="card-body">
1896-
<h5 class="card-title text-xl font-semibold mb-2">Título do Card Três</h5>
1897-
<p class="card-text text-gray-700">Este card demonstra uma imagem no topo e conteúdo de corpo padrão.</p>
1898-
<a href="#" class="btn btn-warning bg-yellow-500 hover:bg-yellow-600 border-none rounded-md px-4 py-2">Ver detalhes</a>
1899-
</div>
1900-
</div>
1901-
</div>
1902-
</div>
1903-
1904-
<!-- Botões -->
1905-
<h3 class="text-2xl font-semibold mb-4 text-gray-800">2.2 Botões</h3>
1906-
<div class="flex flex-wrap gap-3 mb-8 items-center">
1907-
<button type="button" class="btn btn-primary rounded-lg px-4 py-2 shadow-md">Primário</button>
1908-
<button type="button" class="btn btn-secondary rounded-lg px-4 py-2 shadow-md">Secundário</button>
1909-
<button type="button" class="btn btn-success rounded-lg px-4 py-2 shadow-md">Sucesso</button>
1910-
<button type="button" class="btn btn-danger rounded-lg px-4 py-2 shadow-md">Perigo</button>
1911-
<button type="button" class="btn btn-warning rounded-lg px-4 py-2 shadow-md">Aviso</button>
1912-
<button type="button" class="btn btn-info rounded-lg px-4 py-2 shadow-md">Info</button>
1913-
<button type="button" class="btn btn-light rounded-lg px-4 py-2 shadow-md">Claro</button>
1914-
<button type="button" class="btn btn-dark rounded-lg px-4 py-2 shadow-md">Escuro</button>
1915-
<button type="button" class="btn btn-link rounded-lg px-4 py-2">Link</button>
1916-
<button type="button" class="btn btn-outline-primary rounded-lg px-4 py-2">Contorno Primário</button>
1917-
<button type="button" class="btn btn-custom rounded-lg px-4 py-2">Gradiente Personalizado</button>
1918-
</div>
1919-
1920-
<!-- Alertas -->
1921-
<h3 class="text-2xl font-semibold mb-4 text-gray-800">2.3 Alertas</h3>
1922-
<div class="mb-8 space-y-3">
1923-
<div class="alert alert-primary rounded-lg p-3" role="alert">
1924-
Um alerta primário simples—confira!
1925-
</div>
1926-
<div class="alert alert-secondary rounded-lg p-3" role="alert">
1927-
Um alerta secundário simples—confira!
1928-
</div>
1929-
<div class="alert alert-success rounded-lg p-3" role="alert">
1930-
Um alerta de sucesso simples—confira!
1931-
</div>
1932-
<div class="alert alert-danger rounded-lg p-3" role="alert">
1933-
Um alerta de perigo simples—confira!
1934-
</div>
1935-
<div class="alert alert-warning rounded-lg p-3" role="alert">
1936-
Um alerta de aviso simples—confira!
1937-
</div>
1938-
<div class="alert alert-info rounded-lg p-3" role="alert">
1939-
Um alerta de informação simples—confira!
1940-
</div>
1941-
</div>
1942-
1943-
<!-- Modais -->
1944-
<h3 class="text-2xl font-semibold mb-4 text-gray-800">2.4 Modais</h3>
1945-
<button type="button" class="btn btn-primary rounded-lg px-4 py-2 shadow-md" data-bs-toggle="modal" data-bs-target="#exampleModal">
1946-
Lançar modal de demonstração
1947-
</button>
1948-
1949-
<!-- Estrutura do Modal -->
1950-
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
1951-
<div class="modal-dialog rounded-lg">
1952-
<div class="modal-content rounded-lg shadow-lg">
1953-
<div class="modal-header border-b border-gray-200">
1954-
<h5 class="modal-title text-xl font-semibold" id="exampleModalLabel">Título do modal</h5>
1955-
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
1956-
</div>
1957-
<div class="modal-body text-gray-700">
1958-
Este é um exemplo de conteúdo de modal. Você pode colocar qualquer conteúdo HTML aqui, como formulários, imagens ou texto.
1959-
</div>
1960-
<div class="modal-footer border-t border-gray-200">
1961-
<button type="button" class="btn btn-secondary rounded-lg px-4 py-2" data-bs-dismiss="modal">Fechar</button>
1962-
<button type="button" class="btn btn-primary rounded-lg px-4 py-2">Salvar alterações</button>
1963-
</div>
1964-
</div>
1965-
</div>
1966-
</div>
1967-
</section>
1968-
1969-
<!-- Seção de Formulários -->
1970-
<section id="forms" class="mb-12 bg-white p-6 rounded-lg shadow-md">
1971-
<h2 class="text-3xl section-header mb-8">3. Formulários</h2>
1972-
<form>
1973-
<div class="mb-4">
1974-
<label for="exampleInputEmail1" class="form-label text-gray-700 font-medium">Endereço de email</label>
1975-
<input type="email" class="form-control rounded-md p-2 border border-gray-300 focus:ring focus:ring-blue-200" id="exampleInputEmail1" aria-describedby="emailHelp">
1976-
<div id="emailHelp" class="form-text text-sm text-gray-500 mt-1">Nós nunca compartilharemos seu email com ninguém.</div>
1977-
</div>
1978-
<div class="mb-4">
1979-
<label for="exampleInputPassword1" class="form-label text-gray-700 font-medium">Senha</label>
1980-
<input type="password" class="form-control rounded-md p-2 border border-gray-300 focus:ring focus:ring-blue-200" id="exampleInputPassword1">
1981-
</div>
1982-
<div class="mb-4 form-check">
1983-
<input type="checkbox" class="form-check-input rounded-sm" id="exampleCheck1">
1984-
<label class="form-check-label text-gray-700" for="exampleCheck1">Me marque</label>
1985-
</div>
1986-
<div class="mb-4">
1987-
<label for="formControlTextarea1" class="form-label text-gray-700 font-medium">Exemplo de área de texto</label>
1988-
<textarea class="form-control rounded-md p-2 border border-gray-300 focus:ring focus:ring-blue-200" id="formControlTextarea1" rows="3"></textarea>
1989-
</div>
1990-
<div class="mb-4">
1991-
<label for="formFile" class="form-label text-gray-700 font-medium">Exemplo de entrada de arquivo padrão</label>
1992-
<input class="form-control rounded-md p-2 border border-gray-300 focus:ring focus:ring-blue-200" type="file" id="formFile">
1993-
</div>
1994-
<div class="mb-4">
1995-
<label for="formSelect" class="form-label text-gray-700 font-medium">Opção de seleção</label>
1996-
<select class="form-select rounded-md p-2 border border-gray-300 focus:ring focus:ring-blue-200" aria-label="Default select example" id="formSelect">
1997-
<option selected>Abra este menu de seleção</option>
1998-
<option value="1">Um</option>
1999-
<option value="2">Dois</option>
2000-
<option value="3">Três</option>
2001-
</select>
2002-
</div>
2003-
<button type="submit" class="btn btn-primary rounded-lg px-4 py-2 shadow-md">Enviar</button>
2004-
</form>
2005-
</section>
2006-
2007-
<!-- Seção de Utilitários -->
2008-
<section id="utilities" class="mb-12 bg-white p-6 rounded-lg shadow-md">
2009-
<h2 class="text-3xl section-header mb-8">4. Classes Utilitárias</h2>
2010-
2011-
<!-- Tipografia -->
2012-
<h3 class="text-2xl font-semibold mb-4 text-gray-800">4.1 Tipografia</h3>
2013-
<p class="h1 text-blue-700 mb-2">h1. Título Bootstrap</p>
2014-
<p class="h2 text-green-700 mb-2">h2. Título Bootstrap</p>
2015-
<p class="h3 text-purple-700 mb-2">h3. Título Bootstrap</p>
2016-
<p class="lead text-lg text-gray-700 mb-2">Este é um parágrafo de destaque, indicando um elemento de texto mais proeminente.</p>
2017-
<p class="text-muted text-gray-500 mb-2">Este texto está silenciado.</p>
2018-
<p class="font-bold mb-2">Este texto está em negrito usando o font-bold do Tailwind.</p>
2019-
<p class="text-decoration-underline mb-8">Este texto está sublinhado.</p>
2020-
2021-
<!-- Espaçamento (Margem e Preenchimento) -->
2022-
<h3 class="text-2xl font-semibold mb-4 text-gray-800">4.2 Espaçamento</h3>
2023-
<div class="bg-blue-100 p-4 mb-4 rounded-md">
2024-
<div class="bg-blue-300 p-2 m-4 rounded-md">
2025-
<p class="text-blue-900">Esta div tem margem `m-4` do Tailwind.</p>
2026-
</div>
2027-
</div>
2028-
<div class="bg-green-100 p-4 mb-8 rounded-md">
2029-
<div class="bg-green-300 py-3 px-5 rounded-md">
2030-
<p class="text-green-900">Esta div tem preenchimento `py-3 px-5` do Tailwind.</p>
2031-
</div>
2032-
</div>
2033-
2034-
<!-- Cores -->
2035-
<h3 class="text-2xl font-semibold mb-4 text-gray-800">4.3 Cores</h3>
2036-
<div class="flex flex-wrap gap-4 mb-8">
2037-
<div class="p-4 rounded-md text-white bg-primary shadow-md">Cor Primária</div>
2038-
<div class="p-4 rounded-md text-white bg-secondary shadow-md">Cor Secundária</div>
2039-
<div class="p-4 rounded-md text-white bg-success shadow-md">Cor de Sucesso</div>
2040-
<div class="p-4 rounded-md text-white bg-danger shadow-md">Cor de Perigo</div>
2041-
<div class="p-4 rounded-md text-dark bg-warning shadow-md">Cor de Aviso</div>
2042-
<div class="p-4 rounded-md text-white bg-info shadow-md">Cor de Informação</div>
2043-
<div class="p-4 rounded-md text-dark bg-light shadow-md border">Cor Clara</div>
2044-
<div class="p-4 rounded-md text-white bg-dark shadow-md">Cor Escura</div>
2045-
<div class="p-4 rounded-md text-white bg-gradient-to-r from-pink-500 to-red-500 shadow-md">Gradiente Personalizado</div>
2046-
</div>
2047-
2048-
<!-- Sombras -->
2049-
<h3 class="text-2xl font-semibold mb-4 text-gray-800">4.4 Sombras</h3>
2050-
<div class="flex flex-wrap gap-6 mb-8">
2051-
<div class="p-6 bg-white rounded-lg shadow-sm">Sombra Pequena</div>
2052-
<div class="p-6 bg-white rounded-lg shadow-md">Sombra Média</div>
2053-
<div class="p-6 bg-white rounded-lg shadow-lg">Sombra Grande</div>
2054-
<div class="p-6 bg-white rounded-lg shadow-xl">Sombra Extra Grande</div>
2055-
<div class="p-6 bg-white rounded-lg shadow-2xl">Sombra 2XL</div>
2056-
</div>
2057-
</section>
2058-
2059-
</main>
2060-
2061-
<!-- Rodapé -->
2062-
<footer class="bg-gray-800 text-white text-center py-8 mt-12 rounded-t-lg shadow-inner">
2063-
<p class="text-sm">&copy; 2024 Mostruário Bootstrap. Todos os direitos reservados.</p>
2064-
<p class="text-xs opacity-75 mt-2">Construído com Bootstrap e Tailwind CSS</p>
2065-
</footer>
2066-
2067-
<!-- Pacote JavaScript do Bootstrap -->
2068-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
2069-
</body>
2070-
</html>
2071-
1742+
placeholder
20721743
```
20731744

20741745
</details>

0 commit comments

Comments
 (0)