Skip to content

Instantly share code, notes, and snippets.

@mauroSolis

mauroSolis/borderLayout.html

Created October 10, 2012 22:40
Show Gist options
  • Save mauroSolis/3868975 to your computer and use it in GitHub Desktop.
Save mauroSolis/3868975 to your computer and use it in GitHub Desktop.
Download ZIP
Practica 6
Raw
borderLayout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Master-Detail</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;padding-bottom: 40px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div align="center">
<!---<div class="row-fluid">--->
<div id="norte" class="span9">
<div class="hero-unit">
</div>
</div>
<div id="contenedorCentro" class="span9">
<div class="hero-unit" style="border: #000 solid 1px; float: left; height: 300px;width: 160px; margin-left: 1%;">
</div><!--/hero-unit-->
<div class="hero-unit" style="border: #000 solid 1px; float: left; height: 300px;width: 160px;">
</div>
<div class="hero-unit" style="border: #000 solid 1px; float: left; height: 300px; width: 160px;">
</div>
</div><!--/span9-->
<!--- sur --->
<div id="sur" class="span9">
<div class="hero-unit">
</div>
</div><!--/row-->
</div>
</body>
</html>
Raw
mosaico.html
<!DOCTYPE html>
<html>
<head>
<title>Secciones con títulos</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" style="width: 1000px;">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus
ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
<div class="row" style="width: 800px;">
<div class="span4" style="width: 800px;">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus
ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus. Etiam porta sem malesuada magna mollis euismod.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus
ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus. Etiam porta sem malesuada magna mollis euismod.
</p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus
ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus
ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus
ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus
ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
</div>
<div class="row" style="width: 200px;">
<div class="span1">
<img src="https://twitter.com/images/resources/twitter-bird-light-bgs.png" width="50px" height="50px"/>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment