Tema de Bootstrap "Simplemente yo"
Crear un tema: "Simplemente yo"
Esta página le mostrará cómo crear un tema de Bootstrap desde cero.
Comenzaremos con una página HTML simple y luego agregaremos más y más componentes, hasta que tengamos un sitio web completamente funcional, personal y receptivo.
El resultado se verá así, y eres libre de modificarlo, guardarlo, compartirlo, usarlo o hacer lo que quieras con él:
Página de inicio HTML
Comenzaremos con la siguiente página HTML:
<!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>
Agregue Bootstrap CDN y coloque elementos en el contenedor
Agregue Bootstrap CDN y un enlace a jQuery y coloque 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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
Agregar color de fondo y texto central
1. Agregue una clase personalizada (.bg-1) al contenedor para agregar un color de fondo.
2. Agregue la .text-centerclase para centrar el texto dentro del contenedor:
Ejemplo
<head>
<style>
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
</style>
</head>
<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
Imagen circular
Forma la imagen en un círculo con la .img-circleclase:
Ejemplo
<img src="bird.jpg" class="img-circle" alt="Bird">
Resultado:
¿Quién soy?
soy un aventurero
Más contenido
Agregue más contenido y colóquelo dentro de nuevos contenedores:
Ejemplo
<head>
<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>
</head>
<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?
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor. A los efectos de llegar a un mínimo, quiénes de los nuestros deben ejercer cualquier empleo sino para aprovechar las consecuencias del mismo.
¿Dónde encontrarme?
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor. A los efectos de llegar a un mínimo, quiénes de los nuestros deben ejercer cualquier empleo sino para aprovechar las consecuencias del mismo.
Agregar relleno
Hagamos que los contenedores se vean bien agregando algo de relleno:
Ejemplo
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>
Resultado:
¿Quién soy?
soy un aventurero
¿Qué soy yo?
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor. A los efectos de llegar a un mínimo, quiénes de los nuestros deben ejercer cualquier empleo sino para aprovechar las consecuencias del mismo.
¿Dónde encontrarme?
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor. A los efectos de llegar a un mínimo, quiénes de los nuestros deben ejercer cualquier empleo sino para aprovechar las consecuencias del mismo.
Agregar un botón
Agregue un botón al contenedor medio:
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?
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor. A los efectos de llegar a un mínimo, quiénes de los nuestros deben ejercer cualquier empleo sino para aprovechar las consecuencias del mismo.
BúsquedaAgregar un icono
Agregue 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:
Modificar el tercer contenedor (agregar cuadrícula)
Agregue tres columnas de igual ancho dentro 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:
¿Dónde encontrarme?
El dolor en sí es importante, pero el dolor aumenta con el proceso de adipiscencia, pero le doy tiempo para reducirlo para que haga un gran trabajo y dolor.
El dolor en sí es importante, pero el dolor aumenta con el proceso de adipiscencia, pero le doy tiempo para reducirlo para que haga un gran trabajo y dolor.
El dolor en sí es importante, pero el dolor aumenta con el proceso de adipiscencia, pero le doy tiempo para reducirlo para que haga un gran trabajo y dolor.
Haz que las imágenes respondan
Agregue la .img-responsiveclase a todas las imágenes.
Añade display:inlinea la primera imagen para obligarla a estar centrada (la .img-responsiveclase añade display:block
a la imagen, lo que la hace saltar a la izquierda de la pantalla).
Si desea que la imagen abarque todo el ancho de la pantalla cuando comience a apilarse, agréguela width:100%a la imagen.
Al abrir el ejemplo, recuerde 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">
Agregar una barra de navegación
Add a standard navigation bar at the top of the page with and make it collapsible on smaller screens:
Example
<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>
Result:
Style The Navbar
Use CSS to customize the navigation bar:
Example
.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;
}
Result:
Add a Footer
Add a footer and use CSS to style it:
Example
<style>
.bg-4 {
background-color: #2f2f2f;
color: #ffffff;
}
</style>
<footer class="container-fluid bg-4 text-center">
<p>Bootstrap Theme Made By <a href="https://www.w3schools.com">www.w3schools.com</a></p>
</footer>
Result:
Final Touch
Personalize your Theme by adding a font that you like. We have used "Montserrat" from Google's Font Library.
Link to the font in the
<head> section:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
Then you can use it in the page:
Example
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;}
We have also created a "helper" margin class to add extra space
where we think it's needed; usually after each <h3> and <img> element.
Example
.margin {margin-bottom: 45px;}