Criar um tema: "Simply Me"
Esta página irá mostrar-lhe como construir um Bootstrap tema a partir do zero.
Vamos começar com uma página HTML simples, e, em seguida, adicionar mais e mais componentes, até que tenhamos um site totalmente funcional, pessoal e responsivo.
O resultado será parecido com este, e você está livre para modificar, guardar, partilhar, usar ou fazer o que quiser com ele:
Start Page HTML
Vamos começar com a página HTML seguinte:
<!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 em Container
Adicionar Bootstrap CDN e um link para jQuery e colocar elementos HTML dentro de um recipiente:
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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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?
Eu sou um aventureiro
Adicione a cor do fundo e texto Centro
1. Adicione uma classe personalizada (.bg-1) para o recipiente para adicionar uma cor de fundo.
2. Adicione o .text-center de classe para centralizar o texto no interior do recipiente:
Exemplo
<style>
.bg-1 {
background-color: #1abc9c;
/* Green */
color: #ffffff;
}
</style>
<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?
Eu sou um aventureiro
círculo de imagem
Moldar a imagem para um círculo com o .img-circle classe:
Exemplo
<img src="bird.jpg"
class="img-circle" alt="Bird">
Resultado:
Quem sou eu?
Eu sou um aventureiro
mais conteúdo
Adicionar mais conteúdo e colocá-lo dentro novos contentores:
Exemplo
<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>
<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?
Eu sou um aventureiro
O que eu sou?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Onde me encontrar?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Adicionar Padding
Vamos fazer os recipientes com bom aspecto, acrescentando alguns padding:
Exemplo
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>Resultado:
Quem sou eu?
Eu sou um aventureiro
O que eu sou?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Onde me encontrar?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Adicionar um botão
Adicionar um botão para meados do recipiente:
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?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
PesquisaAdicionar um ícone
Adicionar 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:
Tente você mesmo "Modificar o terceiro recipiente (Adicione Grid)
Adicionar três colunas de igual largura dentro do terceiro recipiente ( .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?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua.
Faça as imagens Responsive
Adicione o .img-responsive classe para todas as imagens.
Adicionar display:inline para a primeira imagem para forçá-lo a centrar (o .img-responsive classe acrescenta display:block para a imagem, o que torna saltar para a esquerda da tela).
Se você quiser a imagem para ocupar toda a largura da tela quando ele começa a empilhar, adicione width:100% à imagem.
Ao abrir o exemplo, lembre-se de redimensionar o ecrã para ver o efeito sensível:
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"> Tente você mesmo " Adicionar uma barra de navegação
Adicionar uma barra de navegação padrão na parte superior da página, com e torná-lo dobráveis em telas menores:
Exemplo
<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>Resultado:
Tente você mesmo "Estilo O Navbar
Use CSS para personalizar a barra de navegação:
Exemplo
.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;
}Resultado:
Tente você mesmo "Adicionar um rodapé
Adicionar um rodapé e usar CSS para estilizar-lo:
Exemplo
<style>
.bg-4 {
background-color: #2f2f2f;
color: #ffffff;
}
</style>
<footer class="container-fluid bg-4
text-center">
<p> Bootstrap Theme Made By <a href="http://www.w3ii.com">www.w3ii.com</a></p>
</footer>Resultado:
Tente você mesmo "Toque final
Personalize o seu tema, adicionando uma fonte que você gosta. Temos usado "Montserrat" da Biblioteca de Fontes do Google.
Link para a fonte no <head> seção:
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
Em seguida, você pode usá-lo na página:
Exemplo
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;} Também criamos um "helper" class margem para adicionar espaço extra, onde nós pensamos que é necessário; geralmente após cada <h3> e <img> elemento.