Skip to content

Instantly share code, notes, and snippets.

@mauroSolis

mauroSolis/practica7.html

Created October 18, 2012 05:38
Show Gist options
  • Save mauroSolis/3910043 to your computer and use it in GitHub Desktop.
Save mauroSolis/3910043 to your computer and use it in GitHub Desktop.
Download ZIP
Practica 7 del miercoles 17 de actubre
Raw
practica7.html
<!DOCTYPE html>
<html>
<head>
<title>Practica 7</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="span2.5">
<!--Sidebar content-->
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Autores
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<button id="Nuevo" class="btn">Nuevo</button>
<button id="Borrar" class="btn">Borrar</button><br />
Allan Poe<br />
Mark Twain<br />
Lewis Carroll<br />
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Libros
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Editoriales
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
Clasificaciones
</a>
</div>
<div id="collapseFour" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
</div>
<div class="span9">
<!--Body content-->
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#autor" data-toggle="tab">Autor</a></li>
<li><a href="#libro" data-toggle="tab">Libro</a></li>
<li><a href="#editorial" data-toggle="tab">Editorial</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="autor">
<div class="row">
<div class="span8">
<h3>Detalle del Autor</h3>
</div>
</div>
<div class="row">
<div class="span1">
<label>Nombre: </label>
<br />
<label>Nacionalidad: </label>
<br />
<label>Seud&oacute;nimo </label>
</div>
<div class="span2.5">
<input type="text" /> <br />
<select id="sCursos">
<option value="0">USA</option>
<option value="1">CR</option>
<option value="2">URSS</option>
</select><br />
<input type="text" value="Mark Twain"/>
</div>
<div class="span1">
<label>Ocupaci&oacute;n:</label><br />
<label>G&eacute;nero:</label>
</div>
<div class="span2">
<input type="text" value="Escritor"/><br />
<select name="drop1" id="Select1" size="4" multiple="multiple">
<option value="1">Humor</option>
<option value="2">S&aacute;tira</option>
<option value="3">Aventuras</option>
<option value="4">Suspenso</option>
<option value="4">Ciencia Ficci&oacute;n</option>
</select>
</div>
</div>
<div class="row">
<div class="span8">
<table border="1" style="width: 500px;">
<tr style="background: #C0C0C0;">
<td>Libro</td>
<td>Editorial</td>
<td>A&ntilde;o</td>
<td>Edici&oacute;n</td>
</tr>
<tr>
<td>El Principe y el mendigo</td>
<td>Alfaguara</td>
<td>1995</td>
<td>5ta</td>
</tr>
<tr>
<td>Tomm Sawyer</td>
<td>Penguin Books</td>
<td>1965</td>
<td>2da</td>
</tr>
</table>
<br />
</div>
</div>
<div class="row">
<div class="span4"></div>
<div class="span3">
<button>Cancel</button>
<button> OK </button>
</div>
</div>
</div>
<div class="tab-pane" id="libro">
<div class="row">
<div class="span8">
<h3>Detalle del Libro</h3>
</div>
</div>
<div class="row">
<div class="span1">
<label>Nombre: </label>
<br />
<label>ISBN: </label>
<br />
</div>
<div class="span2.5">
<input type="text" value="Las aventuras de Tom Sawyer" /><br />
<input type="text" value="12244-5678-45" /><br />
<div class="span1">
<label>A&ntilde;o: </label>
</div>
<div class="span1">
<input type="number" value="2004" style="width: 70px;"/>
</div>
<div class="span1">
<label>Edici&oacute;n </label>
</div>
<div class="span1">
<select style="width: 50px;">
<option value="0">5</option>
<option value="1">4</option>
<option value="2">3</option>
<option value="3">2</option>
<option value="4">1</option>
</select>
</div>
<div class="row">
<div class="span1">
<label>Editorial: </label>
</div>
<div class="span1.5">
<a href="#">Ediciones Alfaguara </a>
</div>
<div class="span2">
<button>Cambiar editorial</button>
</div>
</div><br />
<div class="row">
<div class="span1">
<label>Autores</label>
</div>
<div class="span2">
<select name="drop1" id="Select1" size="4" multiple="multiple" style="width: 150px;">
<option value="1">Humor</option>
<option value="2">S&aacute;tira</option>
<option value="3">Aventuras</option>
<option value="4">Suspenso</option>
<option value="4">Ciencia Ficci&oacute;n</option>
</select>
</div>
<div class="span2">
<div class="row">
<button>Agregar autor</button>
</div><br />
<div class="row">
<button>Eliminar autor</button>
</div>
</div>
</div>
<div class="row">
<p>___________________________________________________________</p>
</div>
<div class="row">
<div class="span3"></div>
<div class="span3">
<button>Cancel</button>
<button> Ok </button>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="editorial">
<div class="row">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment