Tema Bootstrap "Simplesmente Eu"
Crie um tema: "Simplesmente eu"
Esta página mostrará como construir um tema Bootstrap do zero.
Começaremos com uma página HTML simples e, em seguida, adicionaremos mais e mais componentes, até termos um site totalmente funcional, pessoal e responsivo.
O resultado ficará assim, e você pode modificar, salvar, compartilhar, usar ou fazer o que quiser com ele:
Página inicial HTML
Começaremos com a seguinte página HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Simply Me</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</body>
</html>
Adicionar Bootstrap CDN e colocar elementos no contêiner
Adicione Bootstrap CDN e um link para jQuery e coloque elementos HTML dentro de um container:
Exemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Simply Me</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
</body>
</html>
Resultado:
Quem sou eu?
sou um aventureiro
Adicionar cor de fundo e texto centralizado
1. Adicione uma classe personalizada (.bg-1) ao contêiner para adicionar uma cor de fundo.
2. Adicione a .text-centerclasse para centralizar o texto dentro do contêiner:
Exemplo
<head>
<style>
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
</style>
</head>
<body>
<div class="container-fluid bg-1 text-center">
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
</body>
Resultado:
Quem sou eu?
sou um aventureiro
Imagem do círculo
Molde a imagem em um círculo com a .img-circleturma:
Exemplo
<img src="bird.jpg" class="img-circle" alt="Bird">
Resultado:
Quem sou eu?
sou um aventureiro
Mais conteúdo
Adicione mais conteúdo e coloque-o dentro de novos contêineres:
Exemplo
<head>
<style>
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
</style>
</head>
<body>
<div class="container-fluid bg-1 text-center">
<h3>Who Am I?</h3>
<img src="bird.jpg" class="img-circle" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
<div class="container-fluid bg-2 text-center">
<h3>What Am I?</h3>
<p>Lorem ipsum..</p>
</div>
<div class="container-fluid bg-3 text-center">
<h3>Where To Find Me?</h3>
<p>Lorem ipsum..</p>
</div>
</body>
Resultado:
Quem sou eu?
sou um aventureiro
O que eu sou?
A dor em si é o amor da dor, os principais problemas ecológicos, mas eu dou esse tipo de tempo para cair, para que alguma grande dor e dor. Com o objetivo de chegar ao mínimo, quem de nós deve exercer qualquer emprego, exceto para tirar proveito das consequências dele.
Onde me encontrar?
A dor em si é o amor da dor, os principais problemas ecológicos, mas eu dou esse tipo de tempo para cair, para que alguma grande dor e dor. Com o objetivo de chegar ao mínimo, quem de nós deve exercer qualquer emprego, exceto para tirar proveito das consequências dele.
Adicionar preenchimento
Vamos fazer com que os contêineres tenham uma boa aparência adicionando um pouco de preenchimento:
Exemplo
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>
Resultado:
Quem sou eu?
sou um aventureiro
O que eu sou?
A dor em si é o amor da dor, os principais problemas ecológicos, mas eu dou esse tipo de tempo para cair, para que alguma grande dor e dor. Com o objetivo de chegar ao mínimo, quem de nós deve exercer qualquer emprego, exceto para tirar proveito das consequências dele.
Onde me encontrar?
A dor em si é o amor da dor, os principais problemas ecológicos, mas eu dou esse tipo de tempo para cair, para que alguma grande dor e dor. Com o objetivo de chegar ao mínimo, quem de nós deve exercer qualquer emprego, exceto para tirar proveito das consequências dele.
Adicionar um botão
Adicione um botão ao contêiner intermediário:
Exemplo
<div class="container-fluid bg-2 text-center">
<h3>What Am I?</h3>
<p>Lorem ipsum..</p>
<a href="#" class="btn btn-default btn-lg">Search</a>
</div>
Resultado:
O que eu sou?
A dor em si é o amor da dor, os principais problemas ecológicos, mas eu dou esse tipo de tempo para cair, para que alguma grande dor e dor. Com o objetivo de chegar ao mínimo, quem de nós deve exercer qualquer emprego, exceto para tirar proveito das consequências dele.
ProcurarAdicionar um ícone
Adicione um ícone de pesquisa no botão "Pesquisar":
Exemplo
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
Resultado:
Modificar o terceiro contêiner (adicionar grade)
Adicione três colunas de largura igual dentro do terceiro contêiner ( .col-sm-4):
Exemplo
<div class="container-fluid bg-3 text-center">
<h3>Where To Find Me?</h3>
<div class="row">
<div class="col-sm-4">
<p>Lorem ipsum..</p>
<img src="birds1.jpg" alt="Image">
</div>
<div class="col-sm-4">
<p>Lorem ipsum..</p>
<img src="birds2.jpg" alt="Image">
</div>
<div class="col-sm-4">
<p>Lorem ipsum..</p>
<img src="birds3.jpg" alt="Image">
</div>
</div>
</div>
Resultado:
Onde me encontrar?
A dor em si é importante, mas a dor é aumentada pelo processo de adipiscação, mas dou tempo para reduzi-la para que eu faça um ótimo trabalho e dor.
A dor em si é importante, mas a dor é aumentada pelo processo de adipiscação, mas dou tempo para reduzi-la para que eu faça um ótimo trabalho e dor.
A dor em si é importante, mas a dor é aumentada pelo processo de adipiscação, mas dou tempo para reduzi-la para que eu faça um ótimo trabalho e dor.
Torne as imagens responsivas
Adicione a .img-responsiveclasse a todas as imagens.
Adicione display:inlineà primeira imagem para forçá-la a ser centralizada (a .img-responsiveclasse adiciona display:block
à imagem, o que a faz pular para a esquerda da tela).
Se você quiser que a imagem ocupe toda a largura da tela quando começar a empilhar, adicione width:100%à imagem.
Ao abrir o exemplo, lembre-se de redimensionar a tela para ver o efeito responsivo:
Exemplo
<!-- The circular bird -->
<img src="bird.jpg" class="img-responsive img-circle" style="display:inline" alt="Bird">
<!-- The birds in our grid: -->
<img src="birds1.jpg" class="img-responsive" style="width:100%" alt="Image">
<img src="birds2.jpg" class="img-responsive" style="width:100%" alt="Image">
<img src="birds3.jpg" class="img-responsive" style="width:100%" alt="Image">
Adicionar uma barra de navegação
Add a standard navigation bar at the top of the page with and make it collapsible on smaller screens:
Example
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Me</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">WHO</a></li>
<li><a href="#">WHAT</a></li>
<li><a href="#">WHERE</a></li>
</ul>
</div>
</div>
</nav>
Result:
Style The Navbar
Use CSS to customize the navigation bar:
Example
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
Result:
Add a Footer
Add a footer and use CSS to style it:
Example
<style>
.bg-4 {
background-color: #2f2f2f;
color: #ffffff;
}
</style>
<footer class="container-fluid bg-4 text-center">
<p>Bootstrap Theme Made By <a href="https://www.w3schools.com">www.w3schools.com</a></p>
</footer>
Result:
Final Touch
Personalize your Theme by adding a font that you like. We have used "Montserrat" from Google's Font Library.
Link to the font in the
<head> section:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
Then you can use it in the page:
Example
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;}
We have also created a "helper" margin class to add extra space
where we think it's needed; usually after each <h3> and <img> element.
Example
.margin {margin-bottom: 45px;}