Artigo original: Learn Bootstrap 4 in 30 minutes by building a landing page website
Escrito por: Said Hayani
(Tradução em português europeu)
Guia para iniciantes
"O Bootstrap é uma biblioteca de front-end gratuita e de código aberto para criação de sites e aplicações para a web. Contém modelos de design criados em HTML e CSS para tudo, desde tipografia, formulários, botões, navegação e outros componentes de UI, bem como extensões de JavaScript. Ao contrário de muitos outros frameworks para a web, o Bootstrap tem como foco apenas o desenvolvimento front-end." — Wikipédia
Olá. Antes de começarmos, confere o meu curso completo para aprender Boostrap 4, onde aprenderás novos recursos do Boostrap e como usá-los, de modo a criares melhores experiências de usuário.
O Bootstrap tem várias versões, sendo a versão 4 a mais recente. Neste artigo, vamos construir o nosso website usando o Bootstrap 4.
Nota da tradução: no momento da escrita deste artigo, a versão mais recente era a versão 4. No momento da tradução, já estamos na versão 5.3.0.
Pré-requisitos
Antes de começar, é importante que tenhas os seguintes conhecimentos, para melhor compreenderes e aprenderes a usar o framework Boostrap:
- HTML
- conhecimento base de CSS
- conhecimento base de jQuery
Índice
Para o nosso website, vamos cobrir os seguintes tópicos:
- Baixar e instalar o Bootstrap 4
- O que há de novo no Bootstrap 4
- O sistema de grid no Boostrap
- Barra de navegação
- Header
- Botões
- Secção Sobre mim
- Secção Portfolio
- Secção Blog
- Cartões (cards)
- Secção A equipa
- Formulário de contacto
- Fonts
- Efeito scroll
- Últimos retoques e conclusão
Baixar e instalar o Bootstrap 4
Há três formas de instalar ou incluir o Bootstrap nos nossos projectos:
- Usando o npm
Podemos instalar Bootstrap 4 usando este comando no nosso Terminal npm install bootstrap
Nota de tradução: é possível instalar a versão do Bootstrap 4 indicada, nos dias de hoje, usando npm install bootstrap@4.0.02. Usando Content Delivery Network (CDN)
Para usar CDN, basta incluir o link abaixo no nosso projecto, dentro das tags <head>:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">Nota de tradução: recomendamos realizar a instalação por meio do CDN para aqueles que preferem ter instaladas as versões mais recentes dos pacotes.
3. Baixar o Bootstrap e usá-lo localmente (no nosso pc).
Nota de tradução: este link, de fato, levará ao site do Bootstrap para baixar a versão mais recente do framework, não a versão 4.
A estrutura (pasta) do nosso projecto deverá estar assim:
O que há de novo no Bootstrap 4
O que há de novo no Boostrap 4? Quais as diferenças entre Bootstrap 3 e 4?
O Bootstrap 4 traz as seguintes funcionalidades que não existiam na versão anterior:
- Bootstrap 4 foi criado com Flexbox e Grid, enquanto o Bootstrap 3 foi criado usando float.
Se o termo Flexbox é novo para ti, vê este tutorial (em inglês). - Bootstrap 4 faz uso da unidade/medida
remem CSS, enquanto o Bootstrap 3 usa a unidade/medidapx.
Entende neste artigo como as duas se diferenciam (texto em inglês). - Painéis, miniaturas e wells foram retirados na sua totalidade.
Podes ler mais sobre as alterações gerais e as funcionalidades removidas no Boostrap 4 aqui (documentação oficial em inglês).
Sem entrar em grande detalhe, vamos concentrar-nos nas partes mais importantes.
O sistema de grid do Bootstrap
O sistema de Grid no Bootstrap ajuda-te a criar o layout do site de modo fácil e responsivo. Não houve alterações nos nomes das classes usadas, com excepção para a .xs classe, que deixou de existir na versão do Bootstrap 4.
A grid foi dividida em 12 colunas, nas quais se baseará o layout do teu site.
Para usar o sistema de grid, terás de incluir a class .row na tua div principal e depois nas divs internas aplicar uma das seguintes.
col-lg-2 // classe usada para dispositivos grandes, como portáteis
col-md-2 // class usada para dispositivos médios, como tablets
col-sm-2// class usada para dispositivos pequenos, como telemóveisBarra de navegação
A funcionalidade do elemento/tag que envolve a barra de navegação no Bootstrap 4 é fantástica e muito útil quando se trata de criar uma barra de navegação responsiva.
Para isso, vamos adicionar a classe navbar ao nosso ficheiro index.html:
<!-- navbar -->
<nav class="navbar navbar-expand-lg fixed-top ">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent"> <ul class="navbar-nav mr-4">
<li class="nav-item">
<a class="nav-link" data-value="about" href="#">About</a> </li>
<li class="nav-item">
<a class="nav-link " data-value="portfolio"href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " data-value="blog" href="#">Blog</a> </li>
<li class="nav-item">
<a class="nav-link " data-value="team" href="#"> Team</a> </li>
<li class="nav-item">
<a class="nav-link " data-value="contact" href="#">Contact</a> </li>
</ul>
</div></nav>A seguir, cria e inclui o ficheiro main.css para que possas criar e editar os teus elementos com CSS.
Coloca a seguinte linha de código entre as tags head do teu ficheiro index.html:
<link rel="stylesheet" type="text/css" href="css/main.css">Vamos agora adicionar cor à barra de navegação:
.navbar{ background:#F97300;}
.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}
.nav-link{ margin-right: 1em !important;}
.nav-link:hover{ background: #f4f4f4; color: #f97300; }
.navbar-collapse{ justify-content: flex-end;}
.navbar-toggler{ background:#fff !important;}Uma vez que o sistema de Grid na nova versão do Bootstrap foi criado usando o sistema Flexbox, terás de usar as propriedades do Flexbox para o alinhamento dos elementos. Por exemplo, para colocar o menu da barra de navegação do lado direito, temos de adicionar a propriedade justify-content e definir o seu valor para flex-end.
.navbar-collapse{
justify-content: flex-end;
}Adiciona a classe .fixed-top à tua barra de navegação, de forma a fixar a sua posição no topo da página.
Para mudar a cor de fundo da barra de navegação para uma cor clara, usa a classe .bg-light. Para uma cor de fundo escura, podes usar a classe .bg-dark. Se preferires a cor azul clara, tens disponível classe.bg-primary.
Eis como parte do teu CSS deverá estar:
.bg-dark{
background-color:#343a40!important
}
.bg-primary{
background-color:#007bff!important
}Header
<header class="header">
</header>Vamos agora criar um layout para a nossa header.
Neste caso, queremos que a header ocupe a totalidade da altura da janela do dispositivo, portanto vamos usar um pouco de JQuery.
Primeiro, cria um ficheiro chamado main.js e inclui-o no teu ficheiro index.html exactamente antes da tag de fechamento do body:
<script type="text/javascript" src='js/main.js'></script>No ficheiro main.js, coloca o seguinte código JQuery:
$(document).ready(function(){
$('.header').height($(window).height());
})A header ficaria bem melhor se adicionarmos uma imagem de fundo:
/*header style*/
.header{
background-image: url('../images/headerback.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center;
}
Agora vamos adicionar uma div com a class de overlay, para dar um toque mais profissional à header:
Adiciona isto ao teu ficheiro index.html:
<header class="header">
<div class="overlay"></div>
</header>Depois, adiciona o seguinte ao teu ficheiro main.css:
.overlay{
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(244, 244, 244, 0.79);
}De seguida, vamos adicionar uma descrição dentro da header.
Para tal, vamos criar uma div e atribuir-lhe uma classe de .container.
.container é uma classe do Bootstrap que auxilia a "conter" todo o conteúdo e a fazer com que o layout se torne responsivo:
<header class="header">
<div class="overlay"></div>
<div class="container">
</div>
</header>Cria agora outra div que conterá a descrição.
<div class="description text-center">
<h1> Hello ,Welcome To My official Website
<p> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<button class="btn btn-outline-secondary btn-lg">See more</button> </h1>
</div>Vamos atribuir-lhe a classe de .description e adicionar também a classe .text-center para garantir que o texto é centrado na página.
Botões
Cria o elemento button e atribui-lhe as classes .btn btn-outline-secondary.
Existem outras classes para estilizar os botões via Bootstrap.
Alguns exemplos disponíveis no link abaixo:
No teu ficheiro CSS main.css, a classe .description deve ter então os seguintes atributos:
.description{
position: absolute;
top: 30%;
margin: auto;
padding: 2em;
}
.description h1{
color:#F97300 ;
}
.description p{
color:#666;
font-size: 20px;
width: 50%;
line-height: 1.5;
}
.description button{
border:1px solid #F97300;
background:#F97300;
color:#fff;
}A header deve estar assim agora:
Porreiro, não?! 🙂
Secção Sobre mim
Vamos dividir esta secção em duas partes usando Bootstrap Grid.
Para inicializar a nossa Grid, vamos atribuir a classe .row à nossa div mãe.
<div class="row"></div>Metade da secção ficará posicionada à esquerda e conterá uma imagem, sendo que a outra metade ficará posicionada à direita e conterá uma descrição.
Atribuiremos a cada metade da nossa secção uma div e cada uma ocupará um total de 6 colunas — o que significa, metade da secção. Lembra-te que a Grid é composta por 12 colunas.
Na div que ocupará o lado esquerdo da secção:
<div class="row">
// lado esquerdo
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/team-3.jpg" class="img-fluid">
<span class="text-justify">S.Web Developer</span>
</div>
</div>De seguida, vamos adicionar os elementos HTML para a nossa outra metade (lado direito da secção) e a estrutura do nosso código deverá assemelhar-se a isto:
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/team-3.jpg" class="img-fluid">
<span class="text-justify">S.Web Developer</span>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 desc">
<h3>D.John</h3>
<p>
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>Agora, vamos estilizar as classes usadas acima:
.about{
margin: 4em 0;
padding: 1em;
position: relative;
}
.about h1{
color:#F97300;
margin: 2em;
}
.about img{
height: 100%;
width: 100%;
border-radius: 50%
}
.about span{
display: block;
color: #888;
position: absolute;
left: 115px;
}
.about .desc{
padding: 2em;
border-left:4px solid #10828C;
}
.about .desc h3{
color: #10828C;
}
.about .desc p{
line-height:2;
color:#888;
}Secção Portfolio
Nesta secção, vamos criar um Portfolio, que conterá uma galeria.
Abaixo, podes ver como a estrutura do nosso código HTML ficará:
<!-- portfolio -->
<div class="portfolio">
<h1 class="text-center">Portfolio</h1>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port13.png" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port1.png" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port6.png" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port3.png" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port11.png" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/electric.png" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/Classic.jpg" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port1.png" class="img-fluid">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="images/portfolio/port8.png" class="img-fluid">
</div>
</div>
</div>
</div>É importante adicionar a classe .img-fluid a cada imagem, de modo a torná-las responsivas.
Cada item da nossa galeria ocupará 4 colunas (lembra-te, col-md-4 para dispositivos médios, col-lg-4 para dispositivos grandes), o que equivale a 33.33333% em dispositivos com ecrãs grandes, tais como computadores e 12 colunas em dispositivos pequenos (como iPhone e outros dispositivos móveis) o que fará com que as colunas ocupem 100% do contêiner.
De seguida, vamos estilizar a nossa galeria:
/*Portfolio*/
.portfolio{
margin: 4em 0;
position: relative;
}
.portfolio h1{
color:#F97300;
margin: 2em;
}
.portfolio img{
height: 15rem;
width: 100%;
margin: 1em;
}Secção Blog
Cartões (cards)
Cartões (ou cards) no Bootstrap 4 são a classe mais adequada para artigos e posts e fazem com que seja fácil criar um design de um blog.
Para criá-los, vamos adicionar a classe .card a uma div.
A classe card contém várias funcionalidades:
.card-header: define a header do cartão.card-body: define o corpo do cartão.card-title: define o título do cartão.card-footer: define o footer do cartão..card-image: usada para imagens dentro do cartão
A estrutura do nosso HTML para esta secção deverá ficar assim:
<!-- Posts section -->
<div class="blog">
<div class="container">
<h1 class="text-center">Blog</h1>
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-12">
<div class="card">
<div class="card-img">
<img src="images/posts/polit.jpg" class="img-fluid">
</div>
<div class="card-body">
<h4 class="card-title">Post Title</h4>
<p class="card-text">
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="card-footer">
<a href="" class="card-link">Read more</a>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-12">
<div class="card">
<div class="card-img">
<img src="images/posts/images.jpg" class="img-fluid">
</div>
<div class="card-body">
<h4 class="card-title">Post Title</h4>
<p class="card-text">
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="card-footer">
<a href="" class="card-link">Read more</a>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-12">
<div class="card">
<div class="card-img">
<img src="images/posts/imag2.jpg" class="img-fluid">
</div>
<div class="card-body">
<h4 class="card-title">Post Title</h4>
<p class="card-text">
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="card-footer">
<a href="" class="card-link">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>Precisamos agora de estilizar os nossos cartões:
.blog{
margin: 4em 0;
position: relative;
}
.blog h1{
color:#F97300;
margin: 2em;
}
.blog .card{
box-shadow: 0 0 20px #ccc;
}
.blog .card img{
width: 100%;
height: 12em;
}
.blog .card-title{
color:#F97300;
}
.blog .card-body{
padding: 1em;
}Após completarmos a secção Blog do nosso website, o design deverá estar conforme a imagem abaixo:
Fixe, certo?
Secção A equipa
Nesta secção, vamos utilizar o sistema Grid para distribuir as imagens pelo espaço disponível, de modo igual. Cada imagem ocupará 3 colunas (.col-md-3), o que equivale a 25% do espaço total.
O nosso HTML:
<!-- Team section -->
<div class="team">
<div class="container">
<h1 class="text-center">Our Team</h1>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 item">
<img src="images/team-2.jpg" class="img-fluid" alt="team">
<div class="des">
Sara
</div>
<span class="text-muted">Manager</span>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 item">
<img src="images/team-3.jpg" class="img-fluid" alt="team">
<div class="des">
Chris
</div>
<span class="text-muted">S.enginner</span>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 item">
<img src="images/team-2.jpg" class="img-fluid" alt="team">
<div class="des">
Layla
</div>
<span class="text-muted">Front End Developer</span>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 item">
<img src="images/team-3.jpg" class="img-fluid" alt="team">
<div class="des">
J.Jirard
</div>
<span class="text-muted">Team Manger</span>
</div>
</div>
</div>
</div>Vamos complementar o nosso CSS:
.team{
margin: 4em 0;
position: relative;
}
.team h1{
color:#F97300;
margin: 2em;
}
.team .item{
position: relative;
}
.team .des{
background: #F97300;
color: #fff;
text-align: center;
border-bottom-left-radius: 93%;
transition:.3s ease-in-out;
}Um toque extra que podemos adicionar, um efeito overlay nas imagens sempre que o cursor do rato passar por cima da imagem (on-hover).
Para criar este efeito, adiciona o seguinte ao teu ficheiro main.css:
.team .item:hover .des{
height: 100%;
background:#f973007d;
position: absolute;
width: 89%;
padding: 5em;
top: 0;
border-bottom-left-radius: 0;
}Brutal!
Formulário de contacto
O formulário de Contacto será a última secção que adicionaremos.
Esta secção conterá um um formulário através do qual os visitantes do site poderão enviar uma mensagens de feedback. Com algumas classes do Bootstrap, tornaremos o design mais apelativo e responsivo.
Tal como no Bootstrap 3, o Bootstrap 4 também permite usar a classe .form-control para os campos de preenchimento. No entanto, existem novas funcionalidades que foram implementadas nessa versão – como a mudança da classe .input-group-addon (descontinuada) para a nova classe .input-group-prepend (que permite usar ícones como labels).
Acede a este link do Bootstrap 4 para mais informação (em inglês). No nosso formulário, vamos "conter" cada campo de preenchimento com uma div que terá a classe .form-group.
O ficheiroindex.html deverá ter o seguinte HTML para o formulário:
<!-- Contact form -->
<div class="contact-form">
<div class="container">
<form>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<h1>Get in Touch</h1>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 right">
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Your Name" name="">
</div>
<div class="form-group">
<input type="email" class="form-control form-control-lg" placeholder="YourEmail@email.com" name="email">
</div>
<div class="form-group">
<textarea class="form-control form-control-lg">
</textarea>
</div>
<input type="submit" class="btn btn-secondary btn-block" value="Send" name="">
</div>
</div>
</form>
</div>
</div>Agora, vamos aos estilos:
main.css
.contact-form{
margin: 6em 0;
position: relative;
}
.contact-form h1{
padding:2em 1px;
color: #F97300;
}
.contact-form .right{
max-width: 600px;
}
.contact-form .right .btn-secondary{
background: #F97300;
color: #fff;
border:0;
}
.contact-form .right .form-control::placeholder{
color: #888;
font-size: 16px;
}Fonts
Para este projecto, usaremos a font Raleway, disponível através da Google Font Api.
Para isso, basta adicionarmos o seguinte link ao nosso ficheiro main.css:
@import url('https://fonts.googleapis.com/css?family=Raleway');Vamos aplicar a nossa font usando o seguinte estilo global, que aplicará a font ao HTML e às tags de título:
html,h1,h2,h3,h4,h5,h6,a{
font-family: "Raleway";
}Efeito scroll
O último detalhe a acrescentar é o efeito de scrolling. Para tal, neste caso, vamos usar o JQuery. Não te preocupes se não estás familiarizado com o JQuery. Basta adicionares o seguinte código ao teu ficheiro main.js:
$(".navbar a").click(function(){
$("body,html").animate({
scrollTop:$("#" + $(this).data('value')).offset().top
},1000)
})Acrescenta, então, um atributo data-value a cada link da barra de navegação:
<li class="nav-item">
<a class="nav-link" data-value="about" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link " data-value="portfolio" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " data-value="blog" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link " data-value="team" href="#">
Team</a>
</li>
<li class="nav-item">
<a class="nav-link " data-value="contact" href="#">Contact</a>
</li>De seguida, atribui a cada secção um atributo de id.
Nota: o atributo id terá de ser idêntico a cada atributo de data-value da barra de navegação:
<div class="about" id="about"></div>Últimos retoques e conclusão
O Bootstrap 4 é uma excelente opção para construir aplicações web. Oferece excelente qualidade nos seus elementos de interface de usuário e é fácil de personalizar, integrar e usar. Ele também facilitará a inclusão de responsividade e, deste modo, melhorará a experiência de usuário dos visitantes do site.
Os ficheiros usados para este projecto podem ser encontrados neste repositório GitHub.
Se necessitarem de temas ou templates para Bootstrap, vejam este link, BootstrapBay, pois eles têm excelentes produtos
Confira o meu curso para aprender mais sobre Bootstrap 4:
Bootstrap 4 crash course: basic to advance | Said Hayani | Skillshare