Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Prévia do material em texto
<p>1</p><p>Bootstrap Framework</p><p>Prof. Rommel Carneiro</p><p>https://www.linkedin.com/in/rommelcarneiro/</p><p>https://twitter.com/rommelcarneiro</p><p>http://rommelcarneiro.me/</p><p>2</p><p>Bootstrap</p><p>Framework gratuito e de código aberto para o desenvolvimento de</p><p>aplicações web responsivas com foco no cliente (front-end)</p><p>• Inclui modelos de design em HTML e CSS para tipografia, formas, botões, tabelas, navegação,</p><p>modais, carrosséis de imagem e muitos outros, bem como plugins JavaScript opcionais</p><p>• Foi desenvolvido por Mark Otto e Jacob Thornton no Twitter, e lançado como um produto de</p><p>código fonte aberto em 2011 no GitHub</p><p>• Em junho 2014, o Bootstrap foi escolhido o projeto No.1 no GitHub!</p><p>https://getbootstrap.com/</p><p>3</p><p>Bootstrap</p><p>Um design responsivo é aquele que se ajusta aos dispositivos automaticamente,</p><p>desde smartphones, tablets até chegar em grandes telas de desktops.</p><p>4</p><p>Bootstrap – Instalação</p><p>Compiled CSS and JS</p><p>• Pacote pronto para utilização</p><p>• Arquivos CSS e JavaScript já empacotados</p><p>• Não inclui documentação, arquivos fontes</p><p>e dependências</p><p>Código Fonte</p><p>• Arquivos fontes para serem customizados</p><p>• Requer ferramentas para compilação</p><p>• inclui os fontes do Bootstrap, a</p><p>documentação e exemplos</p><p>Site oficial: http://getbootstrap.com/</p><p>http://getbootstrap.com/</p><p>5</p><p>Bootstrap – Instalação</p><p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p><meta charset="UTF-8"></p><p><meta http-equiv="X-UA-Compatible" content="IE=edge"></p><p><meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p><title>Exemplo Bootstrap</title></p><p><!-- CSS do Bootstrap --></p><p><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"</p><p>rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"</p><p>crossorigin="anonymous"></p><p></head></p><p><body></p><p><p>Hello, Bootstrap</p></p><p><!-- Javascript do Bootstrap --></p><p><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"</p><p>integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"</p><p>crossorigin="anonymous"></script></p><p></body></p><p></html></p><p>6</p><p>Bootstrap – Sistema de Grid</p><p>Para estruturar layout de sites, o Bootstrap divide a tela em 12 colunas</p><p>1) Colunas (.col) vêm dentro de linhas (.row)</p><p>2) Linhas (.row) vêm em containers (.container)</p><p>3) Containers têm largura fixa (.container) ou fluida (.container-fluid)</p><p><div class="container"></p><p><div class="row"></p><p><div class="col-md-6">.col-md-6</div></p><p><div class="col-md-6">.col-md-6</div></p><p></div></p><p></div></p><p>container row col</p><p>7</p><p>Bootstrap – Sistema de Grid</p><p>Breakpoints</p><p>Pontos de ajuste do layout com base em</p><p>cada tamanho de tela.</p><p>8</p><p>Bootstrap – Sistema de Grid</p><p>Combinação de classes</p><p>• É possível combinar classes para comportamentos diferenciados por dispositivos</p><p>• No exemplo, 4 colunas em desktops (md) as colunas têm tamanho 3, em telas pequenas (tablets</p><p>- sm), as colunas têm tamanho 6.</p><p>• Com isso, teremos 2 colunas em telas acima de 768px e 4 colunas em telas acima de 992px.</p><p><div class="container-fluid"></p><p><div class="row"></p><p><div class="col-sm-6 col-md-3"></div></p><p><div class="col-sm-6 col-md-3"></div></p><p><div class="col-sm-6 col-md-3"></div></p><p><div class="col-sm-6 col-md-3"></div></p><p></div></p><p></div></p><p>Fonte: Compreendendo o Sistema de Grid do Bootstrap</p><p>https://edsonjunior.com/compreendendo-grid-do-bootstrap/</p><p>9</p><p>Exercício</p><p>A partir da estrutura deste site, monte o layout com o sistema de grids do Bootstrap.</p><p>11</p><p>Obrigado!</p><p>Bootstrap Framework</p><p>Bootstrap</p><p>Bootstrap</p><p>Bootstrap – Instalação</p><p>Bootstrap – Instalação</p><p>Bootstrap – Sistema de Grid</p><p>Bootstrap – Sistema de Grid</p><p>Bootstrap – Sistema de Grid</p><p>Exercício</p><p>Obrigado!</p>
Mais conteúdos dessa disciplina
Colonialismo de Dados na Ciência uma nova forma de dominação epistêmica | SciELO em Perspectiva- Formatações adicionais em HTML - Curso em Vídeo HTML5 e CSS3 - Resumo
- Teste 2 Linguagem de programação C
- AVA UNINOVE
- revisao - LINGUAGEM DE PROGRAMAÇÃO E FERRAMENTAS COMPUTACIONAIS
- T05 2025-1 (3)
- Curso de Java 01 - História do Java - Gustavo Guanabara - Resumo
- Checklist - Regularização PMPT
- Questões de Português e Inglês
- Ler em voz alta Leia 0 fragmento de texto a seguir: Pesquisar por imagem Um viveiro florestal produz mudas de eucalipto utilizando sistema de tubetes
- Qual é a principal característica dos dispositivos móveis? Escolha uma opção: a. Mobilidade b. Conectividade c. Portabilidade d. Funcionalidade
- Observe o código abaixo: Qual é o tipo de dado da variável peso_novo na linha 5? Escolha uma opção: a. char b. float c. string d. double
- Uma empresa de logística está avaliando a relação entre o número de entregas realizadas e o custo total mensal de operação. Após coletar dados de s...
- No Android Studio, qual é a função principal da pasta "drawable"? Escolha uma opção: a. Armazenar as configurações do Sistema Operacional. b. Armazena
- Qual é a função principal do recurso "Infer Constraints" no Android Studio? Escolha uma opção: a. Criar restrições automáticas de posicionamento para
- Xiaomi Redmi Note 15 Pro+ Novo Smartphone, 12GB+256GB de Memória, Chip Snapdragon® 7s Gen 4, Bateria Grande de 7000mAh + Carregamento Reverso de 22,5W
- Sobre os autos de Tribunal de Honra, analise as proposições a seguir e indique o somatório das verdadeiras: (1) os autos são organizados em volume...
- Segundo Correia (2008), o Modelo de Atendimento à Diversidade (MAD) apresenta uma intervenção por meio de fases, com quatro componentes essenciais e i
- Uma determinada madeira apresenta fc0.k 25MPa. Sendo, determine a menor área útil que uma barra de treliça deve ter para suportar uma força de comp...
- 5) Em situações de emergência, 0 tempo de resposta é crucial. A cadeia de sobrevivência estabelece uma sequência de ações interligadas que, quando ...
- O Alfabeto Manual é: Questão 7Resposta a. Um tipo de expressão corporal. b. Um código de representação de letras alfabéticas. c. Uma língua completa.
- Apesar de algumas diferenciações é possível dizer que a metodologia de Carmen Maria Mettig Rocha e Jurity de Souza estão em consonância em alguns a...
- Wireshark TCP
- Administração de Sistemas de Informação 10a Semana José Henrique Garcia da Silva