Crear un tema: "La Banda"
Esta página le mostrará cómo construir un tema de rutina de carga a partir de cero.
Vamos a empezar con una simple página HTML, y luego añadir más y más componentes, hasta que tengamos un sitio web completamente funcional, personal y sensible.
El resultado se verá así, y usted es libre de modificar, guardar, compartir, utilizar o hacer lo que quiera con él:
HTML página de inicio
Vamos a empezar con la página HTML siguiente:
<!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>Añadir Bootstrap CDN y agregar un contenedor
Añadir Bootstrap CDN y un enlace a jQuery y poner los elementos HTML dentro de un contenedor ( .container ):
Ejemplo
<!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:
LA BANDA
¡Amamos la música!
Hemos creado una página web banda ficticia. Vestibulum ..
Centrar texto
Añadir la .text-center clase para centrar el texto dentro del contenedor, y utilizar el <em> elemento para hacer que el texto en cursiva "Nos encanta la música":
Ejemplo
<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:
LA BANDA
¡Amamos la música!
Hemos creado una página web banda ficticia. Vestibulum ..
Añadir Relleno
Usar CSS para hacer el envase se ve bien con el relleno:
Ejemplo
.container {
padding: 80px 120px;
}Resultado:
LA BANDA
¡Amamos la música!
Hemos creado una página web banda ficticia. Vestibulum ..
Añadir una cuadrícula
Crear tres columnas de igual ancho ( .col-sm-4 ), añadir texto e imágenes, y ponerlos en el interior del contenedor:
Ejemplo
<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:
LA BANDA
¡Amamos la música!
Hemos creado una página web banda ficticia. Vestibulum ..
Nombre
Nombre
Nombre
círculo de imagen
Forma a la imagen de un círculo con el .img-circle clase.
También hemos añadido un poco de CSS para que las imágenes se ven bien:
Ejemplo
.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:
Nombre
Nombre
Nombre
botes hinchables
Hacer que las imágenes plegable; mostrar contenido extra al hacer clic en cada imagen:
Ejemplo
<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 (haga clic en las imágenes para ver el efecto):
Nombre
El guitarrista y primera voz
Le encanta dar largos paseos en la playa
Miembro desde 1988
Nombre
Batería
Ama drummin '
Miembro desde 1988
Nombre
Bajista
ama matemáticas
Miembro desde 2005
Añadir un carrusel
Crear un carrusel y añadirlo antes de que el contenedor:
Ejemplo
<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:
Nueva York
El ambiente en Nueva York es lorem ipsum.
Chicago
Gracias, Chicago - Una noche que no olvidaremos.
LA
A pesar de que el tráfico era un desastre, que tenía el mejor tiempo jugando en la playa de Venecia!
El estilo del carrusel
Usar CSS para estilizar el carrusel:
Ejemplo
.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:
Nueva York
El ambiente en Nueva York es lorem ipsum.
Chicago
Gracias, Chicago - Una noche que no olvidaremos.
LA
A pesar de que el tráfico era un desastre, que tenía el mejor tiempo jugando en la playa de Venecia!
Añadir tour de contenedores
Añadir un nuevo recipiente y añadir una lista ( .list-group y .list-group-item ) en el interior de la misma.
Añadir una clase personalizada ( .bg-1 ) al recipiente (color de fondo negro) y algunos estilos a sus hijos:
Ejemplo
<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:
FECHAS DE TOUR
Lorem ipsum que se va a jugar un poco de música.
Recuerde que debe reservar sus entradas!
- Septiembre Agotado!
- Octubre Agotado!
- 03 de noviembre
Añadir etiquetas e Insignias
Añadir una etiqueta ( .label ) y una tarjeta de identificación ( .badge ) para resaltar entradas disponibles / vendido:
Ejemplo
<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:
FECHAS DE TOUR
Lorem ipsum que se va a jugar un poco de música.
Recuerde que debe reservar sus entradas!
- Septiembre Agotado!
- Octubre Agotado!
- 03 de noviembre
Añadir imágenes en miniatura
Dentro del contenedor Tour, agregar tres columnas de igual ancho ( .col-sm-4 ):
Dentro de cada columna, añadir una imagen.
A continuación, utilice el .img-thumbnail de clase para dar forma a la imagen de una miniatura.
Normalmente, se añade el .img-thumbnail clase directamente a la <img> elemento. En este ejemplo, hemos colocado un recipiente en miniatura alrededor de la imagen, por lo que podemos especificar un texto de la imagen también.
Ejemplo
<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:
París
Vie. 27 de de noviembre de el año 2015
Nueva York
Sab. 28 de de noviembre de el año 2015
San Francisco
Sol. 29 de de noviembre de el año 2015
Listas de estilo, miniaturas y botones
Usar CSS para el estilo de la lista y las imágenes en miniatura. En nuestro ejemplo, hemos eliminado los bordes redondeados de la lista y hemos tratado de hacer que las imágenes en miniatura como tarjetas, mediante la eliminación de su frontera, y establecer un ancho de 100% en cada imagen.
También hemos modificado los estilos predeterminados de Bootstrap de .btn clase, a un botón negro:
Ejemplo
/* 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:
- Septiembre Agotado!
- Octubre Agotado!
- 03 de noviembre
París
Vie. 27 de de noviembre de el año 2015
Nueva York
Sab. 28 de de noviembre de el año 2015
San Francisco
Sol. 29 de de noviembre de el año 2015
Añadir un modal
En primer lugar, cambiar todos los botones dentro del album de <button class="btn">Buy Tickets</button> a <button class="btn" data-toggle="modal" data-target="#myModal" >Buy Tickets</button> . Estos botones se usan para abrir el modal real.
Para crear el modal, mira el siguiente código:
Ejemplo
<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 (haga clic en el botón "Comprar entradas" para ver el efecto):
Agregar contacto de contenedores
Crear un nuevo contenedor, con dos columnas de anchura desigual ( .col-md-4 y .col-md-8 ).
Añadir iconos informativos con el texto dentro de los primeros controles de columna y la forma en la segunda:
Ejemplo
<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:
Contacto
Amamos a nuestros fans!
Añadir Toggable aquí
Añadir pestañas ( .nav nav-tabs ) dentro del contenedor de contactos, con "citas" de los miembros de la banda:
Ejemplo
<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:
desde el blog
Mike Ross, Gerente
El hombre, que hemos estado en la carretera durante algún tiempo. Mirando hacia adelante a lorem ipsum.
mapas de Google
Añadir Google Maps (Para obtener más información, lea nuestra Google Maps Tutoría l).
Usar CSS para definir la anchura, la altura y el color del mapa:
Ejemplo
<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:
Inténtalo tú mismo "Añadir una barra de navegación
Añadir una barra de navegación en la parte superior de la página que se derrumba en pantallas más pequeñas:
Ejemplo
<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:
Inténtalo tú mismo " | Consejo: Haga alinear el menú de navegación con la navbar-right clase. Si quieres uno de los eslabones de la barra de navegación a comportarse como un menú desplegable, utilice el .dropdown clase |
|---|
Estilo de la barra de navegación
Usar CSS para personalizar la barra de navegación:
Ejemplo
/* 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:
Inténtalo tú mismo "Añadir Scrollspy
Añadir scrollspy para actualizar automáticamente los enlaces al desplazarse navbar:
Ejemplo
<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"> Inténtalo tú mismo " Añadir un pie de página
1. Crear un <footer> elemento y añadir un poco de texto.
2. Uso de CSS para estilizar el pie de página.
3. Añadir un icono "Flecha arriba", que se llevará al usuario a la parte superior de la página cuando se hace clic en.
4. Usar jQuery para inicializar el complemento de información sobre herramientas:
Ejemplo
<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:
Inténtalo tú mismo "Adición de desplazamiento suave
Usar jQuery para añadir el desplazamiento suave (al hacer clic en los enlaces en la barra de navegación):
Ejemplo
<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> Inténtalo tú mismo " Toque final
Personalizar su Tema por la adición de una fuente que te gusta. Hemos utilizado "Montserrat" y "Lato" de Biblioteca de fuentes de Google.
Enlace a la fuente en el <head> sección:
<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">
A continuación, puede utilizarlos en la página:
Ejemplo
body {
font: 400 15px/1.8 Lato, sans-serif;
color: #777;
}
.navbar {
font-family:
Montserrat, sans-serif;
}También hemos añadido un poco de estilo extra para algunos elementos:
Ejemplo
/* 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;
} Inténtalo tú mismo "