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;
}