Já se decidiu pelo Bootstrap?

Mais um texto sobre a série Bootstra! E para começar, que tal refrescar a memória? Lembremos: o Bootstrap é uma plataforma gratuita que oferece uma vasta rede de ferramentas e conteúdos. Além de tudo, os usuários do framework também podem carregar códigos CSS, JavaScript e imagens remotamente, a partir de seus servidores.

E por último, mas não menos importante, o Bootstrap utiliza a rede mundial de entregas de conteúdo MaxCDN’s, que permite um serviço bem confiável e robusto com uma boa qualidade, mesmo com eventos de pico de tráfego na internet.

Quero usar o bootstrap: Por onde começar ??

Uma pergunta muito boa e super relevante para começar a colocar a mão na massa, então vamos lá.

Para o ponta pé inicial, podemos utilizar uma forma rápida e simples para adicionar o Bootstrap ao seu projeto. Utilize o BootstrapCDN para a entrega de uma versão já compilada com CSS e JavaScript, disponibilizado gratuitamente pela galera do StackPath.

Se estiver utilizando um pacote assistente ou precisar de baixar códigos fonte, é só acessar esse link .

Utilizando o CSS

Depois do passo anterior podemos iniciar com um pouco de código. Copie e cole o stylesheet em seuantes de qualquer outro para carregar o CSS.

 

<link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css”

integrity=”sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB” crossorigin=”anonymous”>

 

Agora passando para o JavaScript

Muitos dos componentes do framework fazem uso de JavaScript para funcionar e especificamente, é utilizado jQuery, Popper.js, e os próprios plugins JavaScript do site. Aqui no blog também temos textos sobre jQuery, dê uma conferida para saber mais!

Coloque o seguinte <script> próximo ao fim das suas páginas, bem antes do fechamento da tag </body>, para habilitá-los.

<script                       src=“https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=“sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=“anonymous”></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js” integrity=“sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49” crossorigin=“anonymous”></script>
<script src=“https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js” integrity=“sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T” crossorigin=“anonymous”></script>

A jQuery deve vir primeiro, depois Popper.js, e por fim os plugins em JavaScript.

 

Template inicial

Tenha certeza de que sua página possui as últimas atualizações de design e padrões de desenvolvimento. Isto significa utilizar um doc do tipo HTML5 e incluir um meta tag viewport para um comportamento responsivo adequado.

Todos os elementos citados anteriormente são o suficiente para os requisitos básicos de uma página nova em Bootstrap.

Você também pode visitar o  layout de alguns docs ou alguns exemplos oficiais para começar a esboçar algumas ideias de conteúdo e componentes do site em potencial, até mesmo para ir se familiarizando ainda mais com o framework.

Browser suportados

 

O Bootstrap suporta a maior parte dos browsers e plataformas  recentes e estáveis disponíveis no mercado.

 

Para celulares:

Android: Chrome, Firefox, Microsoft edge, Android Browser (Android v5.0+)

iOS: Chrome, Firefox, Safari

 

Para desktop:

 

Windows: Chrome, Firefox, Internet explorer (IE10+)

Mac: Chrome e Firefox

 

Algumas funcionalidades que são importantes de se habituar são descritas aqui nessa parte final de forma resumida. Ao terminar de ler o texto, não deixe de conferir os links adicionais indicados na conclusão.

 

  • Doc do tipo HTML5: O Bootstrap requer o uso do tipo HTML5. Sem ele, você iria ver um estilo incompleto e difuso, mas o incluindo essa espécie de bug seria solucionado.

 

 

 

  • Meta tag responsivo:  Atualmente o Bootstrap é desenvolvido com a base mobile first, e isso gera uma escolha de estratégia focada na otimização de código para aparelhos mobile e só depois escalar para componentes de acordo com a necessidade utilizando consultas de mídia em CSS. Para garantir renderização apropriada e zoom ao toque para todos os aparelhos, adicionar o viewport meta tag responsivo ao <head> de seu programa.

 

Box-sizing: Para um dimensionamento mais direto em CSS, foi trocado o valor do box-sizing global de  content-box para border-box. Isso garante que o preenchimento não afete a espessura final computada de um elemento, mas pode causar problemas com alguns softwares de third party como o Google maps e alguma ferramenta do Google Search Engine.

 

  • Reboot: Para melhor renderização do cross-browser, nós utilizamos Reboot para correção de inconsistências nos browsers e dispositivos enquanto é fornecido alguns resets mais opinativos aos elementos comuns de HTML.

 

 

Estejam atentos!

Fique sempre acompanhando as novidades do Bootstrap, e para continuar os estudos, entre nos links adicionais abaixo:

 

 

 

 

E aí? Curtiu o artigo? Então deixe seu comentário!

This site uses Akismet to reduce spam. Learn how your comment data is processed.