Crie sites incríveis com Bootstrap: Tutorial para iniciantes

Bootstrap é uma estrutura CSS gratuita e de código aberto direcionada ao desenvolvimento web front-end responsivo e mobile-first. Ele contém modelos de design baseados em CSS e JavaScript para tipografia, formulários, botões, navegação e outros componentes de interface.

Bootstrap foi criado por Mark Otto e Jacob Thornton no Twitter e agora é usado por mais de 12 milhões de sites. Bootstrap é de código aberto e está disponível no GitHub.

Por que todos falam sobre o Bootstrap?

Bootstrap é a estrutura HTML, CSS e JavaScript mais popular para o desenvolvimento de sites responsivos e voltados para dispositivos móveis. O Bootstrap é totalmente gratuito para baixar e usar.

Os desenvolvedores da Web adoram o Bootstrap porque os ajuda a criar sites responsivos de maneira mais rápida e fácil. Bootstrap é uma estrutura front-end que inclui componentes CSS e JavaScript pré-construídos que são fáceis de usar e personalizar.

Bootstrap é fácil de usar. Você só precisa incluir os arquivos Bootstrap CSS e JS em seu código HTML. Bootstrap também está disponível como arquivos Sass e Less.

Como instalar o Bootstrap em um projeto

Para instalar o Bootstrap de forma rápida, você pode instalar via package manager ou via CDN, vou explicar melhor como realizar e o que é cada um destes a seguir:

Instalação via Package Manager

Instalando o Bootstrap via Package Manager CLI

Um package manager (gerenciador de pacotes) é uma ferramenta usada para automatizar a instalação, atualização, configuração e remoção de software. Em particular, ele gerencia bibliotecas de código de terceiros e suas dependências, permitindo que desenvolvedores integrem facilmente funcionalidades adicionais em seus projetos sem ter que reinventar a roda. Os package managers são amplamente utilizados em diversos ecossistemas de desenvolvimento de software.

Para instalar é muito fácil, abra seu CLI e caso já tenha o node instalado em seu computador digite:

npm install bootstrap@5.3.3

ou caso tenha o ruby:

gem install bootstrap -v 5.3.3

As vantagens deste tipo de instalação no seu projeto são:

  • Facilita a instalação e atualização de bibliotecas.
  • Gerencia as dependências automaticamente.
  • Mantém o projeto organizado e atualizado com as versões mais recentes dos pacotes.

Instalação via CDN

Instalando Bootstrap via CDN

Uma Content Delivery Network (CDN) é uma rede de servidores distribuídos geograficamente que trabalham juntos para entregar conteúdo da web de forma rápida e eficiente. As CDNs armazenam cópias em cache do conteúdo estático do site, como imagens, vídeos, scripts e estilos, em vários pontos ao redor do mundo. Quando um usuário acessa um site, a CDN entrega o conteúdo a partir do servidor mais próximo do usuário, reduzindo a latência e melhorando a velocidade de carregamento do site.

Para instalar via CDN, só é necessário colar os seguintes códigos dentro da tag <head> do seu código:

<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js”></script>

A vantagem da instalação via CND é:

  • Reduz a latência e melhora o tempo de carregamento do site.
  • Aumenta a disponibilidade e a redundância do conteúdo.
  • Melhora a experiência do usuário, especialmente em locais distantes do servidor de origem.

Grid responsiva com Bootstrap

Bootstrap também oferece a capacidade de criar designs responsivos facilmente. O design responsivo é um método de desenvolvimento web que faz com que suas páginas tenham uma boa aparência em todos os dispositivos (desktops, laptops, tablets e telefones).

O sistema de grade responsivo do Bootstrap é baseado em uma grade de 12 colunas, com medianiz de 30px (15px em cada lado de uma coluna).

O sistema de grade Bootstrap é responsivo e as colunas serão reorganizadas dependendo do tamanho da tela:

Em uma tela grande, o layout das colunas será: col-lg-*

Em uma tela média, o layout de colunas será: col-md-*

E em uma tela de celular (pequena) o layout das colunas será: col-sm-*

Em uma tela extra-pequena, o código será: col-xs-*

O * representa o número de colunas de 12 que a coluna deve abranger. Então, por exemplo, se você quiser que uma coluna ocupe 8 colunas em uma tela grande, você usaria: col-lg-8. Se você quiser que a coluna ocupe 4 colunas em uma tela média, você usaria: col-md-4.

Componentes do Bootstrap

Os componentes do Bootstrap podem ser divididos em três categorias: layout, conteúdo e componentes.

Os componentes de layout são responsáveis ​​pela estrutura geral da página web. Eles incluem o sistema de grade, usado para criar layouts responsivos, e o objeto de mídia, usado para criar imagens e vídeos responsivos.

Os componentes de conteúdo são responsáveis ​​pelo conteúdo da página web. Eles incluem a tipografia, que é usada para estilizar o texto, e as tabelas, que são usadas para exibir dados tabulares.

Os componentes são responsáveis ​​pelos elementos interativos da página web. Eles incluem os botões, que são usados ​​para acionar ações, e os modais, que são usados ​​para exibir informações em uma janela pop-up.

Como funcionam os containers no bootstrap?

Os contêineres são os elementos de layout mais básicos do Bootstrap, são necessários para utilizar o sistema de grid padrão do framework. Os contêineres são usados ​​para conter, preencher e (às vezes) centralizar o conteúdo dentro deles. Embora os contêineres possam ser aninhados, a maioria dos layouts não exige um contêiner aninhado.

O Bootstrap contem 3 tipos de container por padrão:

  1. .container, que define uma largura máxima em cada breakpoint responsivo
  2. .container-{breakpoint}, que tem largura: 100% até o breakpoint especificado
  3. .container-fluid, que tem largura: 100% em todos os pontos de interrupção

Como criar um container no Bootstrap?

Para criar um container padrão com esse framework é muito simples, vamos utilizar o exemplo do .container demonstrado acima:

<div class="container">
<!– Conteudo do seu container aqui dentro –>
</div>

Você ainda pode trocar a class para o .container-fluid, que vai fazer com que o container tenha a largura total da pagina, abrangendo toda a largura da janela de visualização.

LEIA TAMBÉM  Tipos de Erro HTTP: Entendendo os Erros 404 e 500

Como criar um Grid com colunas no Bootstrap5?

O sistema de grid usa uma série de containeres, rows e columns, que simplificando são: você precisa de um container, dentro deste container você separa por linhas e dentro das linhas vão as colunas. Esse design é totalmente flexível e podemos ter um exemplo a seguir.

Você pode adicionar o layout de colunas dentro da div de .container que vimos anteriormente, utilizar a div com propriedade .row, que vai criar a linha inicial que irá conter a coluna, uma div com a classe .col. Vamos ao exemplo de código para que você possa visualizar:

<div class=”container text-center”>
<div class=”row”>
<div class=”col”>
<!– Conteudo da coluna aqui –>
</div>
<div class=”col”>
Column
</div>
<div class=”col”>

Column
</div>
</div>
</div>

As colunas irão se ajustar de acordo com o tamanho do container e também de acordo com o número de colunas, fazendo com que todas sempre ocupem proporcionalmente o mesmo espaço, caso queira que uma coluna seja maior que a outra.

Podemos utilizar o calculo de grid que existe (são 12 unidades máximas), onde você pode especificar o tamanho maior de uma coluna pela seguinte propriedade: col-*, onde o asterisco pode representar um numero de 1 a 12, que irá dizer qual o espaço que aquela coluna irá ocupar no espaço do container.

Como eu utilizo o Margin e Padding?

As propriedades margin e padding podem ser adicionadas como um elemento de classe na div, tendo quatro subpropriedades que podem ser especificadas, indicando de qual lado será aplicado o margin ou padding, sendo eles start, end, top ou bottom com numeração de 1 a 6. Para adicionar essas propriedades você pode adicionar a classe .m ou .p que indicam margin ou padding respectivamente, com isso ao adicionar .ms-* será indicado que haverá uma margin do lado esquerdo de até 6 unidades. Podemos observar melhor no exemplo de código a seguir:

<div class=”p-2 ms-1 me-2 mt-1 mb-3″>

<!– Conteudo da div aqui –>

</div>

No código acima, defini um padding geral de 2, uma margin no lado esquerdo de 1, no lado direito de 2, no topo de 1 e na parte inferiro de 3.

Código completo de um site de exemplo em bootstrap

A seguir irei demonstrar um exemplo completo de site que utilizei bootstrap em HTML simples, gerando uma navbar, sidebar e demais componentes que você pode verificar com mais detalhes na documentação do site oficial do bootstrap:

<!DOCTYPE html>

<html lang=”pt-br”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Teste Bootstrap – exemplo de página</title>

    <!– Bootstrap códigos: Start –>

    <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>

    <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js”></script>

    <!– Bootstrap códigos: End –>

</head>

<body>

    <div class=”container-flex”>

        <!– navbar: start –>

        <nav class=”navbar navbar-expand-lg bg-body-tertiary”>

            <div class=”container”>

                <a class=”navbar-brand” href=”#”>

                    <img width=”35″ src=”https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png”

                        alt=”Tutorial Bootstrap”>

                    Navbar de teste

                </a>

                <button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse”

                    data-bs-target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent”

                    aria-expanded=”false” aria-label=”Toggle navigation”>

                    <span class=”navbar-toggler-icon”></span>

                </button>

                <div class=”collapse navbar-collapse” id=”navbarSupportedContent”>

                    <ul class=”navbar-nav me-auto mb-2 mb-lg-0″>

                        <li class=”nav-item”>

                            <a class=”nav-link active” aria-current=”page” href=”#”>Home</a>

                        </li>

                        <li class=”nav-item”>

                            <a class=”nav-link” href=”#”>Link</a>

                        </li>

                        <li class=”nav-item dropdown”>

                            <a class=”nav-link dropdown-toggle” href=”#” role=”button” data-bs-toggle=”dropdown”

                                aria-expanded=”false”>

                                Dropdown

                            </a>

                            <ul class=”dropdown-menu”>

                                <li><a class=”dropdown-item” href=”#”>Link 1</a></li>

                                <li><a class=”dropdown-item” href=”#”>Outro Link</a></li>

                                <li>

                                    <hr class=”dropdown-divider”>

                                </li>

                                <li><a class=”dropdown-item” href=”#”>Link após divisor</a></li>

                            </ul>

                        </li>

                        <li class=”nav-item”>

                            <a class=”nav-link disabled” aria-disabled=”true”>Link Desabilitado</a>

                        </li>

                    </ul>

                    <form class=”d-flex” role=”search”>

                        <input class=”form-control me-2″ type=”search” placeholder=”Pesquisa…” aria-label=”Search”>

                        <button class=”btn btn-outline-primary” type=”submit”>Pesquisar</button>

                    </form>

                </div>

            </div>

        </nav>

        <!– navbar: end –>

        <div class=”container mt-2″>

            <div class=”row”>

                <!– coluna principal: start –>

                <div class=”col-lg-8 col-md-8 col-sm-12″>

                    <h1>Hello World!</h1>

                      <!– slider: start –>

                    <div id=”carouselExampleCaptions” class=”carousel slide”>

                        <div class=”carousel-indicators”>

                          <button type=”button” data-bs-target=”#carouselExampleCaptions” data-bs-slide-to=”0″ class=”active” aria-current=”true” aria-label=”Slide 1″></button>

                          <button type=”button” data-bs-target=”#carouselExampleCaptions” data-bs-slide-to=”1″ aria-label=”Slide 2″></button>

                          <button type=”button” data-bs-target=”#carouselExampleCaptions” data-bs-slide-to=”2″ aria-label=”Slide 3″></button>

                        </div>

                        <div class=”carousel-inner”>

                          <div class=”carousel-item active”>

                            <img src=”https://img.freepik.com/fotos-gratis/vista-incrivel-de-uma-falesia-verde-perto-do-mar-no-arquipelago-dos-acores-portugal_181624-48407.jpg?w=1380&t=st=1722793038~exp=1722793638~hmac=e05ceb856e2cbf9be5de998bdeb11872aeba52023132146b1b22a7309593dc0b” class=”d-block w-100″ alt=”…”>

                            <div class=”carousel-caption d-none d-md-block”>

                              <h5>Primeiro label de slide</h5>

                              <p>Some representative placeholder content for the first slide.</p>

                            </div>

                          </div>

                          <div class=”carousel-item”>

                            <img src=”https://img.freepik.com/fotos-gratis/bela-foto-aerea-de-uma-praia-com-colinas-ao-fundo-ao-por-do-sol_181624-24143.jpg?w=1380&t=st=1722793054~exp=1722793654~hmac=7f8d77a4d7e35372bb6e88c9115519fc1430e268d6685bbf55f3ed8a769f8230″ class=”d-block w-100″ alt=”…”>

                            <div class=”carousel-caption d-none d-md-block”>

                              <h5>Segundo label de slide</h5>

                              <p>Some representative placeholder content for the second slide.</p>

                            </div>

                          </div>

                          <div class=”carousel-item”>

                            <img src=”https://img.freepik.com/fotos-gratis/caminho-no-meio-de-edificios-sob-um-ceu-escuro-no-japao_181624-43078.jpg?w=1380&t=st=1722793072~exp=1722793672~hmac=a84b7f162777b70023d8ca6bed7efbb8f9f5e4fc7f3e871c3a37c2eeaea3705e” class=”d-block w-100″ alt=”…”>

                            <div class=”carousel-caption d-none d-md-block”>

                              <h5>Terceiro titulo do slide</h5>

                              <p>Some representative placeholder content for the third slide.</p>

                            </div>

                          </div>

                        </div>

                        <button class=”carousel-control-prev” type=”button” data-bs-target=”#carouselExampleCaptions” data-bs-slide=”prev”>

                          <span class=”carousel-control-prev-icon” aria-hidden=”true”></span>

                          <span class=”visually-hidden”>Previous</span>

                        </button>

                        <button class=”carousel-control-next” type=”button” data-bs-target=”#carouselExampleCaptions” data-bs-slide=”next”>

                          <span class=”carousel-control-next-icon” aria-hidden=”true”></span>

                          <span class=”visually-hidden”>Next</span>

                        </button>

                      </div>

                      <!– slider: end –>

                      <div class=”card”>

                        <img src=”https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png” class=”card-img-top” alt=”…”>

                        <div class=”card-body”>

                            <!– titulo do post: start –>

                            <a href=”#” class=”link-offset-2 link-underline link-underline-opacity-0″>

                                <h5 class=”card-title”>Titulo do post</h5>

                            </a>

                            <!– titulo do post: end –>

                            <!– descrição do post: start –>

                            <p class=”text-secondary”>

                                teste de post…

                            </p>

                            <!– descrição do post: end –>

                            <!– modal: start –>

                            <div class=”m-3 text-end”>

                                <button type=”button” class=”btn btn-primary” data-bs-toggle=”modal” data-bs-target=”#exampleModal”>

                                    Leia mais

                                </button>

                            </div>

                            <!– modal: end –>

                        </div>

                      </div>

                </div>

                <!– coluna principal: end –>

                <!– sidebar: start –>

                <div class=”col-lg-4 col-md-4 col-sm-12″>

                    <!– exemplo de card que pode ser um widget: start –>

                    <div class=”card mb-3″>

                        <div class=”card-header”>

                            Primeiro widget

                        </div>

                        <div class=”card-body”>

                            <ul class=”list-group list-group-flush”>

                                <li class=”list-group-item”>Primeiro elemento</li>

                                <li class=”list-group-item”>Outro elemento</li>

                                <li class=”list-group-item”>Elemento de lista</li>

                            </ul>

                        </div>

                    </div>

                    <!– exemplo de card que pode ser um widget: end –>

                    <!– exemplo de card que pode ser um widget: start –>

                    <div class=”card”>

                        <img src=”https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png”

                            class=”card-img-top” alt=”…”>

                        <div class=”card-body”>

                            <h5 class=”card-title”>Titulo do card</h5>

                            <p class=”card-text”>Exemplo de texto do card</p>

                        </div>

                    </div>

                    <!– exemplo de card que pode ser um widget: end –>

                </div>

                <!– sidebar: end –>

            </div>

        </div>

    </div>

    <!– corpo da modal: start –>

<div class=”modal fade” id=”exampleModal” tabindex=”-1″ aria-labelledby=”exampleModalLabel” aria-hidden=”true”>

    <div class=”modal-dialog”>

      <div class=”modal-content”>

        <div class=”modal-header”>

          <h1 class=”modal-title fs-5″ id=”exampleModalLabel”>Titulo do post</h1>

          <button type=”button” class=”btn-close” data-bs-dismiss=”modal” aria-label=”Close”></button>

        </div>

        <div class=”modal-body”>

          <img src=”https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png” alt=””>

          <p>

            Corpo da postagem

          </p>

        </div>

        <div class=”modal-footer”>

          <p>

            Teste de postagem

          </p>

        </div>

      </div>

    </div>

  </div>

    <!– corpo da modal: end –>

</body>

</html>

0 Comments

  1. Pingback: Botão Flutuante do WhatsApp no seu Site: Tutorial Completo HTML/CSS Código Grátis! - Tecnologia - Tech Invest Financial

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

plugins premium WordPress