Autor: Juan Pablo Fuentes

Formador de programación y bases de datos

Layout bootstrap responsive


<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
header{
height: 20vh;
}

footer{height:10vh;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">

</div>
</div>

<div class="row">
<div class="col-md-2 col-sm-12">

</div>
<div class="col-md-8 col-sm-9">

</div>
<div class="col-md-2 col-sm-3">

</div>
</div>

<div class="row">
<div class="col-md-12">

</div>
</div>

</div>
</body>
</html>

Layout bootstrap


<!DOCTYPE html>

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
<header class="row bg-info">
<div class="col-md-12">
<h1>Cabecera</h1>
</div>
</header>
<main class="row">
<aside class="col-md-3 bg-success"><h1>hola</h1></aside>
<section class="col-md-9"><h1>que</h1></section>
</main>
<footer class="row bg-dark">
<div class="col-md-12">
<p class="text-light">Pie de la página</p>
</div>
</footer>
</div>
</body>
</html>

Ejemplos bootstrap


<!DOCTYPE html>

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
nav{
background-color: #0ff72d;
color:black !important;
}
nav .navbar-nav .nav-item .nav-link {
color:black ;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark sticky-top">
<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</nav>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<a href="#" data-placement="right" data-toggle="tooltip" title="Hola">Hover over me</a>
<a href="#" data-toggle="popover" title="El título es la cabecera" data-content="Contenido del popover">Toggle popover</a>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">

<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>

<!-- Modal body -->
<div class="modal-body">
<figure>

<img data-placement="right" data-toggle="tooltip" title="Hola" class="img-thumbnail" src="img/mascota.jpg" alt=""/>
<figcaption>Amor a los animales</figcaption>
</figure>
</div>

<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>

</div>
</div>
</div>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Gatos</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Perros</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Otras alimañas</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu3">Contacto</a>
</li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="home">
<div class="card" style="width:200px">
<img class="card-img-top" src="img/gato.jpg" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">Gatito</h4>
<p class="card-text">Un precioso gatito que puede ser tuyo visitando nuestra tienda</p>
<a href="#" class="btn btn-primary">Detalles</a>
</div>
</div>
</div>
<div class="tab-pane container fade" id="menu1">
<figure class="shadow-lg">

<img class="img-thumbnail" src="img/mascota.jpg" alt=""/>
<figcaption>Amor a los animales</figcaption>
</figure>
</div>
<div class="tab-pane container fade" id="menu2">
<p>La palabra alimaña es una deformación metastética de la palabra animalia que es un plural del vocablo latino1​ singular animal. Fue usado por los naturalistas para englobar a aquellas especies cuyos rasgos son confusos, raros o difíciles de describir y que con el tiempo se ha usado para identificar a aquellas especies de animales perjudiciales, repulsivos o dañinos que conviven con el medio humano.</p>

<p> Otras derivaciones homofónicas hoy ya sin uso del vocablo Alimaña proviene del español antiguo que identificaba a Alemania como Alimaña, quedando registrada esta acepción tanto en la fonética de préstamo hispano en el lenguaje aymará (Bolivia) y en las literaturas españolas2​ del siglo XVIII y que no tienen ninguna relación con la actual acepción de la palabra.</p>
</div>
<div class="tab-pane container fade" id="menu3">
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>

Ejemplo Bootstrap


<!DOCTYPE html>

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="bootstrap.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h1 class="display-1">Ventas 2018</h1>
<p>Informe de ventas anual de la empresa tornillos Martínez</p>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Mes</th>
<th>Cantidad</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td>Enero</td>
<td>10</td>
<td><a href="#" class="btn btn-outline-info">Detalle</a> <a href="#" class="btn btn-outline-danger">Borrar</a></td>
</tr>
<tr >
<td>Febrero</td>
<td>20</td>
<td><div class="btn-group"><a href="#" class="btn btn-outline-info">Detalle</a> <a href="#" class="btn btn-outline-danger">Borrar</a></div></td>
</tr>
<tr>
<td>Marzo</td>
<td>30</td>
<td><a href="#" class="btn btn-outline-info">Detalle</a> <a href="#" class="btn btn-outline-danger">Borrar</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Galería imágenes

html:


<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="galeria.css" rel="stylesheet" type="text/css"/>

</head>
<body>
<h1>Galería de imágenes</h1>
<section id="galeria">
<figure>
<img src="img/gato.jpg" alt=""/>
<figcaption>Un lindo gatito</figcaption>
</figure>
<figure>

<img src="img/mascota.jpg" alt=""/>
<figcaption>Amor a los animales</figcaption>
</figure>
<figure>

<img src="img/gato.jpg" alt=""/>
<figcaption>El mejor amigo del hombre</figcaption>
</figure>
<figure>
<img src="img/gato.jpg" alt=""/>
<figcaption>Un lindo gatito</figcaption>
</figure>
<figure>

<img src="img/mascota.jpg" alt=""/>
<figcaption>Amor a los animales</figcaption>
</figure>
<figure>

<img src="img/gato.jpg" alt=""/>
<figcaption>El mejor amigo del hombre</figcaption>
</figure>
</section>
</body>
</html>

css:


#galeria{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#galeria figure{
width:30%;
margin:1em 0;
}

#galeria figure img{
width: 100%;
}

@media (max-width: 900px) {
#galeria figure{
width:45%
}
}
@media (max-width: 600px) {
#galeria figure{
width:100%
}
}

Layout media query

Html:


<!DOCTYPE html>

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="layout.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header></header>
<main>
<aside>

</aside>
<section></section>
</main>
<footer></footer>
</body>
</html>

css:


header{
height:10vh;
background-color: #BBBBBB;
}
main{
height:80vh;
display:flex;
}
aside{
background-color: #BBBB66;
flex-grow: 1;
}
section{
background-color: #66BBBB;
flex-grow: 5;
}
footer{
height:10vh;
background-color: #BB66BB;

}
@media (max-width: 800px) {
main{
flex-direction: column;
}
}

Layou One Page con flexbox

Css:


*{
font-family:Verdana,serif;
}
body{
margin:0;
}
nav{
position:fixed;
background-color: black;
color:white;
width:100%;
padding:10px;
display: flex;
justify-content: space-between;
align-items: baseline;
}
nav ul li {
display: inline-block;
margin-left: 10px;
}
nav ul{

position:relative;
right:40px;

}
nav h2{

}
#imagen{
position: relative;
z-index: -1;
top:2em;
}
#imagen img{
width:100%;
}
#imagen h1{
font-weight: bold;
font-size: 6em;
text-align: center;
position: absolute;
top:0em;
width:100%;
text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3);
color: rgba(255,255,255,0.5);
}
#fotos{
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#fotos figure img{
width: 100%;
height: auto;
}
#fotos figure{
margin: 2%;
border: 1px solid #ccc;
flex-basis: 400px;
box-shadow: 10px 10px 5px #AAAAAA;
opacity:.8;
position:relative;
}
#fotos figure:hover{
border: 1px solid #777;
box-shadow: 10px 10px 5px #555555;
opacity:1;
}
#fotos figcaption{
padding: 15px;
text-align: center;
background-color: white;
}
#textos{
display:flex;
flex-wrap: wrap;
}
#textos article{
width:45%;
margin:2%;
padding:5em 2em;
box-sizing: border-box;
background: linear-gradient(to bottom, #abbaab,#ffffff);
}
#mapa iframe{
width:100%;
height:20em;
}

Layout One Page

html:


<!DOCTYPE html>

<html>
<head>
<title>One Page design</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav>
<h2>Mi empresa</h2>
<ul>
<li>Fotos</li>
<li>Articulos</li>
<li>Mapa</li>
</ul>
</nav>
<section id="imagen">
<h1>Esto es una empresa que mola</h1>
<img src="img/paisaje.jpg" alt=""/>

</section>
<section id="fotos">
<figure>
<img src="img/gato.jpg" alt=""/>
<figcaption>Un lindo gatito</figcaption>
</figure>
<figure>

<img src="img/mascota.jpg" alt=""/>
<figcaption>Amor a los animales</figcaption>
</figure>
<figure>

<img src="img/gato.jpg" alt=""/>
<figcaption>El mejor amigo del hombre</figcaption>
</figure>
</section>
<section id="textos">
<article>
<h1>Esto es una artículo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article>
<h1>Esto es una artículo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article>
<h1>Esto es una artículo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article>
<h1>Esto es una artículo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</section>
<section id="mapa"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d47878.40221632758!2d2.1679048317954788!3d41.40883185920695!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12a4a2efe63f46cd%3A0x2ce5e151b3383c3c!2sNetmind!5e0!3m2!1sca!2ses!4v1525955904487" frameborder="0" style="border:0" allowfullscreen></iframe></section>
</body>
</html>

Css:


*{
font-family:Verdana,serif;
}
body{
margin:0;
}
nav{
position:fixed;
background-color: black;
color:white;
width:100%;
padding:10px;
}
nav ul li {
display: inline-block;
margin-left: 10px;
}
nav ul{
float:right;
position:relative;
right:40px;

}
nav h2{
float:left;
}
#imagen{
position: relative;
z-index: -1;
top:2em;
}
#imagen img{
width:100%;
}
#imagen h1{
font-weight: bold;
font-size: 6em;
text-align: center;
position: absolute;
top:0em;
width:100%;
text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3);
color: rgba(255,255,255,0.5);
}
#fotos{
margin-top: 20px;

}
#fotos figure img{
width: 100%;
height: auto;
}
#fotos figure{
margin: 2%;
border: 1px solid #ccc;
float: left;
width: 29%;
box-shadow: 10px 10px 5px #AAAAAA;
opacity:.8;
position:relative;
}
#fotos figure:hover{
border: 1px solid #777;
box-shadow: 10px 10px 5px #555555;
opacity:1;
}
#fotos figcaption{
padding: 15px;
text-align: center;
background-color: white;
}
#textos article{
float:left;
width:45%;
margin:2%;
padding:5em 2em;
box-sizing: border-box;
background: linear-gradient(to bottom, #abbaab,#ffffff);
}
#mapa iframe{
width:100%;
height:20em;
}