Tutorial do Bootstrap

O Twitter Bootstrap é a estrutura de front-end mais popular nos últimos tempos. É a primeira estrutura de front-end móvel elegante, intuitiva e poderosa para desenvolvimento da Web mais rápido e fácil. Ele usa HTML, CSS e Javascript. Este tutorial ensinará os conceitos básicos do Bootstrap Framework, com os quais você pode criar projetos da Web com facilidade. O tutorial está dividido em seções como Estrutura Básica do Bootstrap, CSS do Bootstrap, Componentes de Layout do Bootstrap e Plug-ins de Bootstrap. Cada uma dessas seções contém tópicos relacionados com exemplos simples e úteis.

Por que aprender Bootstrap?

  • Primeira abordagem móvel - O Bootstrap 3, framework consiste nos primeiros estilos móveis em toda a biblioteca, em vez de em arquivos separados.

  • Suporte ao navegador - é suportado por todos os navegadores populares.

Navegador Popular
  • Fácil de começar - Com apenas o conhecimento de HTML e CSS, qualquer pessoa pode começar a usar o Bootstrap. Além disso, o site oficial do Bootstrap possui uma boa documentação.

  • Design responsivo - o CSS responsivo do Bootstrap se ajusta a desktops, tablets e celulares. Mais sobre o design responsivo está no capítulo Bootstrap Responsive Design.

Design Responsivo
  • Fornece uma solução limpa e uniforme para a construção de uma interface para desenvolvedores.

  • Ele contém componentes internos bonitos e funcionais, fáceis de personalizar.

  • Ele também fornece personalização baseada na web.

  • E o melhor de tudo é que é um código aberto.

Olá Mundo usando o Bootstrap.

Apenas para lhe dar uma pequena empolgação com o Bootstrap, vou dar a você um pequeno programa convencional do Bootstrap Hello World. Você pode experimentá-lo usando o link Demo.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Aplicações do Bootstrap

  • Andaimes - O Bootstrap fornece uma estrutura básica com Grid System, estilos de link e plano de fundo. Isso é abordado em detalhes na seção Estrutura básica do Bootstrap

  • CSS - O Bootstrap vem com o recurso de configurações globais de CSS, elementos HTML fundamentais estilizados e aprimorados com classes extensíveis e um sistema de grade avançado. Isso é abordado em detalhes na seção Bootstrap with CSS .

  • Componentes - O Bootstrap contém mais de uma dúzia de componentes reutilizáveis criados para fornecer iconografia, menus suspensos, navegação, alertas, pop-ups e muito mais. Isso é abordado em detalhes na seção Componentes de layout .

  • Plug - ins JavaScript - O Bootstrap contém mais de uma dezena de plugins jQuery personalizados. Você pode facilmente incluir todos eles, ou um por um. Isso é abordado em detalhes na seção Bootstrap Plugins .

  • Personalizar - Você pode personalizar os componentes do Bootstrap, as variáveis LESS e os plugins jQuery para obter sua própria versão.

Público

Este tutorial foi preparado para qualquer pessoa que tenha um conhecimento básico de HTML e CSS e que deseje desenvolver sites. Depois de concluir este tutorial, você se encontrará com um nível moderado de experiência no desenvolvimento de projetos da Web usando o Twitter Bootstrap.

Pré-requisitos

Antes de começar a prosseguir com este tutorial, presumimos que você já esteja ciente dos conceitos básicos de HTML e CSS. Se você não conhece bem esses conceitos, sugerimos que você siga nosso breve tutorial sobre Tutorial em HTML e Tutorial em CSS.