Scribd
Carregar
2 visualizações3 páginas

Tutorial de Busca no Bootstrap

O tutorial ensina como buscar recursos no Bootstrap, começando pelo acesso ao site oficial e à documentação. Ele orienta sobre como navegar pelos tópicos, encontrar exemplos prontos e copiar códigos para uso em projetos, incluindo componentes como Navbar, Cards, Forms e Modals. Além disso, oferece dicas para garantir o funcionamento adequado do Bootstrap em projetos.

Enviado por

arthurg.desene
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
2 visualizações3 páginas

Tutorial de Busca no Bootstrap

O tutorial ensina como buscar recursos no Bootstrap, começando pelo acesso ao site oficial e à documentação. Ele orienta sobre como navegar pelos tópicos, encontrar exemplos prontos e copiar códigos para uso em projetos, incluindo componentes como Navbar, Cards, Forms e Modals. Além disso, oferece dicas para garantir o funcionamento adequado do Bootstrap em projetos.

Enviado por

arthurg.desene
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

Tutorial — Como buscar recursos no Bootstrap

1. Acessando o site oficial

• Entre no navegador e digite: [Link]

• Essa é a documentação oficial. É nela que vamos encontrar exemplos prontos, explicações e
código para copiar/colar.

2. Conhecendo a página inicial

Ao abrir, você verá:

• Navbar superior com links importantes:

o Docs → documentação completa.

o Examples → exemplos prontos de páginas.

o Icons → ícones do Bootstrap (opcional).

Para aprender, sempre clique em Docs.

3. Como encontrar o que você precisa

Na lateral esquerda, no menu da documentação, estão organizados os tópicos:

a) Get started (Início)

• Clique em Docs → Get started → Introduction.

• Aqui você encontra como adicionar o Bootstrap ao seu projeto:

o Meta viewport (responsividade).

o Link do CSS (CDN).

o Script JavaScript (bundle).

• Esse é o “pacote básico” que todo projeto precisa.

b) Layout → Grid

• Clique em Docs → Layout → Grid.

• Você verá exemplos de como usar linhas (.row) e colunas (.col-, .col-md-, etc.).

• Role a página: vai encontrar exemplos prontos que mostram como as colunas se comportam
em telas diferentes.

• Dica: use o botão "Try it in the playground" para ver o exemplo funcionando.
c) Components → Navbar

• Clique em Docs → Components → Navbar.

• Aqui você encontra vários modelos de navbar (clara, escura, com links, com botão de
pesquisa etc.).

• Escolha um modelo, copie o código e cole no seu projeto.

• Sempre confira se há um data-bs-toggle="collapse" e se o JS do Bootstrap está carregado


(senão o menu mobile não abre).

d) Components → Cards

• Clique em Docs → Components → Cards.

• Você verá exemplos de cards com imagens, textos, botões, listas.

• Copie um modelo e personalize com suas imagens e textos.

e) Forms

• Clique em Docs → Forms → Overview.

• Ali estão todos os tipos de campos: inputs, textarea, selects, checkboxes, radios, etc.

• Role até “Validation” para ver como validar os campos (com mensagens de erro).

f) Components → Modal

• Clique em Docs → Components → Modal.

• Tem exemplos de modais com botão para abrir e fechar.

• Copie o HTML e cole no seu projeto.

• Verifique se o botão tem o atributo data-bs-toggle="modal" e está ligado ao id do modal.

4. Como praticar (exercício de busca)

1. Entre no site Bootstrap → Docs.

2. Encontre Navbar e copie um exemplo simples.

3. Adicione esse código dentro do seu [Link].

4. Agora volte para Components → Cards, copie um card e coloque na sua página.

5. Faça o mesmo com um Form.


6. Por fim, copie um Modal e teste se funciona.

5. Dicas para os alunos

• Sempre observe as classes CSS (.container, .row, .col-md-4, .btn-primary etc.). Elas são o
coração do Bootstrap.

• Leia os comentários dentro do código de exemplo.

• Se algo não funcionar, confira se você incluiu o CSS e o JS do Bootstrap (no “Get started”).

• Use o search (barra de pesquisa) na doc para encontrar componentes rapidamente.

Você também pode gostar