Criar um tema: "The Band"
Esta página irá mostrar-lhe como construir um tema Bootstrap 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 The Band</title>
<meta charset="utf-8">
</head>
<body>
<div>
<h3>THE BAND</h3>
<p>We love music!</p>
<p>We have created a fictional band website. Lorem ipsum..</p>
</div>
</body>
</html>Adicionar Bootstrap CDN e adicionar um contêiner
Adicionar Bootstrap CDN e um link para jQuery e colocar elementos HTML dentro de um recipiente ( .container ):
Exemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Theme The Band</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">
<h3>THE BAND</h3>
<p>We love music!</p>
<p>We have
created a fictional band website. Lorem ipsum..</p>
</div>
</body>
</html>Resultado:
A BANDA
Nós amamos a música!
Nós criamos um website banda fictícia. Lorem ipsum ..
Texto centro
Adicione o .text-center de classe para centralizar o texto no interior do recipiente, e usar o <em> elemento para tornar o texto em itálico "Nós amamos a música":
Exemplo
<div class="container text-center">
<h3>THE BAND</h3>
<p><em>We love music!</em></p>
<p>We have
created a fictional band website. Lorem ipsum..</p>
</div>Resultado:
A BANDA
Nós amamos a música!
Nós criamos um website banda fictícia. Lorem ipsum ..
Adicionar Padding
Use CSS para fazer o recipiente ficar bem com padding:
Exemplo
.container {
padding: 80px 120px;
}Resultado:
A BANDA
Nós amamos a música!
Nós criamos um website banda fictícia. Lorem ipsum ..
Adicionar um Grid
Criar três colunas de igual largura ( .col-sm-4 ), adicionar texto e imagens, e colocá-los dentro do recipiente:
Exemplo
<div class="container text-center">
<h3>THE BAND</h3>
<p><em>We
love music!</em></p>
<p>We have created a fictional band website.
Lorem ipsum..</p>
<br>
<div class="row">
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
</div>
</div>Resultado:
A BANDA
Nós amamos a música!
Nós criamos um website banda fictícia. Lorem ipsum ..
Nome
Nome
Nome
círculo de imagem
Moldar a imagem para um círculo com o .img-circle classe.
Nós também adicionamos alguns CSS para fazer as imagens boa aparência:
Exemplo
.person {
border: 10px solid transparent;
margin-bottom: 25px;
width: 80%;
height: 80%;
opacity: 0.7;
}
.person:hover {
border-color: #f1f1f1;
}
<img src="bandmember.jpg"
class="img-circle person" alt="Random Name">
<img src="bandmember.jpg"
class="img-circle person" alt="Random Name">
<img src="bandmember.jpg"
class="img-circle person" alt="Random Name">
Resultado:
Nome
Nome
Nome
collapsibles
Faça as imagens dobrável; mostrar o conteúdo extra quando você clicar em cada imagem:
Exemplo
<div class="row">
<div class="col-sm-4">
<p
class="text-center"><strong>Name</strong></p><br>
<a href="#demo"
data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person"
alt="Random Name">
</a>
<div id="demo"
class="collapse">
<p>Guitarist and Lead Vocalist</p>
<p>Loves long
walks on the beach</p>
<p>Member since 1988</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo2" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle
person" alt="Random Name">
</a>
<div id="demo2"
class="collapse">
<p>Drummer</p>
<p>Loves drummin'</p>
<p>Member
since 1988</p>
</div>
</div>
<div class="col-sm-4">
<p
class="text-center"><strong>Name</strong></p><br>
<a href="#demo3"
data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person"
alt="Random Name">
</a>
<div id="demo3"
class="collapse">
<p>Bass player</p>
<p>Loves math</p>
<p>Member
since 2005</p>
</div>
</div>
</div>Resultado (clique nas imagens para ver o efeito):
Nome
Guitarrista e vocalista
Adora longas caminhadas na praia
Membro desde 1988
Nome
Baterista
Ama drummin '
Membro desde 1988
Nome
Baixista
adora matemática
Membro desde 2005
Adicionar um carrossel
Criar um carrossel e adicioná-lo antes do recipiente:
Exemplo
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"
role="listbox">
<div class="item active">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>The atmosphere in New York is lorem ipsum.</p>
</div>
</div>
<div
class="item">
<img src="chicago.jpg"
alt="Chicago">
<div
class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago - A night we won't forget.</p>
</div>
</div>
<div
class="item">
<img src="la.jpg"
alt="Los Angeles">
<div
class="carousel-caption">
<h3>LA</h3>
<p>Even though the traffic was a mess, we had the best time.</p>
</div>
</div>
</div>
<!--
Left and right controls -->
<a class="left carousel-control" href="#myCarousel"
role="button" data-slide="prev">
<span class="glyphicon
glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="right carousel-control" href="#myCarousel" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Resultado:
Nova york
A atmosfera em Nova York é lorem ipsum.
Chicago
Obrigado, Chicago - A noite que não vai esquecer.
LA
Mesmo que o trânsito estava uma bagunça, tivemos o melhor tempo jogando na praia de Veneza!
Estilo The Carousel
Use CSS para estilizar o carrossel:
Exemplo
.carousel-inner img {
-webkit-filter:
grayscale(90%);
filter: grayscale(90%); /* make all photos black and
white */
width: 100%; /* Set width to 100% */
margin: auto;
}
.carousel-caption h3 {
color: #fff !important;
}
@media
(max-width: 600px) {
.carousel-caption {
display: none; /* Hide the
carousel text when the screen is less than 600 pixels wide */
}
}Resultado:
Nova york
A atmosfera em Nova York é lorem ipsum.
Chicago
Obrigado, Chicago - A noite que não vai esquecer.
LA
Mesmo que o trânsito estava uma bagunça, tivemos o melhor tempo jogando na praia de Veneza!
Adicionar Posto de Container
Adicionar um novo recipiente e adicione uma lista ( .list-group e .list-group-item ) dentro dele.
Adicionar uma classe personalizada ( .bg-1 ) para o recipiente (preto cor de fundo) e alguns estilos para seus filhos:
Exemplo
<style>
.bg-1 {
background: #2d2d30;
color: #bdbdbd;
}
.bg-1 h3 {color: #fff;}
.bg-1 p {font-style:
italic;}
</style>
<div class="bg-1">
<div
class="container">
<h3 class="text-center">TOUR
DATES</h3>
<p class="text-center">Lorem ipsum we'll
play you some music.<br> Remember to book your tickets!</p>
<ul class="list-group">
<li
class="list-group-item">September Sold Out!</li>
<li class="list-group-item">October Sold Out!</li>
<li class="list-group-item">November 3</li>
</ul>
</div>
</div>
Resultado:
datas da turnê
Lorem ipsum vamos reproduzir alguma música.
Lembre-se de reservar os seus bilhetes!
- Setembro Esgotado!
- Outubro Esgotado!
- 03 de novembro
Adicionar Labels & Badges
Adicionar uma etiqueta ( .label ) e um emblema ( .badge ) para destacar bilhetes disponíveis / esgotados:
Exemplo
<ul class="list-group">
<li class="list-group-item">September
<span class="label label-danger">Sold Out!</span></li>
<li
class="list-group-item">October <span class="label label-danger">Sold
Out!</span></li>
<li class="list-group-item">November <span
class="badge">3</span></li>
</ul>Resultado:
datas da turnê
Lorem ipsum vamos reproduzir alguma música.
Lembre-se de reservar os seus bilhetes!
- Setembro Esgotado!
- Outubro Esgotado!
- 03 de novembro
Adicionar imagens em miniatura
Dentro do recipiente Tour, adicionar três colunas de igual largura ( .col-sm-4 ):
Dentro de cada coluna, adicionar uma imagem.
Em seguida, use o .img-thumbnail classe para moldar a imagem para uma miniatura.
Normalmente, você poderia adicionar o .img-thumbnail classe diretamente para o <img> elemento. Neste exemplo, nós colocamos um recipiente em miniatura ao redor da imagem, de modo que podemos especificar um texto da imagem também.
Exemplo
<div class="row text-center">
<div class="col-sm-4">
<div
class="thumbnail">
<img src="paris.jpg" alt="Paris">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button
class="btn">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img
src="newyork.jpg" alt="New York">
<p><strong>New
York</strong></p>
<p>Sat. 28 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg"
alt="San Francisco">
<p><strong>San
Francisco</strong></p>
<p>Sun. 29 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
</div>Resultado:
Paris
Sex. 27 de novembro de 2015
Nova york
Sentou. 28 de novembro de 2015
São Francisco
Dom. 29 de novembro de 2015
Estilo Listas, Miniaturas e Botões
Use CSS para estilizar a lista e as imagens em miniatura. No nosso exemplo, nós removemos as fronteiras arredondadas da lista e temos tentado fazer as imagens em miniatura, como cartões, através da remoção de sua fronteira, e definir uma largura de 100% em cada imagem.
Nós também ter modificado os estilos padrão de de Bootstrap .btn classe, com um botão preto:
Exemplo
/* Remove rounded borders from list */
.list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.list-group-item:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/* Remove border and add padding
to thumbnails */
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail p {
margin-top: 15px;
color: #555;
}
/* Black buttons with extra padding and without rounded borders */
.btn {
padding: 10px 20px;
background-color: #333;
color: #f1f1f1;
border-radius: 0;
transition: .2s;
}
/* On
hover, the color of .btn will transition to white with black text */
.btn:hover, .btn:focus {
border: 1px solid #333;
background-color: #fff;
color: #000;
}Resultado:
- Setembro Esgotado!
- Outubro Esgotado!
- 03 de novembro
Paris
Sex. 27 de novembro de 2015
Nova york
Sentou. 28 de novembro de 2015
São Francisco
Dom. 29 de novembro de 2015
Adicionar um Modal
Em primeiro lugar, mudar todos os botões dentro da miniatura de <button class="btn">Buy Tickets</button> para <button class="btn" data-toggle="modal" data-target="#myModal" >Buy Tickets</button> . Estes botões são usados para abrir o modal efectiva.
Para criar o modal, olhe para o seguinte código:
Exemplo
<style>
/* Add a dark gray background color to the modal header and
center text */
.modal-header, h4, .close {
background-color: #333;
color: #fff !important;
text-align: center;
font-size: 30px;
}
.modal-header, .modal-body {
padding: 40px 50px;
}
</style>
<!-- Used to open the Modal -->
<button class="btn" data-toggle="modal" data-target="#myModal">Buy
Tickets</button>
<!-- Modal -->
<div class="modal fade" id="myModal"
role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">×</button>
<h4><span class="glyphicon
glyphicon-lock"></span> Tickets</h4>
</div>
<div class="modal-body">
<form role="form">
<div
class="form-group">
<label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span>
Tickets, $23 per person</label>
<input type="number" class="form-control"
id="psw" placeholder="How many?">
</div>
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Send
To</label>
<input type="text" class="form-control" id="usrname"
placeholder="Enter email">
</div>
<button type="submit" class="btn btn-block">Pay
<span class="glyphicon glyphicon-ok"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger
btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>
Cancel
</button>
<p>Need <a href="#">help?</a></p>
</div>
</div>
</div>
</div>Resultado (clique no botão "Comprar ingressos" para ver o efeito):
Adicionar contato Container
Criar um novo recipiente, com duas colunas de larguras desiguais ( .col-md-4 e .col-md-8 ).
Adicionar ícones informativos com texto dentro dos primeiros controles de coluna e forma, na segunda:
Exemplo
<div class="container">
<h3 class="text-center">Contact</h3>
<p class="text-center"><em>We love our fans!</em></p>
<div class="row test">
<div class="col-md-4">
<p>Fan? Drop a
note.</p>
<p><span class="glyphicon glyphicon-map-marker"></span>Chicago,
US</p>
<p><span class="glyphicon glyphicon-phone"></span>Phone: +00
1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span>Email:
[email protected]</p>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-sm-6 form-group">
<input
class="form-control" id="name" name="name" placeholder="Name" type="text"
required>
</div>
<div class="col-sm-6 form-group">
<input
class="form-control" id="email" name="email" placeholder="Email"
type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments"
placeholder="Comment" rows="5"></textarea>
<div class="row">
<div
class="col-md-12 form-group">
<button class="btn
pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>Resultado:
Contato
Nós amamos nossos fãs!
Adicionar Toggable Tabs
Adicionar guias ( .nav nav-tabs ) no interior do recipiente de contacto, com "aspas" dos membros da banda:
Exemplo
<style>
.nav-tabs li a {
color: #777;
}
</style>
<h3 class="text-center">From The Blog</h3>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Mike</a></li>
<li><a data-toggle="tab" href="#menu1">Chandler</a></li>
<li><a
data-toggle="tab" href="#menu2">Peter</a></li>
</ul>
<div
class="tab-content">
<div id="home" class="tab-pane fade in
active">
<h2>Mike Ross, Manager</h2>
<p>Man, we've been on the road for some time now. Looking forward to lorem
ipsum.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h2>Chandler Bing, Guitarist</h2>
<p>Always a pleasure
people! Hope you enjoyed it as much as I did. Could I BE.. any more
pleased?</p>
</div>
<div id="menu2" class="tab-pane
fade">
<h2>Peter Griffin, Bass player</h2>
<p>I mean, sometimes I enjoy the show, but other times I enjoy other
things.</p>
</div>
</div>Resultado:
Do Blog
Mike Ross, Gerente
O homem, que já está na estrada há algum tempo. Ansioso para lorem ipsum.
Google Maps
Adicionar o Google Maps (Para mais informações, leia o nosso Google Maps Tutoria l).
Use CSS para definir a largura, altura e cor do mapa:
Exemplo
<style>
#googleMap {
width:
100%; /* Span the entire width of the screen */
height: 400px;
/* Set the height to 400 pixels */
-webkit-filter:
grayscale(100%);
filter: grayscale(100%); /* Change
the color of the map to black and white * /
}
</style>
<div id="googleMap"></div>
<!-- Add Google Maps -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("googleMap"),mapProp);
var
marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window,
'load', initialize);
</script>Resultado:
Tente você mesmo "Adicionar uma barra de navegação
Adicionar uma barra de navegação no topo da página que colapsa em telas menores:
Exemplo
<nav class="navbar navbar-default navbar-fixed-top">
<div
class="container-fluid">
<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="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul
class="nav navbar-nav navbar-right">
<li><a href="#home">HOME</a></li>
<li><a href="#band">BAND</a></li>
<li><a href="#tour">TOUR</a></li>
<li><a href="#contact">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"
href="#">MORE
<span class="caret"></span>
</a>
<ul
class="dropdown-menu">
<li><a href="#">Merchandise</a></li>
<li><a
href="#">Extras</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</nav>
Resultado:
Tente você mesmo " | Dica: Direito alinhar os links de navegação com a navbar-right classe. Se você quiser um dos links na barra de navegação para se comportar como um menu suspenso, use o .dropdown classe |
|---|
Estilo O Navbar
Use CSS para personalizar a barra de navegação:
Exemplo
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.9;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn
white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c
!important;
}
/* Remove border color from the collapsible button
*/
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff
;
background-color: #555 !important;
}
/*
Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
background-color: red !important;
}Resultado:
Tente você mesmo "Adicionar Scrollspy
Adicionar scrollspy para atualizar automaticamente links navbar ao rolar:
Exemplo
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<div id="band" class="container">
<div id="tour"
class="container">
<div id="contact" class="container"> Tente você mesmo " Adicionar um rodapé
1. Criar um <footer> elemento e adicionar algum texto.
2. Use CSS para estilizar o rodapé.
3. Adicione um ícone "Seta para cima", o que levará o usuário para o topo da página, quando clicado.
4. Use jQuery para inicializar o plug-in dica:
Exemplo
<style>
/* Add a dark background color to the footer */
footer {
background-color: #2d2d30;
color:
#f5f5f5;
padding: 32px;
}
footer a {
color: #f5f5f5;
}
footer
a:hover {
color: #777;
text-decoration: none;
}
</style>
<footer class="text-center">
<a class="up-arrow" href="#myPage" data-toggle="tooltip"
title="TO TOP">
<span class="glyphicon glyphicon-chevron-up"></span>
</a><br><br>
<p>Bootstrap Theme Made By <a href="http://www.w3ii.com"
data-toggle="tooltip" title="Visit w3ii">www.w3ii.com</a></p>
</footer>
<script>
$(document).ready(function(){
// Initialize Tooltip
$('[data-toggle="tooltip"]').tooltip();
})
</script>Resultado:
Tente você mesmo "Adicionando rolagem suave
Use jQuery para adicionar rolagem suave (ao clicar nos links na barra de navegação):
Exemplo
<script>
$(document).ready(function(){
// Add
smooth scrolling to all links in navbar + footer link
$(".navbar
a, footer a[href='#myPage']").on('click', function(event) {
// Prevent default anchor
click behavior
event.preventDefault();
// Store hash
var hash =
this.hash;
// Using jQuery's animate() method to add smooth page
scroll
// The optional number (900) specifies the number of milliseconds
it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash
(#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
})
</script> Tente você mesmo " Toque final
Personalize o seu tema, adicionando uma fonte que você gosta. Temos usado "Montserrat" e "Lato" 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" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
Depois, você pode usá-los em sua página:
Exemplo
body {
font: 400 15px/1.8 Lato, sans-serif;
color: #777;
}
.navbar {
font-family:
Montserrat, sans-serif;
}Nós também adicionamos algum estilo extra para alguns elementos:
Exemplo
/* Overwrite default styles of h3 and h4 */
h3, h4 {
margin: 10px 0 30px 0;
letter-spacing: 10px;
font-size: 20px;
color: #111;
}
/* Remove rounded borders on input fields */
.form-control {
border-radius: 0;
}
/* Disable the ability to resize textareas */
textarea {
resize: none;
} Tente você mesmo "