LAB2

DESARROLLO WEB (IS-454)
UNSCH 2015
Laboratorio N 02:
Maquetacin Web con Bootstrap

1. OBJETIVOS:
Afianzar al estudiante la construccin de la maquetacin web usando el framework bootstrap.
Afianzar en el estudiante conocimientos sobre sistema de rejilla.
Realizar una primera interaccin responsive design para mviles, tabletas y desktops.
2.
Conceptos
Tericos
Sistema de Rejilla: Bootstrap incluye responsive design nativament, un modelo fluido para mviles escalado
apropiadamente en 12 columnas. El sistema de rejilla esta formado por contenedores flotantes divididos en filas
y columnas con soporte a media querys.
El sistema de rejilla trabaja para mltiples dispositivos segn la siguiente definicin.
Extra small
devicesPhones
Small
devices Tablets
Medium
devices Desktops
Large
devices Desktops
(<768px)
(768px)
(992px)
(1200px)
Grid behavior
Horizontal at
all times
Collapsed to start, horizontal above breakpoints
Container width
None (auto)
750px
970px
1170px
Class prefix
.col-xs-
.col-sm-
.col-md-
.col-lg-
Column width
Auto
~62px
~81px
~97px
Gutter width
30px (15px on each side of a column)
Nestable
Yes
Offsets
Yes
Column ordering
Yes
ING. RICHARD ZAPATA CASAVERDE
UNSCH 2015
UNSCH 2015
Instalacin bootstrap
Bootstrap CDN
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Estructura base bootstrap
<!DOCTYPE html>
<html lang="es-pe">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Maquetacion</title>
<link href="css/bootstrap.min.css" rel="stylesheet">



</head>
<body>
<h1>Hola, Bootstrap!</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Sistema rejilla 12 columnas

<style>
div {
border: 1px solid
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-4">
<p>datos de prueba</p>
</div>
UNSCH 2015
</div>
</div>
</div>
<br/>
<div class="row">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Columnas responsive design
<style>
div { border: 1px solid }
</style>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-2 col-lg-5">
</div>
</div>
</div>
</div>
</div>
Columnas Offset: Agrega columnas en blanco a la izquierda sin solapamiento
<style>
div {
border: 1px solid
}
</style>
<div class="row">
<div class="col-xs-12 col-sm-3 col-sm-offset-1 col-md-2 col-md-offset-0 col-lg-5">
</div>
UNSCH 2015
</div>
</div>
</div>
</div>
Columnas push pull : push agrega columnas en blanco a la izquierda, pull agrega columnas en
blanco a la derecha con solapamiento
<style>
div {
border: 1px solid
}
</style>
<div class="row">
<div class="col-xs-4 col-sm-8 col-sm-push-4">
<p>prueba izquierda</p>
</div>
<div class="col-xs-8 col-sm-4 col-sm-pull-8">
<p>prueba derecha</p>
</div>
</div>
</div>
Rejillas Anidadas
<style>
div {
border: 1px solid
}
</style>
<div class="row">
<div class="row">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Tablas Bsicas
<div class="row">
<table class="table table-bordered table-striped table-condensed">
<thead>
UNSCH 2015
<tr>
<th>ID</th>
<th>NOMBRE</th>
<th>APELLIDOS</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Richard</td>
<td>Zapata Casaverde</td>
</tr>
<tr>
<td>2</td>
<td>Carlos</td>
<td>Perez Perex</td>
</tr>
<tr>
<td>3</td>
<td>Pablo</td>
<td>Guerra Castillo</td>
</tr>
</tbody>
</table>
</div>
</div>
Tablas Responsive
<div class="row">
<div class="table-responsive">
<table class="table table-bordered table-striped table-condensed table-hover">
<thead>
<tr>
<th>ID</th>
<th>NOMBRE</th>
<th>APELLIDOS</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Richard</td>
<td>Zapata Casaverde</td>
</tr>
<tr>
<td>2</td>
<td>Carlos</td>
<td>Perez Perex</td>
</tr>
<tr>
<td>3</td>
<td>Pablo</td>
<td>Guerra Castillo</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
UNSCH 2015
Formas Verticales
<div class="row">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholde
r="Enter email">
</div>
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeh
older="Password">
</div>
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile" class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
Formas Horizontales
<div class="row">
<form class="form-horizontal" role="form">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholde
r="Email">
</div>
</div>
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholde
r="Password">
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
UNSCH 2015
<input type="checkbox">
Remember me
</label>
</div>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</div>
Practica 1
Maqueta Desktop
UNSCH 2015
Maqueta Tablet
Maqueta Celular
UNSCH 2015
Trabajo Grupal:
Desarrollar una maqueta web para un sistema de comercio electrnico, debe incluir 5 pginas web
como mnimo
Ayuda en http://getbootstrap.com
Probar la aplicacin y manos a la obra!!!

LAB2

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

LAB2

Hochgeladen von

Copyright:

Verfügbare Formate

DESARROLLO WEB (IS-454)

Maquetacin Web con Bootstrap

El sistema de rejilla trabaja para mltiples dispositivos segn la siguiente definicin.

Collapsed to start, horizontal above breakpoints

30px (15px on each side of a column)

ING. RICHARD ZAPATA CASAVERDE

DESARROLLO WEB (IS-454)

ING. RICHARD ZAPATA CASAVERDE

DESARROLLO WEB (IS-454)

Sistema rejilla 12 columnas

ING. RICHARD ZAPATA CASAVERDE

DESARROLLO WEB (IS-454)

ING. RICHARD ZAPATA CASAVERDE

DESARROLLO WEB (IS-454)

ING. RICHARD ZAPATA CASAVERDE

DESARROLLO WEB (IS-454)

ING. RICHARD ZAPATA CASAVERDE

DESARROLLO WEB (IS-454)

ING. RICHARD ZAPATA CASAVERDE

DESARROLLO WEB (IS-454)

ING. RICHARD ZAPATA CASAVERDE

DESARROLLO WEB (IS-454)

ING. RICHARD ZAPATA CASAVERDE

DESARROLLO WEB (IS-454)

ING. RICHARD ZAPATA CASAVERDE

Das könnte Ihnen auch gefallen