Tutorial de bootstrap

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

Por que aprender bootstrap?

  • Mobile first approach - Bootstrap 3, framework consiste em primeiros estilos móveis em toda a biblioteca, em vez de em arquivos separados.

  • Browser Support - É compatível com todos os navegadores populares.

  • Easy to get started- 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.

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

  • Fornece uma solução limpa e uniforme para construir uma interface para desenvolvedores.

  • Ele contém componentes embutidos bonitos e funcionais que são fáceis de personalizar.

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

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

Hello World usando Bootstrap.

Apenas para deixá-lo um pouco entusiasmado com o Bootstrap, vou apresentar um pequeno programa Bootstrap Hello World convencional. 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 de Bootstrap

  • Scaffolding- Bootstrap fornece uma estrutura básica com Sistema de grade, estilos de link e plano de fundo. Isso é abordado em detalhes na seçãoBootstrap Basic Structure

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

  • Components- Bootstrap contém mais de uma dúzia de componentes reutilizáveis ​​construídos para fornecer iconografia, menus suspensos, navegação, alertas, pop-overs e muito mais. Isso é abordado em detalhes na seçãoLayout Components.

  • JavaScript Plugins- Bootstrap contém mais de uma dúzia de plug-ins jQuery personalizados. Você pode incluir todos eles facilmente ou um por um. Isso é abordado em detalhes na seçãoBootstrap Plugins.

  • Customize - Você pode personalizar os componentes do Bootstrap, variáveis ​​LESS e plug-ins 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 queira desenvolver sites. Depois de concluir este tutorial, você se encontrará com um nível moderado de especialização no desenvolvimento de projetos da web usando o Twitter Bootstrap.

Pré-requisitos

Antes de prosseguir com este tutorial, presumimos que você já conheça os fundamentos de HTML e CSS. Se você não conhece bem esses conceitos, sugerimos que consulte nosso breve tutorial sobre HTML Tutorial e CSS Tutorial.