Bootstrap Code Play

Aprenda design responsivo para web com lições do Bootstrap que você pode editar e visualizar. O Bootstrap Code Play conecta explicações, exemplos de código e um ambiente de testes para que você possa explorar como uma alteração na marcação afeta uma página.

LEIA, ALTERE, VISUALIZE

Escolha um tópico, leia como ele funciona e toque em "Experimentar" para abrir o exemplo no editor. Altere uma classe, ajuste o conteúdo ou adicione um elemento. Abra a Visualização para inspecionar o resultado e retorne ao Código para outro experimento.

APRENDA OS FUNDAMENTOS

Pratique grids responsivos, tipografia, botões, alertas, tabelas e formulários. Explore componentes como cards, barras de navegação, acordeões e diálogos nas trilhas de aprendizado relevantes. As lições guiadas incluem etapas, desafios e erros comuns para ajudar você a entender o código em vez de apenas copiá-lo. As lições de projeto reúnem conceitos em exemplos como uma seção de preços e um painel compacto.

ESCOLHA UMA TRILHA DE APRENDIZADO

Estude a trilha Bootstrap 5.3.8 incluída ou explore o Bootstrap 4.6.2 e 3.4.1 para projetos mais antigos. As trilhas mais antigas estão em fim de vida útil e são fornecidas para aprendizado e migração. Uma trilha separada do Bootstrap 6 alpha é experimental; sua pré-visualização requer acesso à internet e um WebView moderno.

CONTINUE PRATICANDO

Pesquise tópicos ou navegue por categoria. Marque as lições como concluídas e veja sua contagem de conclusão para cada versão. Abra o playground para seus próprios experimentos de HTML, salve um arquivo e retorne a ele por meio de Arquivos Salvos.

EDITE COM FERRAMENTAS ÚTEIS

Use o realce de sintaxe, desfazer e refazer, localizar e substituir e ir para a linha enquanto trabalha nos exemplos. Salvar como mantém uma cópia separada e Compartilhar código envia o texto do editor por meio das opções de compartilhamento disponíveis.

Para estudantes, aprendizes autodidatas e desenvolvedores que revisitam layouts responsivos, o aplicativo oferece um ciclo prático: leia uma explicação, faça uma pequena alteração e inspecione a saída.

O aplicativo inclui anúncios. Os exemplos que fazem referência a recursos externos exigem uma conexão com a internet; a disponibilidade de recursos remotos pode variar.