Crear un tema: "Simply Me"
Esta página le mostrará cómo construir un Bootstrap tema 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 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>Añadir Bootstrap CDN y poner elementos en envase
Añadir Bootstrap CDN y un enlace a jQuery y poner los elementos HTML dentro de un contenedor:
Ejemplo
<!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:
¿Quién soy?
Soy un aventurero
Añadir color de fondo y el Centro de texto
1. Añadir una clase personalizada (.bg-1) al recipiente para añadir un color de fondo.
2. Añadir la .text-center clase para centrar el texto dentro del contenedor:
Ejemplo
<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:
¿Quién soy?
Soy un aventurero
círculo de imagen
Forma a la imagen de un círculo con el .img-circle la clase:
Ejemplo
<img src="bird.jpg"
class="img-circle" alt="Bird">
Resultado:
¿Quién soy?
Soy un aventurero
más contenido
Añadir más contenido y ponerlo dentro de nuevos contenedores:
Ejemplo
<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:
¿Quién soy?
Soy un aventurero
¿Qué soy yo?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed no eiusmod tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Donde encontrarme?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed no eiusmod tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Añadir Relleno
Vamos a hacer los recipientes se ven bien mediante la adición de un poco de relleno:
Ejemplo
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>Resultado:
¿Quién soy?
Soy un aventurero
¿Qué soy yo?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed no eiusmod tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Donde encontrarme?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed no eiusmod tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Añadir un botón
Añadir un botón a mediados del contenedor:
Ejemplo
<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:
¿Qué soy yo?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed no eiusmod tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
BuscarAñadir un icono
Añadir un icono de búsqueda en el botón "Buscar":
Ejemplo
<a href="#" class="btn btn-default btn-lg">
<span
class="glyphicon glyphicon-search"></span> Search
</a>
Resultado:
Inténtalo tú mismo "Modificar El tercer contenedor (Añadir Grid)
Añadir tres columnas de igual ancho en el interior del tercer contenedor ( .col-sm-4 ):
Ejemplo
<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:
Donde encontrarme?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed no eiusmod tempor ut labore et dolore incididunt magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed no eiusmod tempor ut labore et dolore incididunt magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed no eiusmod tempor ut labore et dolore incididunt magna aliqua.
Hacer que las imágenes Responsive
Añadir la .img-responsive clase para todas las imágenes.
Añadir display:inline a la primera imagen para forzarlo a estar centrado (el .img-responsive clase añade display:block a la imagen, lo que hace saltar a la izquierda de la pantalla).
Si desea que la imagen para abarcar todo el ancho de la pantalla cuando empieza a apilar, añadir width:100% a la imagen.
Al abrir el ejemplo, recuerde que debe cambiar el tamaño de la pantalla para ver el efecto de respuesta:
Ejemplo
<!-- 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"> Inténtalo tú mismo " Añadir una barra de navegación
Añadir una barra de navegación estándar en la parte superior de la página y hacer que con plegables en pantallas más pequeñas:
Ejemplo
<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:
Inténtalo tú mismo "Estilo de la barra de navegación
Usar CSS para personalizar la barra de navegación:
Ejemplo
.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:
Inténtalo tú mismo "Añadir un pie de página
Añadir un pie de página y el uso de CSS para diseñarlo:
Ejemplo
<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:
Inténtalo tú mismo "Toque final
Personalizar su Tema por la adición de una fuente que te gusta. Hemos utilizado "Montserrat" 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">
A continuación, se puede utilizar en la página:
Ejemplo
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;} También hemos creado una clase de margen "ayudante" para añadir espacio adicional donde creemos que se necesita; por lo general después de cada <h3> y <img> elemento.