Crear un Tema: "Empresas"
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 Company</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Company</h1>
<p>We specialize in blablabla</p>
</body>
</html>Añadir Bootstrap CDN y añadir una pantalla gigante
Añadir Bootstrap CDN y un enlace a jQuery y poner los elementos HTML dentro de un .jumbotron :
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Theme Company</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="jumbotron">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>
</body>
</html>Resultado:
Empresa
Somos especialistas en blablabla
Añadir color de fondo y el Centro de texto
1. Añadir un fondo de color naranja a la pantalla gigante.
2. Añadir la .text-center clase para centrar el texto dentro de la pantalla gigante:
Ejemplo
<style>
.jumbotron {
background-color:
#f4511e;
/* Orange */
color: #ffffff;
}
</style>
<body>
<div class="jumbotron
text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>
</body>Resultado:
Empresa
Somos especialistas en blablabla
Agregar formulario
Añadir un formulario con un campo de entrada y un botón:
Ejemplo
<div class="jumbotron
text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
<form class="form-inline">
<input type="email" class="form-control" size="50" placeholder="Email
Address">
<button type="button" class="btn btn-danger">Subscribe</button>
</form>
</div>Resultado:
Empresa
Somos especialistas en blablabla
Añadir Contenedores
Añadir dos contenedores ( .container-fluid ), y añadir una clase personalizada para el segundo recipiente ( .bg-grey - añade un color de fondo gris):
Ejemplo
<style>
.bg-grey {
background-color: #f6f6f6;
}
</style>
<div class="container-fluid">
<h2>About Company Page</h2>
<h4>Lorem ipsum..</h4>
<p>Lorem ipsum..</p>
<button
class="btn btn-default btn-lg">Get in Touch</button>
</div>
<div class="container-fluid
bg-grey">
<h2>Our Values</h2>
<h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
<p><strong>VISION:</strong> Our vision Lorem ipsum..
</div>Resultado:
Acerca de la Sociedad Page
Vestibulum ..
Vestibulum ..
Nuestros valores
MISIÓN: Nuestra misión lorem ipsum ..
VISION: Nuestra visión Vestibulum ..
Añadir Relleno
Deja para hacer la pantalla gigante y los recipientes se ven bien mediante la adición de un poco de relleno:
Ejemplo
<style>
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 100px 25px;
}
.container-fluid {
padding: 60px
50px;
}
</style>Resultado:
Empresa
Somos especialistas en blablabla
Acerca de la Sociedad Page
Vestibulum ..
Vestibulum ..
Nuestros valores
MISIÓN: Nuestra misión lorem ipsum ..
VISION: Nuestra visión Vestibulum ..
Añadir una cuadrícula
1. Añadir un icono (o el logotipo de la empresa) para cada contenedor.
2. Separar el icono y el "texto sobre" mediante la creación de dos columnas ( .col-sm-8 y .col-sm-4 )
3. Añadir las consultas de medios para centrar la columna "logo" en las pantallas menores de 768 píxeles de ancho.
Ejemplo
<style>
.logo {
font-size: 200px;
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
</style>
<div class="container-fluid">
<div
class="row">
<div class="col-sm-8">
<h2>About Company Page</h2>
<h4>Lorem
ipsum..</h4>
<p>Lorem ipsum..</p>
<button class="btn btn-default btn-lg">Get
in Touch</button>
</div>
<div
class="col-sm-4">
<span
class="glyphicon glyphicon-signal logo"></span>
</div>
</div>
</div>
<div class="container-fluid bg-grey">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon
glyphicon-globe logo"></span>
</div>
<div class="col-sm-8">
<h2>Our Values</h2>
<h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
<p><strong>VISION:</strong> Our vision Lorem ipsum..</p>
</div>
</div>
</div>Resultado:
Acerca de la Sociedad Page
Vestibulum ..
Vestibulum ..
Nuestros valores
MISIÓN: Nuestra misión lorem ipsum ..
VISION: Nuestra visión Vestibulum ..
Agregar servicios de contenedores
Añadir un nuevo contenedor, con columnas de igual ancho 2x3 ( .col-sm-4 ):
Ejemplo
<div class="container-fluid text-center">
<h2>SERVICES</h2>
<h4>What we offer</h4>
<br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon
glyphicon-off"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon
glyphicon-heart"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon
glyphicon-lock"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon
glyphicon-leaf"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon
glyphicon-certificate"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor
sit amet..</p>
</div>
<div
class="col-sm-4">
<span class="glyphicon
glyphicon-wrench"></span>
<h4>HARD
WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
Resultado:
SERVICIOS
Lo que ofrecemos
PODER
Lorem ipsum dolor sit amet ..
AMOR
Lorem ipsum dolor sit amet ..
TRABAJO HECHO
Lorem ipsum dolor sit amet ..
VERDE
Lorem ipsum dolor sit amet ..
CERTIFICADO
Lorem ipsum dolor sit amet ..
TRABAJO DURO
Lorem ipsum dolor sit amet ..
Los iconos de estilo
Añadir una clase personalizada ( .logo-small ) a cada glyphicon en el contenedor "Servicios". Usar CSS para el estilo de ellos:
Ejemplo
/* Add an orange color to all icons and set the font-size */
.logo-small
{
color: #f4511e;
font-size:
50px;
}
.logo
{
color: #f4511e;
font-size:
200px;
}
Resultado:
Acerca de la Sociedad Page
Vestibulum ..
Vestibulum ..
Nuestros valores
MISIÓN: Nuestra misión lorem ipsum ..
VISION: Nuestra visión Vestibulum ..
SERVICIOS
Lo que ofrecemos
PODER
Lorem ipsum dolor sit amet ..
AMOR
Lorem ipsum dolor sit amet ..
TRABAJO HECHO
Lorem ipsum dolor sit amet ..
VERDE
Lorem ipsum dolor sit amet ..
CERTIFICADO
Lorem ipsum dolor sit amet ..
TRABAJO DURO
Lorem ipsum dolor sit amet ..
Añadir Cartera de contenedores
Crear un nuevo contenedor de ancho completo, con 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 al elemento <img>. 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="container-fluid text-center bg-grey">
<h2>Portfolio</h2>
<h4>What we have created</h4>
<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>Yes, we built Paris</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img
src="newyork.jpg" alt="New York">
<p><strong>New York</strong></p>
<p>We built New York</p>
</div>
</div>
<div
class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg" alt="San Francisco">
<p><strong>San Francisco</strong></p>
<p>Yes, San Fran is ours</p>
</div>
</div>
</div>
Resultado:
portafolio
Lo que hemos creado
París
Sí, construimos París
Nueva York
Construimos Nueva York
San Francisco
Sí, San Francisco es nuestro
Imágenes en miniatura Styling
Usar CSS para el estilo de las imágenes. En nuestro ejemplo, hemos tratado de que se vean como tarjetas, mediante la eliminación de su frontera, y establecer un ancho de 100% en cada imagen.
Ejemplo
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
Resultado:
portafolio
Lo que hemos creado
París
Sí, construimos París
Nueva York
Construimos Nueva York
San Francisco
Sí, San Francisco es nuestro
Añadir un carrusel
Añadir un carrusel:
Ejemplo
<h2>What our customers say</h2>
<div id="myCarousel" class="carousel
slide text-center" 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">
<h4>"This company is the
best. I am so happy with the result!"<br><span style="font-style:normal;">Michael
Roe, Vice President, Comment Box</span></h4>
</div>
<div class="item">
<h4>"One word...
WOW!!"<br><span style="font-style:normal;">John Doe, Salesman, Rep Inc</span></h4>
</div>
<div class="item">
<h4>"Could I... BE any more happy with this company?"<br><span style="font-style:normal;">Chandler
Bing, Actor, FriendsAlot</span></h4>
</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:
Lo que dicen nuestros clientes
Inténtalo tú mismo "El estilo del carrusel
Usar CSS para estilizar el carrusel:
Ejemplo
.carousel-control.right, .carousel-control.left {
background-image: none;
color:
#f4511e;
}
.carousel-indicators li {
border-color: #f4511e;
}
.carousel-indicators li.active {
background-color: #f4511e;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item
span {
font-style: normal;
}Resultado:
Lo que dicen nuestros clientes
Inténtalo tú mismo "Añadir Contenedor de precios
Crear un recipiente ancho, con tres columnas de igual ancho ( .col-sm-4 ):
Dentro de cada columna, añadir un panel de:
Ejemplo
<div class="container-fluid">
<div class="text-center">
<h2>Pricing</h2>
<h4>Choose a payment plan that works
for you</h4>
</div>
<div class="row">
<div class="col-sm-4">
<div
class="panel panel-default text-center">
<div class="panel-heading">
<h1>Basic</h1>
</div>
<div class="panel-body">
<p><strong>20</strong> Lorem</p>
<p><strong>15</strong> Ipsum</p>
<p><strong>5</strong> Dolor</p>
<p><strong>2</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div
class="panel-footer">
<h3>$19</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Pro</h1>
</div>
<div class="panel-body">
<p><strong>50</strong> Lorem</p>
<p><strong>25</strong> Ipsum</p>
<p><strong>10</strong> Dolor</p>
<p><strong>5</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div
class="panel-footer">
<h3>$29</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Premium</h1>
</div>
<div class="panel-body">
<p><strong>100</strong> Lorem</p>
<p><strong>50</strong> Ipsum</p>
<p><strong>25</strong> Dolor</p>
<p><strong>10</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div
class="panel-footer">
<h3>$49</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
Resultado:
la fijación de precios
Elija un plan de pago que funcione para usted
BASIC
20 Lorem
15 Ipsum
5 Dolor
2 Sit
Amet sin fin
Pro
50 Lorem
25 Ipsum
10 Dolor
5 Sit
Amet sin fin
Prima
100 Lorem
50 Ipsum
25 Dolor
10 Sit
Amet sin fin
Los paneles de peinado
Usar CSS para el estilo de los paneles:
Ejemplo
.panel {
border: 1px solid #f4511e;
border-radius:0;
transition: box-shadow
0.5s;
}
.panel:hover {
box-shadow: 5px 0px
40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #f4511e;
background-color: #fff
!important;
color: #f4511e;
}
.panel-heading
{
color: #fff !important;
background-color: #f4511e !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius:
0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color:
#fff !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin:
15px 0;
background-color: #f4511e;
color: #fff;
}
Resultado:
la fijación de precios
Elija un plan de pago que funcione para usted
BASIC
20 Lorem
15 Ipsum
5 Dolor
2 Sit
Amet sin fin
Pro
50 Lorem
25 Ipsum
10 Dolor
5 Sit
Amet sin fin
Prima
100 Lorem
50 Ipsum
25 Dolor
10 Sit
Amet sin fin
Agregar contacto de contenedores
Añadir un nuevo contenedor con información de contacto:
Ejemplo
<div class="container-fluid bg-grey">
<h2
class="text-center">CONTACT</h2>
<div class="row">
<div
class="col-sm-5">
<p>Contact us and we'll get back to you
within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span>
Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span>
[email protected]</p>
</div>
<div class="col-sm-7">
<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><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right"
type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>Resultado:
CONTACTO
Póngase en contacto con nosotros y nos pondremos en contacto con usted dentro de 24 horas.
Chicago, EE.UU.
+00 1515151515
Añadir Google Maps
Añadir Google Maps (Para obtener más información, lea nuestra Google Maps Tutoría l):
Ejemplo
<!-- Set height and width with CSS -->
<div id="googleMap" style="height:400px;width:100%;"></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">
<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="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>Resultado:
Inténtalo tú mismo " | Consejo: Haga alinear los botones de navegación con la navbar-right clase. |
|---|
Estilo de la barra de navegación
Usar CSS para personalizar la barra de navegación:
Ejemplo
.navbar {
margin-bottom: 0;
background-color: #f4511e;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing:
4px;
border-radius: 0;
}
.navbar li a, .navbar
.navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav
li.active a {
color: #f4511e !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle
{
border-color: transparent;
color: #fff !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="60">
<div id="about" class="container-fluid">
<div id="services"
class="container-fluid">
<div id="portfolio" class="container-fluid">
<div id="pricing" class="container-fluid">
<div id="contact"
class="container-fluid"> Inténtalo tú mismo " Añadir un pie de página
Añadir un icono "Flecha arriba" al pie de página, que se llevará al usuario a la parte superior de la página cuando se hace clic en:
Ejemplo
<style>
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color:
#f4511e;
}
</style>
<footer class="container-fluid text-center">
<a href="#myPage" title="To Top">
<span class="glyphicon
glyphicon-chevron-up"></span>
</a>
<p>Bootstrap Theme
Made By <a href="http://www.w3ii.com"
title="Visit w3ii">www.w3ii.com</a></p>
</footer>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 Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
.jumbotron {
font-family: Montserrat,
sans-serif;
}
.navbar {
font-family:
Montserrat, sans-serif;
}También hemos añadido un poco de estilo extra para algunos elementos:
Ejemplo
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
} Inténtalo tú mismo " En la diapositiva Elementos
También hemos creado un efecto de animación que se deslice en elementos de desplazamiento. Si desea utilizarlo, basta con añadir el .slideanim clase al elemento que desea deslizarse en, y añadir el siguiente CSS y jQuery (no dude en modificar la duración, la opacidad, por dónde empezar, cuando para deslizarse en, y así):
Ejemplo CSS
.slideanim {visibility:hidden;}
.slide {
/* The
name of the animation */
animation-name: slide;
-webkit-animation-name: slide;
/* The duration of the
animation */
animation-duration: 1s;
-webkit-animation-duration:
1s;
/* Make the element visible */
visibility: visible;
}
/* Go from 0% to 100% opacity (see-through) and specify the percentage
from when to slide in the element along the Y-axis */
@keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-webkit-keyframes
slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}Ejemplo jQuery
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop =
$(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
}); Inténtalo tú mismo "