¡Hola! Soy Rafa Gómez, cantautor caraqueño comprometido con las causas comunitarias y el crecimiento colectivo; convencido del camino del conocimiento y el corazón; más colaborativo que combativo; convicto y confeso cultor del cambio.
ENUNCIADO:
Realizar un menú plegable (collapse) con una de sus opciones 'Music' desplegable (dropdown ) con bootstrap, para las siguientes opciones:
Welcome
Featured
People
Music
Mixes
Videos
Radio
Aquí pueden ver el código fuente de esta página:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- JQuery -->
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/query.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fondoOscuro {
.background-color: blue;
.color: white;
}
.fondoClaro {
.background-color: lime;
}
footer {
Content: "Rafa Gómez<br>Rafa.Gomez@LaPoste.net";
text-align: right;
height: 10px;
border: 0;
box-shadow: 0 10px 10px -10px #8c8c8c inset;
Padding: 5px;
Top: 10px;
}
</style>
<title>Primer ejercicio con Bootstrap: Menú</title>
</head>
<body>
<header class= "container">
<nav id="Menu" class= "navbar navbar-default">
<div class= "navbar-header"> <!-- Menú colapsable -->
<button type= "button" class= "navbar-toggle" data-toggle= "collapse" data-target= "#MenuPpal">
<span class= "sr-only">Cambiar navegación</span>
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
</button>
<a href= "#" class= "navbar-brand">Rafa Gómez</a>
</div>
<div id= "MenuPpal" class= "collapse navbar-collapse">
<ul class= "nav navbar-nav">
<li><a href="#" title="¡Gracias por venir!" class="current">Bienvenid@s</a></li>
<li class= "dropdown"><a href= "#" class= "dropdown-toggle" data-toggle= "dropdown">Currícula<b class= "caret"></b></a>
<ul class= "dropdown-menu">
<li><a href="https://dl.dropboxusercontent.com/u/3345191/CV%20Rafa%20Musical.pdf" title="cv como Músico" target="_new">Músico</a></li>
<li><a href="https://dl.dropboxusercontent.com/u/3345191/CCS%2087%20CV%20Rafa.pdf" title="cv como Informático" target="_new">Informático</a></li>
</ul>
</li>
<li class= "dropdown"><a href="#" class= "dropdown-toggle" data-toggle= "dropdown">Talleres<b class= "caret"></b></a>
<ul class= "dropdown-menu">
<li><a href="#" tittle= "Trabajo con la palabra">De Músico, Poeta y Loco ...</a></li>
<li><a href="#" tittle= "Concierto/Conversatorio sobre la obra y acción de Alí Primera">Valores con Alí</a></li>
<li><a href="#" tittle= "Elucidación y discusión de las citas biográficas e históricas en el texto homónimo de Silvio
Rodríguez.">Cita con "Cita con Ángeles"</a></li>
<li><a href="#" tittle= "Elucidación y discusión de las citas biográficas e históricas en el texto "Rezo el Credo" de
Aquiles Nazoa.">Las Claves del Credo</a></li>
<li><a href="#" tittle= "Curso sobre el oficio de Cantautor">Formación de Trovadores</a></li>
<li><a href="#" tittle= "Ejercicios para aprender a discutir">Escuela de Debate</a></li>
</ul>
</li>
<li class= "dropdown"><a href="#" class= "dropdown-toggle" data-toggle= "dropdown">Música<b class= "caret"></b></a>
<ul class= "dropdown-menu">
<li><a href="#" title="¿Qué carajos es "Featured"">Featured</a></li>
<li><a href= "#" title= "Compañeros de Cantos y Labores">Los Panas</a></li>
<li><a href="https://www.reverbnation.com/RafaGomez" title="Mi página en Reverbnation" target="_new">Música</a></li>
<li><a href="#" title="¿Qué carajos es "Mixes"">Mixes</a></li>
<li><a href="https://www.youtube.com/watch?v=nAoAwE78u1A&list=PLg3Lw7PJi3UiaYjMxaghwxzndSs2Upgtg" title="Mi canal en YouTube" target="_new">Videos</a></li>
<li><a href="http://www.radiogato.com/Radiogato/Rafa.html" title="Será en "Radio Gato"" target="_new">Radio</a></li>
</ul>
</li>
<li><a href="mailto:DeMusicoPoetayLoco@gmail.com" title="Mándame un correo a DeMusicoPoetayLoco@gmail.com" target= "_new" >Escríbeme</a></li>
</ul>
</div>
</nav>
</header>
<div class= "container">
<div id= "Presentación" class="main row">
<div id= "Fotico" class= ".col-sm-12 .col-md-6 .col-lg-4">
<img src="/Imagenes/Rafa Feliz.jpg">
</div>
<div id="Acerca" class= ".col-sm-12 .col-md-6 .col-lg-4">
<p>
¡Hola!
Soy Rafa Gómez, cantautor caraqueño comprometido con las
causas comunitarias y el crecimiento colectivo; convencido del
camino del conocimiento y el corazón; más colaborativo que
combativo; convicto y confeso cultor del cambio.
</p>
</div>
<div id= "Enunciado" class= ".col-md-12 .col-lg-4">
<p class= "bg-primary" style= "margin: 10px">
ENUNCIADO:
Realizar un menú plegable (collapse) con una de sus opciones 'Music' desplegable (dropdown ) con bootstrap, para las siguientes opciones:
Welcome
Featured
People
Music
Mixes
Videos
Radio
</p>
</div>
</div>
<div class= "row">
<div class= "col-md-6">
<h3 class= "bg-warning">Código Fuente</h3>
<p>Aquí pueden ver el código fuente de esta página:</p>
<p><pre>
</pre></p>
</div>
<div class= "col-md-3 fondoOscuro">
<p>Esta página está en proceso de construcción, seguiremos avanzando con los nuevos requerimientos del curso.</p>
</div>
<div class= "col-md-3">
<blockquote class="blockquote-reverse">
Mit der Dummheit kämpfen Götter selbst vergebens<br>
<small>(Contra la estupidez, los propios dioses luchan en vano)</small>
<footer>Schiller<cite tittle= "Juana de Arco"> en "Juana de Arco"</cite></footer>
</blockquote>
</div>
</div>
</div>
<footer class= "container">
Realizado por: Rafa Gómez
</footer>
</body>
</html>
Esta página está en proceso de construcción, seguiremos avanzando con los nuevos requerimientos del curso.
Mit der Dummheit kämpfen Götter selbst vergebens
(Contra la estupidez, los propios dioses luchan en vano)