Вы находитесь на странице: 1из 9

COMERCIO ELECTRÓNICO IESTPH

Laboratorio N° 02:

“Maquetación Web con Bootstrap”

1. OBJETIVOS:
Afianzar al estudiante la construcción de la maquetación web usando el framework bootstrap.
Afianzar en el estudiante conocimientos sobre sistema de rejilla.
Realizar una primera interacción responsive design para móviles, tabletas y desktops.

2. Conceptos Teóricos

 Sistema de Rejilla: Bootstrap incluye responsive design nativament, un modelo fluido para móviles 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 múltiples dispositivos según la siguiente definición.

Extra small Small Medium Large


devicesPhones devices Tablets devices Desktops devices Desktops
(<768px) (≥768px) (≥992px) (≥1200px)

Grid behavior Horizontal at Collapsed to start, horizontal above breakpoints


all times

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

Bach. Sherelly yedizza YUPARI GÁLVEZ


COMERCIO ELECTRÓNICO IESTPH

 Instalación 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">

<!-
- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hola, Bootstrap!</h1>

<!-- jQuery (necessary para Bootstrap) -->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></s
cript>
<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>
<div class="col-xs-4">

Bach. Sherelly yedizza YUPARI GÁLVEZ


COMERCIO ELECTRÓNICO IESTPH
<p>datos de prueba</p>
</div>
<div class="col-xs-4">
<p>datos de prueba</p>
</div>
</div>
<br/>
<div class="row">
<div class="col-xs-2">
<p>datos de prueba</p>
</div>
<div class="col-xs-2">
<p>datos de prueba</p>
</div>
<div class="col-xs-2">
<p>datos de prueba</p>
</div>
<div class="col-xs-2">
<p>datos de prueba</p>
</div>
<div class="col-xs-2">
<p>datos de prueba</p>
</div>
<div class="col-xs-2">
<p>datos de prueba</p>
</div>
</div>
</div>

 Columnas responsive design


<style>
div { border: 1px solid }
</style>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-2 col-lg-5">
<p>datos de prueba</p>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 col-lg-5">
<p>datos de prueba</p>
</div>
<div class="col-xs-12 col-sm-4 col-md-8 col-lg-2">
<p>datos de prueba</p>
</div>
</div>
</div>

 Columnas Offset: Agrega columnas en blanco a la izquierda sin solapamiento


<style>
div {
border: 1px solid
}
</style>
<div class="container">
<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">
<p>datos de prueba</p>
</div>

Bach. Sherelly yedizza YUPARI GÁLVEZ


COMERCIO ELECTRÓNICO IESTPH
<div class="col-xs-12 col-sm-3 col-sm-offset-1 col-md-2 col-md-offset-0 col-lg-5">
<p>datos de prueba</p>
</div>
<div class="col-xs-12 col-sm-3 col-sm-offset-1 col-md-8 col-md-offset-0 col-lg-2">
<p>datos de prueba</p>
</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="container">
<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="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6">
<p>datos de prueba</p>
</div>
<div class="col-xs-6">
<p>datos de prueba</p>
</div>
</div>

</div>
<div class="col-xs-4">
<p>datos de prueba</p>
</div>
<div class="col-xs-2">
<p>datos de prueba</p>
</div>
</div>
</div>

 Tablas Básicas
<div class="container">

Bach. Sherelly yedizza YUPARI GÁLVEZ


COMERCIO ELECTRÓNICO IESTPH
<div class="row">
<table class="table table-bordered table-striped table-condensed">
<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>

 Tablas Responsive
<div class="container">
<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>

Bach. Sherelly yedizza YUPARI GÁLVEZ


COMERCIO ELECTRÓNICO IESTPH
</div>
</div>
</div>

 Formas Verticales

<div class="container">
<div class="row">
<div class="col-xs-12">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-
control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-
control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<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="container">
<div class="row">
<div class="col-xs-12">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-
label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-
control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-
label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-
control" id="inputPassword3" placeholder="Password">
</div>

Bach. Sherelly yedizza YUPARI GÁLVEZ


COMERCIO ELECTRÓNICO IESTPH
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">
Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<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

Bach. Sherelly yedizza YUPARI GÁLVEZ


COMERCIO ELECTRÓNICO IESTPH

Maqueta Tablet

Maqueta Celular

Bach. Sherelly yedizza YUPARI GÁLVEZ


COMERCIO ELECTRÓNICO IESTPH

Trabajo Grupal:
 Desarrollar una maqueta web para un sistema de comercio electrónico, debe incluir 5 páginas web como
mínimo

Ayuda en http://getbootstrap.com

Probar la aplicación y manos a la obra!!!

Bach. Sherelly yedizza YUPARI GÁLVEZ