Nessa aula você vai aprender como usar o bootstrap para auxiliar na criação de uma interface funcional e atraente. Considerando as aulas anteriores foi possível perceber que existem muitos recursos que podem ser explorados dentro do Front-end. Esta área é de extrema importância e muitos desenvolvedores se especializam nela para tornar a experiência do usuário mais agradável.
Para agilizar o desenvolvimento de aplicações onde apenas 1 desenvolvedor fica responsável por toda a aplicação, alguns frameworks foram desenvolvidos. Empresas como o Facebook, twitter, google recentemente tem investido na publicação e popularização de ferramentas para desenvolvedores. O Twitter foi responsável pela publicação de uma dessas ferramentas denominada bootstrap, este framework será o assunto dessa aula.
Quer saber mais sobre desenvolvimento web? Veja nosso curso gratuito!
O que é o bootstrap
Bootstrap é um framework web com código-fonte aberto para desenvolvimento de componentes de interface e front-end para sites e aplicações web usando HTML, CSS e JavaScript, baseado em modelos de design para a tipografia, melhorando a experiência do usuário em um site amigável e responsivo. O Bootstrap é um dos projetos mais bem avaliado no site GitHub, com mais de 111 600 estrelas e 51 500 forks.
Um pouco de história
Bootstrap é um projeto de código aberto originalmente desenvolvido para o site Twitter, chamado de Twitter Blueprint, desenvolvido por Mark Otto e Jacó Thornton como um instrumento para incentivar a consistência através de ferramentas internas. Antes de Bootstrap, várias bibliotecas foram utilizados para o desenvolvimento de interfaces, gerando inconsistências e um elevado peso de manutenção.
De acordo com o desenvolvedor Mark Otto: “Um grupo super pequeno de desenvolvedores e eu nos reunimos para projetar e construir uma nova ferramenta interna e vi uma oportunidade de fazer algo mais. Através desse processo, nós nos vimos construindo algo muito mais substancial do que outra ferramenta interna. Meses depois, terminamos com uma versão inicial do Bootstrap como forma de documentar e compartilhar padrões comuns de design e ativos dentro da empresa ” .
Depois de alguns meses de desenvolvimento por um pequeno grupo, muitos desenvolvedores no Twitter começaram a contribuir com o projeto, como parte da Hack Week. Ele foi renomeado como Twitter Blueprint to Bootstrap, e lançado como um projeto de código aberto em 19 de agosto de 2011. Ele continuou a ser mantida por Mark Otto, Jacob Thornton, e um pequeno grupo de desenvolvedores, bem como uma grande comunidade de colaboradores.
Em 31 de janeiro de 2012, o Bootstrap 2 foi lançado, foi responsável por acrescentar o layout grid responsivo de doze colunas, suporte interno para Glyphicons, vários novos componentes, bem como as alterações para muitos dos componentes existentes. Em 19 de agosto de 2013, o Bootstrap 3 foi lançado, responsável por redesenhar componentes para uso flat design, e uma abordagem para dispositivos móveis.
Em 29 de outubro de 2014, Mark Otto anunciou que o Bootstrap 4 estava em desenvolvimento. A primeira versão alpha do Bootstrap 4 foi lançada em 19 de agosto de 2015. A primeira versão beta foi lançada em 10 de agosto de 2017.
Este trecho foi adaptado daqui
Inicializando um projeto com bootstrap
O bootstrap é essencialmente feito em tecnologias para ser executado no navegador. Sendo assim, basta criar uma página html simples, adicionar o bootstrap ao seu cabeçalho e se divertir utilizando seus componentes. Veja um passo a passo:
Passo 01: faça o download do bootstrap
O download é grátis e está presente no site:
Você irá precisar ainda baixar o Jquery:
E uma dependência do bootstrap chamada Popper.js:
Passo 02: configurando a página
Crie uma página web e adicione os arquivos do bootstrap ao cabeçalho. O código a seguir mostra como criar uma página simples já adicionando os arquivos.
<html> <head> <title>Exemplo de bootstrap</title> <script type=”text/javascript” src=”js/jquery.js”></script> <script type=”text/javascript” src=”js/popper.js”></script> <script type=”text/javascript” src=”js/bootstrap.js”></script> <script type=”text/javascript” src=”js/bootstrap.bundle.js”></script> <link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”/> <link rel=”stylesheet” type=”text/css” href=”css/bootstrap-grid.css”/> <link rel=”stylesheet” type=”text/css” href=”css/bootstrap-reboot.css”/ > </head> </html>
Passo 03 – Crie sua página
A partir de agora, você poderá utilizar o showcase do bootstrap para criar suas páginas assim como a documentação prevê. O showcase tem muitos elementos e exemplos completos de páginas. Veja abaixo um exemplo de formulário criado com bootstrap que foi feito em alguns minutos:
Veja o código fonte:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de bootstrap</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/popper.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap.bundle.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-reboot.css"/>
</head>
<body>
<div style="margin:0 auto; background-color: #ddd; padding: 50px" class="row">
<img class="col-md-3" src="images/bootstrap.png" height="300">
<form class="form-group col-md-5">
<H2>Cadastre-se</H2>
<input type="text" name="nome" placeholder="Digite seu nome" class="form-control">
<input type="text" name="nome" placeholder="Digite seu e-mail" class="form-control">
<input type="password" name="nome" placeholder="Digite uma senha" class="form-control">
<input type="password" name="nome" placeholder="Confirme sua senha" class="form-control">
<input type="button" name="enviar" value="Enviar dados" class="btn btn-success">
</form>
</div>
</body>
</html>
