ExemploBootstrap

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Utilização do Bootstrap</title>

    <!-- Arquivos CSS do Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome para ícones -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- Estilos personalizados -->
    <style>
        body {
            padding-top: 5rem;
        }
      .text-muted {
      color: #6c757d!important;
      }
      footer {
      background-color: #f8f9fa!important;
      padding-top: 3rem;
      padding-bottom: 3rem;
      }
    </style>
</head>

<body>
    <!-- Barra de navegação -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">Meu Site</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Página Inicial</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Sobre</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Serviços</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contato</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Conteúdo principal -->
    <div class="container mt-5">
        <h1>Bem-vindo ao Meu Site</h1>
        <p class="lead">Este é um exemplo de utilização do Bootstrap para criar uma página web responsiva.</p>

        <!-- Exemplo de alerta -->
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            Este é um exemplo de <strong>alerta</strong> utilizando Bootstrap. Clique no botão para fechar.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

        <!-- Exemplo de cards -->
        <h3>Cards</h3>
        <div class="row row-cols-1 row-cols-md-3 g-4">
            <div class="col">
                <div class="card h-100">
                    <img src="https://via.placeholder.com/300" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card 1</h5>
                        <p class="card-text">Este é um exemplo de card com Bootstrap. Pode conter qualquer conteúdo que
                            você desejar.</p>
                        <a href="#" class="btn btn-primary">Ver mais</a>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://via.placeholder.com/300" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card 2</h5>
                        <p class="card-text">Outro exemplo de card com imagem e conteúdo.</p>
                        <a href="#" class="btn btn-primary">Ver mais</a>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://via.placeholder.com/300" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card 3</h5>
                        <p class="card-text">Mais um exemplo de card para demonstração.</p>
                        <a href="#" class="btn btn-primary">Ver mais</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="container mt-5">


        <!-- Exemplo de formulário -->
        <div class="row mt-5">
            <div class="col-md-6">
                <h3>Entre em Contato</h3>
                <form>
                    <div class="mb-3">
                        <label for="nome" class="form-label">Nome</label>
                        <input type="text" class="form-control" id="nome" placeholder="Seu nome">
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="email" placeholder="Seu email">
                    </div>
                    <div class="mb-3">
                        <label for="mensagem" class="form-label">Mensagem</label>
                        <textarea class="form-control" id="mensagem" rows="4" placeholder="Sua mensagem"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Enviar</button>
                </form>
            </div>

            <!-- Exemplo de ícones -->
            <div class="col-md-6">
                <h3>Ícones</h3>
                <p>Exemplo de alguns ícones usando Font Awesome:</p>
                <div class="fs-1 text-center">
                    <i class="fab fa-facebook-square text-primary"></i>
                    <i class="fab fa-twitter-square text-info"></i>
                    <i class="fab fa-instagram-square text-danger"></i>
                </div>
            </div>
        </div>
    </div>

        <!-- Exemplo de sistema de grid -->
        <h3 class="mt-5">Sistema de Grid</h3>
        <div class="row">
            <div class="col-md-8">
                <p>Este é um exemplo de layout responsivo utilizando o sistema de grid do Bootstrap. Aqui, uma coluna
                    principal ocupando 8 colunas em telas maiores (md) e 12 colunas em telas menores.</p>
            </div>
            <div class="col-md-4">
                <p>Uma coluna secundária que ocupa 4 colunas em telas maiores (md) e também 12 colunas em telas menores.
                </p>
            </div>
        </div>
    </div>
    <footer class="text-muted">
      <div class="container">
        <p class="float-right">
          <a href="#">Voltar ao topo</a>
        </p>
        <p>Este exemplo de álbum é © Bootstrap, mas, por favor, baixe e customize por conta própria.</p>
        <p>Novo no Bootstrap? <a href="https://getbootstrap.com.br/">Visite a página principal</a> ou leia nosso guia <a href="https://getbootstrap.com.br/docs/4.1/getting-started/introduction/">getting started</a>.</p>
      </div>
    </footer>

    <!-- Scripts do Bootstrap e do jQuery (opcional para alguns componentes) -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-..."
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

</html>