jueves, 3 de febrero de 2022

Solución bootstrap 7

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Bootstrap 7</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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-top: 1em;">

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Inicio</a></li>
      <li><a href="#">Ganadores</a></li>
  <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Protagonistas
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Judas Priest</a></li>
          <li><a href="#">Iron Maiden</a></li>
          <li><a href="#">Black Sabbath</a></li>
  <li><a href="#">Ozzy Osbourne</a></li>
        </ul>
      </li>
  <li><a href="#">Ediciones anteriores</a></li>
  <li><a href="#">Galeria</a></li>
  <li><a href="#">Contacto</a></li>
    </ul>
<ul class="nav navbar-nav navbar-right">
  <li><a href="#"><span class="glyphicon glyphicon-music"></span> Premios de heavy metal</a></li>
    </ul>
</div>
</nav>

<div id="myCarousel" class="carousel slide" style="margin-top:45px;" data-ride="carousel" data-pause="hover" data-interval="2500">
  <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>
<li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner">
     <div class="item active">
      <img src="fotos/iron.jpg" alt="Iron Maiden">
    </div>

    <div class="item">
      <img src="fotos/sabbath.png" alt="Black Sabbath">
  <div class="carousel-caption">
        <h1>ROCK FEST BARCELONA!!!</h1>
      </div>
    </div>

    <div class="item">
      <img src="fotos/metallica.jpg" alt="Metallica">
  <div class="carousel-caption">
        <h1>ROCK FEST BARCELONA!!!</h1>
      </div>
    </div>

<div class="item">
      <img src="fotos/kiss.jpg" alt="Kiss">
    </div>
  </div>
</div>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Inicio</a></li>
      <li><a href="#">Ganadores</a></li>
  <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Protagonistas
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Judas Priest</a></li>
          <li><a href="#">Iron Maiden</a></li>
          <li><a href="#">Black Sabbath</a></li>
  <li><a href="#">Ozzy Osbourne</a></li>
        </ul>
      </li>
  <li><a href="#">Ediciones anteriores</a></li>
  <li><a href="#">Galeria</a></li>
  <li><a href="#">Contacto</a></li>
    </ul>
<ul class="nav navbar-nav navbar-right">
  <li><a href="#"><span class="glyphicon glyphicon-music"></span> Premios de heavy metal</a></li>
    </ul>
</div>
</nav>

</div>
</body>
</html>
No hay comentarios:

Solución Bootstrap 8

Nuevoindex.html

<!DOCTYPE html>

<html lang="es">

<head>
  <title>Bootstrap 8</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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body class="text-center" style="background-color:#BAB5B4;">
    <div class="container">
<div class="well" style="margin-top:10px;">
<h1>Cursos de programación!</h1>
<p>Aprende con nosotros los lenguajes de programación web más modernos del mercado</p>
</div>
<h2 class="well" style="background-color:#BAB5B4;">Lenguajes en el entorno cliente</h2>
<div class="row">
    <div class="col-sm-4">
<img src="html.png" class="img-rounded" alt="html5" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="css.png" class="img-rounded" alt="css" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="javascript.png" class="img-rounded" alt="javascript" width="200" height="200">
</div>
</div>
<h2 class="well" style="background-color:#BAB5B4;">Lenguajes en el entorno servidor</h2>
<div class="row">
    <div class="col-sm-4">
<img src="wordpress.png" class="img-rounded" alt="wordpress" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="php.png" class="img-rounded" alt="php" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="java.png" class="img-rounded" alt="java" width="200" height="200">
</div>
</div>
<br>

<ul class="pager">
  <li class="previous"><a href="index1.html">Previous</a></li>
  <li class="next"><a href="index2.html">Next</a></li>
</ul>
      <hr>
      <footer class="text-left"> 
  <p class="pull-right">&copy; Prin Enterprise.<br>&copy; Todos los derechos reservados.</p>
  <address>
<strong>Diseñado por Colores S.A.</strong><br>
Carrer de la Jota, 123<br>
St. Andreu, Barcelona<br>
<abbr title="Teléfono">Tel:</abbr> 944123456
  </address>
      </footer>
    </div>
  </body>
</html>


Index1.html

<!DOCTYPE html>

<html lang="es">

<head>
  <title>Bootstrap 8</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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body class="text-center" style="background-color:#BAB5B4;">
    <div class="container">
<div class="well" style="margin-top:10px;">
<h1>Lenguajes en el entorno cliente!</h1>
<p>Aprende con nosotros los lenguajes de programación web más modernos del mercado</p>
</div>

<div class="row text-center">
    <div class="col-sm-4">
<img src="html.png" class="img-rounded" alt="html5" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="css.png" class="img-rounded" alt="css" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="javascript.png" class="img-rounded" alt="javascript" width="200" height="200">
</div>
</div>
<br>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
¿Qué es HTML?</a>
  </h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
  <div class="panel-body">HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros.</div>
</div>
  </div>
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
CSS</a>
  </h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
  <div class="panel-body">Hojas de estilo en cascada (o CSS, siglas en inglés de Cascading Stylesheets) es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.2​ Es muy usado para establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS... También permite aplicar estilos no visuales, como las hojas de estilo auditivas.</div>
</div>
  </div>
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Javascript</a>
  </h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
  <div class="panel-body">JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,3​ basado en prototipos, imperativo, débilmente tipado y dinámico. Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas4​ aunque existe una forma de JavaScript del lado del servidor(Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo.</div>
</div>
  </div>
</div>
<ul class="pager">
  <li class="previous"><a href="index2.html">Previous</a></li>
  <li class="next"><a href="nuevoindex.html">Next</a></li>
</ul>
      <hr>
      <footer class="text-left"> 
  <p class="pull-right">&copy; Prin Enterprise.<br>&copy; Todos los derechos reservados.</p>
  <address>
<strong>Diseñado por Colores S.A.</strong><br>
Carrer de la Jota, 123<br>
St. Andreu, Barcelona<br>
<abbr title="Teléfono">Tel:</abbr> 944123456
  </address>
      </footer>
    </div>
  </body>
</html>


Index2.html

<!DOCTYPE html>

<html lang="es">

<head>
  <title>Bootstrap 8</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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body class="text-center" style="background-color:#BAB5B4;">
    <div class="container">
<div class="well" style="margin-top:10px;">
<h1>Lenguajes en el entorno servidor!</h1>
<p>Aprende con nosotros los lenguajes de programación web más modernos del mercado</p>
</div>

<div class="row text-center">
    <div class="col-sm-4">
<img src="wordpress.png" class="img-rounded" alt="wordpress" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="php.png" class="img-rounded" alt="php" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="java.png" class="img-rounded" alt="java" width="200" height="200">
</div>
</div>
<br>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
¿Qué es Wordpress?</a>
  </h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
  <div class="panel-body">Aunque esté aquí incluido Wordpress no es un lenguaje, pero sí que necesita de un servidor para funcionar. WordPress es un sistema de gestión de contenidos o CMS (por sus siglas en inglés, Content Management System) enfocado a la creación de cualquier tipo de página web. Originalmente alcanzó una gran popularidad en la creación de blogs, para convertirse con el tiempo en una de las principales herramientas para la creación de páginas web comerciales. Está desarrollado en el lenguaje PHP para entornos que ejecuten MySQL y Apache, bajo licencia GPL y es software libre.</div>
</div>
  </div>
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
¿Es útil PHP con MySQL?</a>
  </h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
  <div class="panel-body">Muy útil. PHP es un lenguaje de programación de propósito general de código del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico. Fue uno de los primeros lenguajes de programación del lado del servidor que se podían incorporar directamente en un documento HTML en lugar, de llamar a un archivo externo que procese los datos. El código es interpretado por un servidor web con un módulo de procesador de PHP que genera el HTML resultante. <br><br>MySQL es un sistema de gestión de bases de datos relacional desarrollado bajo licencia dual: Licencia pública general/Licencia comercial por Oracle Corporation y está considerada como la base datos de código abierto más popular del mundo,1​2​ y una de las más populares en general junto a Oracle y Microsoft SQL Server, sobre todo para entornos de desarrollo web.</div>
</div>
  </div>
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Y ¿Java?</a>
  </h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
  <div class="panel-body">Java es un lenguaje de programación de propósito general, concurrente, orientado a objetos, que fue diseñado específicamente para tener tan pocas dependencias de implementación como fuera posible. Su intención es permitir que los desarrolladores de aplicaciones escriban el programa una vez y lo ejecuten en cualquier dispositivo (conocido en inglés como WORA, o "write once, run anywhere"), lo que quiere decir que el código que es ejecutado en una plataforma no tiene que ser recompilado para correr en otra. Java es, a partir de 2012, uno de los lenguajes de programación más populares en uso, particularmente para aplicaciones de cliente-servidor de web, con unos diez millones de usuarios reportados.</div>
</div>
  </div>
</div>
<ul class="pager">
  <li class="previous"><a href="nuevoindex.html">Previous</a></li>
  <li class="next"><a href="index1.html">Next</a></li>
</ul>
      <hr>
      <footer class="text-left"> 
  <p class="pull-right">&copy; Prin Enterprise.<br>&copy; Todos los derechos reservados.</p>
  <address>
<strong>Diseñado por Colores S.A.</strong><br>
Carrer de la Jota, 123<br>
St. Andreu, Barcelona<br>
<abbr title="Teléfono">Tel:</abbr> 944123456
  </address>
      </footer>
    </div>
  </body>
</html>

Solución bootstrap 6

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Bootstrap 6</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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-top: 1em;">
<div class="well">
<h1>Inscríbete a la oferta de trabajo</h1>
<p>Rellena los datos que aparecen a continuación.</p>
</div>
<form role="form">
  <div class="form-group">
    <label for="nombre">Nombre</label>
    <input type="text" class="form-control" id="nombre"
           placeholder="Introduce tu nombre">
  </div>
  <div class="form-group">
    <label for="apellido">Apellido</label>
    <input type="text" class="form-control" id="apellido"
           placeholder="Introduce tu apellido">
  </div>
  <div class="radio">
 <strong>Sexo:</strong>
 <label><input type="radio" name="opciones" id="opciones_1" value="opcion_1" checked>
Hombre</label>
 <label><input type="radio" name="opciones" id="opciones_2" value="opcion_2">
Mujer</label>
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email"
           placeholder="Introduce tu email">
  </div>
  <div class="form-group">
    <label for="contrasena">Contraseña</label>
    <input type="password" class="form-control" id="contrasena"
           placeholder="Introduce una contraseña">
  </div>
  <div class="form-group">
    <label for="contrasena">Carta de presentación</label>
    <textarea class="form-control" rows="5"></textarea>
  </div>
  <div class="form-group">
    <label for="archivo">Adjuntar un archivo con el currículum</label>
    <input type="file" id="archivo">
    <p class="help-block">Solo es posible adjuntar documentos doc o pdf.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Activa esta opción si quieres que adjuntemos tu currículum a nuestra base de datos
    </label>
  </div>
  <button type="submit" class="btn btn-default">Enviar</button>
</form>


</div>
</body>
</html>
1 comentario:

miércoles, 2 de febrero de 2022

Bootstrap final - curriculum

 






No hay comentarios:

Solución bootstrap4

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Bootstrap 4</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
          <div class="jumbotron mt-3">
            <h1>TravelWorld EDE!</h1>
            <p>Conoce todos los destinos que ofrecemos para que tengas el mejor viaje de tu vida...</p>
          </div>
          <div class="row">
            <div class="col-12 col-sm-6 col-lg-4">
              <h2>Marruecos</h2>
              <p>Excelente destino: cercano, caluroso, barato, con una gastronomía única. Disfrute de su estancia en Marrakech, Casablanca o Ifni, lugares de ensueño para disfrutar toda la familia.</p>
              <p><a class="btn btn-default" href="#">Ver detalles &raquo;</a></p>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
              <h2>Uzbekistán</h2>
              <p>Visita a la ciudad sagrada de Samarcanda, belleza única desde tiempos inmemorables. Lugar de paso de la ruta de la seda. Posibilidad de hacer rutas por la montaña. Vuelos baratos desde Madrid y Barcelona.</p>
              <p><a class="btn btn-default" href="#">Ver detalles &raquo;</a></p>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
              <h2>Turquía</h2>
              <p>Variedad sin límites. Desde vuelos en globo en Capadocia, hasta paisajes sin límites en el norte, y arquitectura asombrosa en Estambul. Vuelos baratos desde Barcelona.</p>
              <p><a class="btn btn-default" href="#">Ver detalles &raquo;</a></p>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
              <h2>Perú</h2>
              <p>Viaja hasta Machu Picchu, antiguo poblado andino—incaica construido antes del siglo XV en el promontorio rocoso que une las montañas Machu Picchu y Huayna Picchu.</p>
              <p><a class="btn btn-default" href="#">Ver detalles &raquo;</a></p>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
              <h2>Japón</h2>
              <p>Es desde hace varias décadas una de las grandes potencias económicas mundiales, y posee barrios exclusivos sobre manga, tecnología, museos y parques enormes para los amantes de la naturaleza.</p>
              <p><a class="btn btn-default" href="#">Ver detalles &raquo;</a></p>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
              <h2>Kosovo</h2>
              <p>Estado con reconocimiento limitado ubicado en la península balcánica, en el sureste de Europa al que se puede acceder fácilmente desde Macedonia.</p>
              <p><a class="btn btn-default" href="#">Ver detalles &raquo;</a></p>
            </div>
      </div>
      <hr>
      <footer>
<p class="float-right">&copy; EDE Enterprise.<br>&copy; Todos los derechos reservados.</p>
<address class="float-left">
  <strong>Empresa Ángel S.A.</strong><br>
  Avenida San Esteve 123<br>
  Sestao, Bizkaia<br>
  <abbr title="Teléfono">Tel:</abbr> 944123456
</address>
      </footer>
    </div>
  </body>
</html>

Solución bootstrap3

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Bootstrap 3</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="jumbotron mt-3">
  <div class="container text-center">
<h1>Página de mis viajes</h1>     
<p>Quiero mostrar los viajes que he realizado</p>
  </div>
</div>
<div class="container-fluid text-center">
  <div class="row">
<div class="col-3">
  <p><button type="button" class="btn btn-secondary">
            <a href="#">I love to travel</a>
            <span class="fas fa-cloud"></span></button></p>
</div>
<div class="col-3">
  <button type="button" class="btn btn-warning">
<span class="fas fa-search"></span>Busca viajes
  </button>
</div>
<div class="col-3">
  <button type="button" class="btn btn-primary disabled">Contrata viaje</button>
</div>
<div class="col-3">
<div class="btn-group">
  <button type="button" class="btn btn-primary">Patrimonios cercanos</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"></button>
  <ul class="dropdown-menu" role="menu">
<li><a href="#">Sagrada Familia</a></li>
<li><a href="#">Obras de Antoni Gaudí</a></li>
<li><a href="#">Monasterio de Poblet</a></li>
<li><a href="#">Conjunto arqueológico de Tarraco</a></li>
  </ul>
</div>
</div>
  </div>
</div><br>
<div class="container-fluid text-center"> 
  <h3>Banderas de los países que he visitado</h3><br> 
  <div class="row">
<div class="col-3">
  <p>Bolivia</p>
  <img src="fotos/bolivia.gif" class="rounded" alt="bolivia" width="200px" height="150px">
</div>
<div class="col-3">
  <p>India</p>
  <img src="fotos/india.png" class="rounded" alt="india" width="200px" height="150px">
</div>
<div class="col-3">
  <p>Marruecos</p>
  <img src="fotos/marruecos.jpg" class="rounded" alt="marruecos" width="200px" height="150px">
</div>
<div class="col-3">
  <p>Mongolia</p>
  <img src="fotos/mongolia.png" class="rounded" alt="mongolia" width="200px" height="150px">
</div>
  </div>
</div><br><br>
<div class="container-fluid text-center">   
  <div class="row">
<div class="col-3">
  <p>Kazajstan</p>
  <img src="fotos/kazajstan.png" class="rounded-circle" alt="kazajstan" width="200px" height="150px">
</div>
<div class="col-3">
  <p>Letonia</p>
  <img src="fotos/letonia.png" class="rounded-circle" alt="letonia" width="200px" height="150px">
</div>
<div class="col-3">
  <p>Vaticano</p>
  <img src="fotos/vaticano.png" class="rounded-circle" alt="vaticano" width="200px" height="150px">
</div>
<div class="col-3">
  <p>Singapur</p>
  <img src="fotos/singapur.gif" class="rounded-circle" alt="singapur" width="200px" height="150px">
</div>
  </div>
</div><br>
<footer class="text-center">
<div class="alert alert-success alert-dismissible">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>Genial!</strong> Has pasado el examen, puedes pasar a la siguiente fase.
</div>
<p>Soy el footer... bien!!!</p>
</footer>
</div>
</body>
</html>

Bootstrap8

Este ejercicios consta de tres archivos html, que son los que se muestran a continuación. Sirven para introducir un elemento muy característico como el acordeón, que puede verse debajo de las fotografías. Esta es la vista normal, pero las imágenes irán en fila de a 1 cuando vemos la página con un móvil. No  habrá menú, si pulsamos izquierda y derecha pasaremos al resto de archivos html.




Bootstrap7

Para realizar este ejercicio hay que revisar las secciones de Navbar y de Carrousel: https://getbootstrap.com/docs/5.1/layout/grid/

Las imágenes deberán pasar solas cada 7 segundos, no tener en los extremos flechas, pero debajo sí las ayudas para ir a una imagen u otra.






Solución bootstrap2

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Bootstrap 2</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="jumbotron">
        <h1>Soy un jumbotron</h1>
        <p>Soy una caja enorme que está preparada para llamar la atención de la gente que visita nuestra página web.</p>
    </div>
    <div class="row">
        <div class="col-4">
            <a href="#">
            <figure>
                <img src="fotos/perros1.jpg" class="img-thumbnail" alt="Perros">
                <figcaption>
                    <h2 class="h5 font-weight-bold font-italic">Peluquería</h2>
                    <p class="text-small text-muted font-italic">Vaya pelos, necesito ir a la peluquería, ¿me llevas?</p>
                </figcaption>
            </figure>
          </a>
        </div>
        <div class="col-4">
            <a href="#">
            <figure>
                <img src="fotos/perros2.jpg" class="rounded-circle img-thumbnail" alt="Perros">
                <figcaption class="card-img-bottom">
                    <h2 class="h5 font-weight-bold font-italic">Tengo sed</h2>
                    <p class="text-small text-muted font-italic">¿Podrías darme un poco de agua?</p>
                </figcaption>
            </figure>
          </a>
        </div>
        <div class="col-4">
            <a href="#">
            <figure>
                <img src="fotos/perros3.jpg" class="img-thumbnail" alt="Perros">
                <figcaption>
                    <h2 class="h5 font-weight-bold font-italic">Ewok</h2>
                    <p class="text-small text-muted font-italic">Soy un ewok y debería estar en una película de ficción.</p>
                </figcaption>
            </figure>
            </a>
        </div> 
    </div>
    <div class="row">
      <div class="col-3 text-center">
        <a class="btn btn-primary">btn-primary en un enlace</a>
      </div>
      <div class="col-3 text-center">
        <a class="btn btn-success">btn-success en un enlace</a>
      </div>
      <div class="col-3 text-center">
        <a class="btn btn-warning">btn-warning en un enlace</a>
      </div>
      <div class="col-3 text-center">
        <a class="btn btn-danger">btn-danger en un enlace</a>
      </div>
    </div>
</div>
</body>
</html>

Solución bootstrap1

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Bootstrap 1</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Encabezado 1 de una página en bootstrap</h1>
  <h2 class="card-header">Encabezado número 2 de la página</h2>
  <p>Esta frase está aquí para mostrar el texto normal de un párrafo en bootstrap.</p>
  <small>Yo, sin embargo, estoy en una etiqueta small</small>
  <div class="row">
  <div class="col-3" style="border:1px solid black;">Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación</div>
  <div class="col-3" style="border:1px solid black;">Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación</div>
  <div class="col-3" style="border:1px solid black;">Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación</div>
  <div class="col-3" style="border:1px solid black;">Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación</div>
  </div>
  <div class="row">
  <div class="col-8" style="border:1px solid black;">El framework es gratuito y se puede usar para fines comerciales</div>
  <div class="col-4" style="border:1px solid black;">El framework es gratuito y se puede usar para fines comerciales</div>
  </div>
 
  <mark>Si me quieres destacar, yo soy tu etiqueta (mark)</mark>
  <blockquote class="blockquote text-right">
<p>Yo puedo ser interesante, una .blockquote</p>
  </blockquote>
 
  <p>Prueba la etiqueta <code>code</code>, ya veras que bien</p>
  <p>Y si quieres saber las teclas rápidas son estas: <kbd>ctrl+f</kbd>, <kbd>ctrl+t</kbd> y <kbd>ctrl+s</kbd></p>

  <p class="text-muted pull-right">Soy la clase text-muted aplicada a un párrafo.</p>
  <p class="text-primary">Soy la clase text-primary aplicada a un párrafo.</p>
  <p class="text-success pull-right">Soy la clase text-success aplicada a un párrafo.</p>
  <p class="text-info">Soy la clase text-info aplicada a un párrafo.</p>
  <p class="text-warning pull-right">Soy la clase text-warning aplicada a un párrafo.</p>
  <p class="text-danger">Soy la clase text-danger aplicada a un párrafo.</p>
 
  <p class="bg-primary text-left">Pues yo soy un párrafo con una clase bg-primary</p>
  <p class="bg-success text-center">Pues yo soy un párrafo con una clase bg-success y otra text-center</p>
  <p class="bg-info text-right">Pues yo soy un párrafo con una clase bg-info y otra text-right</p>
  <p class="bg-warning text-center">Pues yo soy un párrafo con una clase bg-warning</p>
  <p class="bg-danger text-right">Pues yo soy un párrafo con una clase bg-danger</p>
 
  <p class="lead">Probando, probando clase lead</p>

  <ul class="list-inline">
    <li class="list-inline-item">Que me dices</li>
    <li class="list-inline-item">Si te digo que soy</li>
    <li class="list-inline-item">una lista "list-inline"?</li>
  </ul>
 
    <table class="table table-striped table-hover table-condensed">
    <thead>
      <tr>
        <th>Encabezado 1</th>
        <th>Encabezado 2</th>
        <th>Encabezado 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Yo soy</td>
        <td>una clase</td>
        <td>table</td>
      </tr>
      <tr>
        <td>Que también</td>
        <td>soy clase</td>
        <td>table-striped</td>
      </tr>
      <tr>
        <td>Y también</td>
        <td>soy clase</td>
        <td>table-hover</td>
      </tr>
  <tr>
        <td>Y también</td>
        <td>soy clase</td>
        <td>table-condensed</td>
      </tr>
  <tr class="table-success">
    <td>Y la fila</td>
        <td>es clase success</td>
        <td>probad info, warning y danger</td>
  </tr>
    </tbody>
  </table>

</div>

</body>
</html>

Bootstrap6


martes, 1 de febrero de 2022

Bootstrap4


En este caso únicamente se pondrán las cajas de 2 en 2 con la tablet y una debajo de la otra cuando estén en tamaño móvil. El footer debajo una cosa de la otra con los móviles.

Bootstrap3

Este ejercicio es igual que el anterior cuando la resolución es la del ordenador. Si vamos reduciendo la ventana del navegador, a la altura de una tableta se pondrán todas las banderas y botones de dos en dos y cuando sea un móvil estarán de una en una.








Bootstrap2

El jumbotron era una opción que había en las anteriores versiones de Bootstrap, no hace falta hacerlo igual.
La idea es que los perros (figure y figcaption con rounded-circle la que está en medio) estén de tres en tres hasta que llegue el tamaño móvil y se pongan uno encima de otro.
Con los botones inferiores (https://getbootstrap.com/docs/5.1/components/buttons/), de 4 en 4, con tablet de 2 en 2 y con móvil uno encima de otro.




Bootstrap 1



Suscribirse a: Entradas (Atom)