Tutorial Bootstrap: primeiros passos com o framework do Twitter

0

computer-475555_960_720

Bootstrap é uma estrutura que permite aos desenvolvedores web criar páginas web para todos os tipos de dispositivos. Para este fim, o projeto de código aberto fornece modelos de desenho baseadas em HTML e CSS, bem como extensões adicionais para JavaScript. Inicialmente, Twitter Bootstrap tinha sido planejado como uma ferramenta interna da empresa para a homogeneização do design. No entanto, em 2011, o framework foi publicado na plataforma de desenvolvimento de software colaborativo GitHub, onde, em um período muito curto de tempo e com dezenas de desenvolvimentos subsequentes, tornou-se um de seus projetos mais populares.

Por que é que o Bootstrap é tão interessante para os desenvolvedores?

Com a implementação de modelos predefinidos em HTML e CSS, os desenvolvedores web não precisam desenvolver uma boa ideia para um site a partir do zero. Sua estrutura modular permite uma fácil integração em qualquer documento HTML. Com isso, muitas das configurações CSS tediosas são eliminadas, economizando um monte de tempo e esforço. Isto inclui, entre outros, os seguintes elementos:

  • Botões
  • Elementos de navegação
  • Miniatura
  • Menus drop-down
  • Avisos
  • História
  • Adicionar vídeos Responsive

computer-1446111_960_720

Outro aspecto importante é a grelha ou grade Bootstrap, na qual o layout de uma página web é construído. Este sistema facilita a definição de margens e posicionamento dos elementos de uma página web de distribuição em 12 colunas. A organização dos elementos nesta grade pode distinguir entre uma variedade de tamanhos de tela, seja desktop, smartphone, tablet ou laptop. Em qualquer caso, o Bootstrap garante um web design responsivo.

Opcionalmente, plugins JavaScript baseados no framework jQuery oferecem a possibilidade de integrar a interface do usuário elementos do projecto tão úteis como dicas para usar as caixas de ferramentas ou caixa de diálogo, bem como estender a funcionalidade de outros elementos já integrados, tais como por exemplo, o preenchimento automático de campos de pesquisa. Para usar Bootstrap com elementos de JavaScript, só é necessário incluir a biblioteca jQuery no documento HTML.

 

Primeiros passos: Baixe e instale Bootstrap

O Twitter Bootstrap foi lançado como software de download é livre e o uso não têm nenhum custo. Esses desenvolvedores web mais experientes também beneficiam do estatuto de open source Bootstrap, pois eles podem adaptar e modificar a estrutura de acordo com as suas necessidades. No guia seguinte apresentamos o uso de modelos nas medidas de JavaScript e CSS Bootstrap.

  1. Visite o site oficial do Bootstrap e baixe o pacote de “Bootstrap”, que contém os arquivos CSS e JavaScript (na versão compilada e reduzida), bem como as fontes ea disciplina opcional.

 

  1. Descompacte o arquivo e copie o arquivo “Bootstrap” no diretório desejado.

 

  1. Você vai ter a pasta “CSS”, “fontes” e “js”. A pasta “fontes” contém mais de 250 ícones em forma de fonte Glyphicons Halflings, que não tem custo para os usuários de Bootstrap. Os arquivos da pasta “CSS” e “js” contêm:

 

ou bootstrap.css: código CSS em formato legível

ou bootstrap.min.css: código CSS reduzida. conteúdo irrelevante foi removido (como espaços) para facilidade de interpretação

ou bootstrap.css.map: fonte CSS contém mapas que facilitam a busca de formato de dados originais MENOS

ou de bootstrap-theme.css: arquivos CSS de temas pré-definidos

ou de bootstrap-theme.min.css: Problemas com o código reduzidos

ou de bootstrap-theme.css.map: fonte mapeia temas

ou bootstrap.js: código de JavaScript em formato legível

ou bootstrap.min.js: código JavaScript reduzida

 

  1. Se você deseja usar elementos de JavaScript, você também poderá baixar as funções extensa biblioteca jQuery JavaScript jQuery.com.

 

  1. Depois de ter baixado e identificados todos os componentes, você pode começar a trabalhar com o framework.

 

  1. Abra o seu editor de código favorito, como o Notepad ++, e cole o seguinte código:

 

<! DOCTYPE html>

<Html>

<Head>

<Charset Meta = “utf-8”>

<Meta name = “viewport” content = “width = device-width, initial-scale = 1”>

</ Head>

<Body>

<H1> Olá, este é o meu primeiro modelo Bootstrap! </ H1>

</ Body>

</ Html>

 

A meta tag “janela” dentro da “cabeça” garante uma visualização adequada em dispositivos móveis.

 

  1. Guardar o projecto como “basic.html” no ambiente de trabalho.

 

  1. Para criar um modelo a partir deste documento Bootstrap HTML, você precisa implementar arquivos CSS e JavaScript no documento. Isso é feito especificando o diretório onde as pastas. É aconselhável adicionar JavaScript no final do documento, caso contrário você pode ser alongando o tempo de carregamento da sua página web.

 

Espero que tenha gostado das dicas e tenha entendido como dar os primeiros passos com o framework do Twitter.

 

 

 

Deixe uma resposta