https://github.com/vilhalva/carousel-em-bootstrap
🌹UTILIZANDO O FRAMEWORK BOOTSTRAP PARA EXIBIR IMAGENS EM CARROSSEL.
https://github.com/vilhalva/carousel-em-bootstrap
bootstrap cdn curse framework html projeto site
Last synced: 3 months ago
JSON representation
🌹UTILIZANDO O FRAMEWORK BOOTSTRAP PARA EXIBIR IMAGENS EM CARROSSEL.
- Host: GitHub
- URL: https://github.com/vilhalva/carousel-em-bootstrap
- Owner: VILHALVA
- Created: 2023-12-21T17:09:11.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-06T16:21:38.000Z (almost 2 years ago)
- Last Synced: 2024-12-29T18:43:56.152Z (over 1 year ago)
- Topics: bootstrap, cdn, curse, framework, html, projeto, site
- Language: HTML
- Homepage:
- Size: 2.44 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CAROUSEL EM BOOTSTRAP
🌹UTILIZANDO O FRAMEWORK BOOTSTRAP PARA EXIBIR IMAGENS EM CARROSSEL.
## DESCRIÇÃO:
Este código HTML faz parte de uma página web que utiliza o framework Bootstrap para criar um componente de carrossel (carousel). Vamos analisar cada parte do código:
1. **Meta tags e Título:**
- Inclui as meta tags para o conjunto de caracteres e visualização responsiva.
- Define o título da página como "CFB Cursos - Curso de Bootstrap".
2. **Vinculação de Estilos e Scripts:**
- Vincula o arquivo CSS do Bootstrap e adiciona alguns estilos customizados dentro da tag ``.
- Vincula o arquivo JavaScript do Bootstrap, que é necessário para o funcionamento de certos componentes, como o carrossel.
3. **Elementos HTML:**
- `<h1>` e `<h3>`: Títulos para a página e uma breve descrição do que é um carrossel Bootstrap.
- `<div id="banner" class="carousel slide" data-bs-ride="carousel">`: A div principal que contém o carrossel. `data-bs-ride="carousel"` indica que este é um carrossel e pode ser automaticamente percorrido.
- `<div id="indicadores" class="carousel-indicators">`: Botões indicadores para cada slide do carrossel.
- `<div id="imagens" class="carousel-inner">`: Contém os itens (imagens) a serem exibidos no carrossel.
- `<button type="button" class="carousel-control-prev" data-bs-target="#banner" data-bs-slide="prev">` e `<button type="button" class="carousel-control-next" data-bs-target="#banner" data-bs-slide="next">`: Botões de controle para navegar pelos slides.
4. **Slides do Carrossel:**
- Cada `<div class="carousel-item">` representa um slide do carrossel e contém uma imagem correspondente.
5. **Estilos CSS Customizados:**
- Algumas regras de estilo adicionais são fornecidas diretamente no arquivo HTML usando a tag `<style>`. Isso inclui margens para os títulos, uma cor de fundo para o segundo título (`<h3>`), e uma altura fixa para as imagens.
6. **Scripts JavaScript Bootstrap:**
- Vincula o arquivo JavaScript do Bootstrap, que é essencial para o funcionamento de componentes interativos, como o carrossel.
O carrossel exibirá as imagens (`b1.jpg`, `b2.jpg`, etc.) em sequência, com botões de controle e indicadores para navegação. O Bootstrap simplifica a criação de componentes responsivos e interativos, facilitando o desenvolvimento de páginas web modernas.
## NÃO SABE?
- Entendemos que para manipular arquivos em `HTML`, `CSS` e outras linguagens relacionadas, é necessário possuir conhecimento nessas áreas. Para auxiliar nesse aprendizado, oferecemos cursos gratuitos disponíveis:
* [CURSO DE HTML E CSS](https://github.com/VILHALVA/CURSO-DE-HTML-E-CSS)
* [CURSO DE JAVASCRIPT](https://github.com/VILHALVA/CURSO-DE-JAVASCRIPT)
* [CURSO DE BOOTSTRAP](https://github.com/VILHALVA/CURSO-DE-BOOTSTRAP)
* [CONFIRA MAIS CURSOS](https://github.com/VILHALVA?tab=repositories&q=+topic:CURSO)
## CREDITOS:
- [PROJETO FEITO PELO VILHALVA](https://github.com/VILHALVA)
- [PROJETO FEITO PARA O CURSO DE BOOTSTRAP](https://github.com/VILHALVA/CURSO-DE-BOOTSTRAP)
- [ESTÁ DISPONIVEL NO SITE](https://vilhalva.github.io/STYLER/STYLER.html)