Skip to content

Online T5 | Front-end | 2020 | Semana 3 | Bootstrap

Notifications You must be signed in to change notification settings

vaosorio/On5-bootstrap

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 

Repository files navigation

O que é um framework?

É uma estrutura base, uma plataforma de desenvolvimento ele contém ferramentas, guias, sistemas e componentes que agilizam o processo de desenvolvimento de soluções. Basicamente, é um template com diversas funções que podem ser usadas pelo desenvolvedor. Com ele, é desnecessário gastar tempo para reproduzir a mesma função em diferentes projetos, auxiliando em um gerenciamento ágil de projetos.

Assim um Framework tem como principal objetivo resolver problemas recorrentes com uma abordagem genérica, permitindo ao desenvolvedor focar seus esforços na resolução do problema em si, e não ficar reescrevendo software.

O que é Bootstrap?

É um dos frameworks front-end mais conhecidos do mundo, especialmente utilizado para criar sites responsivos e mobile. Desenvolvido por Mark Otto e Jacob Thornton no Twitter. Foi lançado como um produto de seu código aberto em agosto de 2011 no GitHub.

Porquê usar?

Com o Bootstrap, o profissional já não tem mais que perder tanto tempo digitando toda uma linha de CSS novamente. Esta facilidade se deve ao fato de que ele possui vários plugins em JavaScript (jQuery) que tornam o seu dia-a-dia muito mais fácil.

Vantagens do Bootstrap

Características que fazem o Bootstrap valer a pena: Biblioteca de componentes Reuso de código Documentação e comunidade Padrão visual Responsividade E muito mais!

Desvantagens

Excesso de padronização

Quem usa Bootstrap hoje?

Pesquisas afirmam que cerca de 7 milhões de sites utilizam o Bootstrap dentre eles: Aiirbnb WalMart Target NBA Globo

Agora mão na massa!

Documentação em Português

Vamos começar com as CDNs, mas o que são as CDNs

As CDN — sigla em inglês para Content Delivery Network ou Rede de Distribuição de Conteúdo (tradução livre) são redes de conteúdo não centralizadas. Ou seja, elas hospedam um determinado conteúdo em servidores espalhados em várias partes, permitindo dessa forma a distribuição de forma eficaz independente de onde o acesso é realizado. Existem várias redes CDN, e qualquer empresa pode contratar o serviço de uma para seu sistema, e essa decisão normalmente é tomada levando em conta vários aspectos como ganhos de performance, segurança e custos. O uso de CDNs pode ser indicado para ambientes de desenvolvimento e páginas estáticas.

Como instalar o Bootstrap via CDN no seu projeto? A instalação por CDN é a maneira mais rápida de instalar o Bootstrap no seu projeto, sem a necessidade de baixar os arquivos e adicioná-los no seu diretório. Copie e cole o arquivo de estilo abaixo, dentro da sua antes de todos os outros arquivos de estilo para carregar o CSS.

Colar no head

Colar no script no final do body

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Esse sera o nosso projeto:

Vamos aprender a usar: NavBar Carrossel cards menu modal form

Prontas para o exercício?

Exercícios

Landpage responsiva

Tema

Use sua criatividade, você pode abordar o assunto que quiser!

Requisitos:

1 - Sua landpage deverá ter os itens que aprendemos na aula:

  • NavBar, Carrossel, Menu, Card, Modal, Form

2 - Usar uma fonte do goolgle fontes ou equivalente: Google Fontes

3 - Usar icones de redes sociais iimportados do Fontaweesome: Fontaweesome Lembre-se de sempre consultar a docummentação do Bootstrap.

Links para apoio:

Grid FlexBox

About

Online T5 | Front-end | 2020 | Semana 3 | Bootstrap

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 72.9%
  • HTML 27.1%