Skip to content

Instantly share code, notes, and snippets.

@crissanchez92

crissanchez92/Ejercicio1

Created October 17, 2012 22:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save crissanchez92/3908863 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save crissanchez92/3908863 to your computer and use it in GitHub Desktop.
Download ZIP
Practica 7: Bootstrap
Raw
Ejercicio1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Three Column Border Layout</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>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="row">
<div class="span3">
<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 class="btn">Nuevo</button>
<button class="btn">Borrar</button>
<ul class="nav nav-list">
<li><a href="#">Allan Poe</a></li>
<li><a href="#">Mark Twain</a></li>
<li><a href="#">Lewis Carroll</a></li>
</ul>
</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">
<button class="btn">Nuevo</button>
<button class="btn">Borrar</button>
<ul class="nav nav-list">
<li><a href="#">La casa de los espejos</a></li>
<li><a href="#">El conde dracula</a></li>
<li><a href="#">Las aventuras de ...</a></li>
<li><a href="#">Alicia en el pais de las maravillas</a></li>
</ul>
</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">
editoriales...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
Clasificados
</a>
</div>
<div id="collapseFour" class="accordion-body collapse">
<div class="accordion-inner">
clasificados...
</div>
</div>
</div>
</div>
</div>
<div class="span9">
<section id="tabs">
<div class="bs-docs-example">
<ul id="myTab" class="nav nav-tabs">
<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 id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="autor">
<p>Detalle del autor</p>
<div class="row">
<div class="span4">
<form class="form-inline">
<label>Nombre </label>
<input type="text" class="input-small" placeholder="Nombre"><br><br>
<label>nacionalidad</label>
<select>
<option>USA</option>
<option>CR</option>
<option>NOC</option>
</select><br><br>
<label>Seudonimo </label>
<input type="password" class="input-small" placeholder="Seudonimo">
</form>
</div>
<div class="span5">
<form class="form-inline">
<label>Ocupacion </label>
<input type="text" class="input-small" placeholder="Ocupacion"><br><br>
<label>Genero</label>
<select multiple="multiple">
<option>Humor</option>
<option>Satira</option>
<option>Aventuras</option>
</select>
</form>
</div>
</div>
<table class="table table-striped">
<th>Libro</th>
<th>Editorial</th>
<th>Año</th>
<th>Edicion</th>
<tr>
<td>El principe y el mendigo</td>
<td>Alfaguara</td>
<td>1995</td>
<td>5ta</td>
</tr>
<tr>
<td>Tom Sawyer</td>
<td>Pegin books</td>
<td>1965</td>
<td>2da</td>
</tr>
</table>
<div align="right">
<form class="form-inline">
<button class="btn">Cancel</button>
<button class="btn">OK</button>
</form>
</div>
</div>
<div class="tab-pane fade" id="libro">
<p>Detalle del libro</p>
<form class="form-inline">
<label>Nombre </label>
<input type="text" class="input-small" value="Las aventuras de Tom Sawyer">
</form>
<form class="form-inline">
<label>ISBN </label>
<input type="text" class="input-small" value="12244-5678-45">
</form>
<form class="form-inline">
<label>Año </label>
<select>
<option>2004</option>
<option>2005</option>
<option>2006</option>
</select>
<label>Edicion </label>
<select>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</form>
<form class="form-inline">
<label>Editorial </label>
<a href="#">Ediciones Alfaguara</a>
<button class="btn">Cambiar editorial</button>
</form>
<div class="row">
<div class="span4">
<form class="form-inline">
<label>Autores </label>
<select multiple="multiple">
<option>Mark Twan</option>
</select>
</div>
<div class="span3">
<button class="btn">Agregar autor</button><br><br>
<button class="btn">Eliminar autor</button>
</div>
</div>
<div align="right">
<form class="form-inline">
<button class="btn">Cancel</button>
<button class="btn">OK</button>
</form>
</div>
</div>
<div class="tab-pane fade" id="editorial">
<p>contenido de editorial</p>
</div>
</div>
</div>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment