Bootstrap

tamaño de pantalla
colores
<!DOCTYPE html>
<html>
<head>
<title>Proyecto</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie-edge">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<style type="text/css">
.borde{
background-color: gray;
height: 200px;
}
.borde1{
background-color: aquamarine;
height: 50px;
text-align: center;
}
.borde2{
background-color: olivedrab;
height: 50px;
text-align: center;
}
.borde3{
background-color: orangered;
height: 50px;
text-align: center;
}
</style>
</head>
<body>

<div class="container">
<div class="row">
<div class="col">
<h3>CABECERA</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-2 col-xl-2 d-none d-md-block borde1"><p>Uno</p></div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-8 col-xl-8 borde2"><p>Dos</p></div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 d-none d-md-block borde3"><p>Tres</p></div>
</div>
<div class="row">
<div class="col">
<h3>PIE DE PAGINA</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

<script src="js/jquery-3.5.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
****************************************************************************************************
*******

<div class="row">
<div class="col border">
<div class="clearfix">
<span class="float-left">IZQUIERDA</span>
<span class="float-right">DERECHA</span>
</div>
</div>
<div class="col border">

<div class="clearfix">
<span class="float-left">IZQUIERDA</span>
<span class="float-right">DERECHA</span>
</div>
</div>
</div>
</div>
CENTRAR

<div class="row d-block">

<div class="mx-auto border" style="width: 100px;">CENTRO</div>
</div>
</div>
Estaremos viendo el siguiente contenido: - col-lg - justify-content-around

1. INTRODUCCIÓN - 0:10 - col-xl - align-items-start
- Que es bootstrap y para que sirve 4. OCULTACIÓN - 46:57 - align-items-center
- Novedades estructurales - d-xs-none - align-items-end
- Requisitos - d-sm-none - align-self-start
2. INSTALACIÓN - 02:12 - d-md-none - align-self-center
- Descargar e instalar bootstrap - d-lg-none - align-self-end –
- Creación de directorios - d-xl-none fixed-top
- Descarga procesador de codigo - d-sm-block - fixed-bottom
- Encabezado html 5 - d-sm-inline 6. TAMAÑO - 1:25:31
- Llamado de javascript 5. ALINEACIÓN - 1:02:51 - w (ancho)
3. FLEXBOX Y SISTEMA DE REGILLA - 17:11 - clearfix - h (alto)
- containe - float-left - p (padding)
- container-fluid - float-right - m (margin)
- row - mx-auto - t (top)
- col - justify-content-start - b (bottom)
- col-xs - justify-content-center - l (left)
- col-sm - justify-content-end - r (right)
- col-md - justify-content-between
7. TIPOGRAFÍA - 1:33:41 - display - small - INSIGNIAS - 2:37:44 - badge - badge-primary - form-check-input - form-check-inline - form-
mark - abbr - blockquote - ol - ul - dl - code - badge-secondary - badge-success - badge- check-label - radio-inline - select 25.
kbd - pre 8. BACKGROUND - 1:51:18 - bg- danger - badge-warning - badge-info - badge- CAROUSEL - 4:16:09 - carousel - slide -
primary - bg-secondary - bg-success - bg-info - light - badge-dark - badge-pill - inside 16. carousel-indicators - carousel-inner - carousel-
bg-warning - bg-danger - bg-dark - bg-light 9. BARRA DE PROGRESO - 2:43:14 - progress - item - carousel-caption - carousel-control-prev
TABLAS - 1:54:21 - table - table-striped - table- striped - progress-bar-striped - progress-bar- - carousel-control-next - carousel-control-prev-
bordered - table-hover - table-dark - table- animated 17. PAGINACIÓN - 2:51:34 - icon - carousel-control-next-icon 26. MODAL -
striped - table-hover - table-primary - table- pagination - active - disabled - sizing - 4:29:45 - modal - fade - modal-dialog - modal-
secondary - table-success - table-danger - pagination-lg - pagination-sm - breadcrumbs content - modal-header - modal-title - modal-
table-info - table-warning - table-active - table- 18. LISTAS - 2:58:45 - list.group - list-group- dialog - modal-body - modal-footer 27.
dark - table-light - table-sm - table-responsive - item - active - disabled 19. TARJETAS - TOOLTIP - 4:38:14 - toltip
table-responsive-sm - table-responsive-md - 3:04:48 - card - card-header - card-body -
table-responsive-lg - table-responsive-xl 10. card-footer - card-title - card-text - card-link 20.
IMÁGENES - 2:06:22 - rounded - rounded- DROPDOWN MENU - 3:11:27 - dropdown-
circle - img-thumbnail - float-left - float-right - toggle - dropdown-menu - dropdown-item -
img-fluid 11. JUMBOTRON - 2:11:39 - dropdown-divider - dropdown-header - dropup
jumbotron - jumbotron-fluid 12. ALERT - 21. PLEGABLES - 3:18:44 - callapse - show
2:14:27 - alert - alert-success - aler-info - alert- 22. MENÚS DE NAVEGACIÓN - 3:28:20 - nav
warning - alert-danger - alert-primary - alert- - nav-item - nav-link - disabled - justify-content-
secondary - alert-light - alert-dark - alert-link - start - justify-content-center - justify-content-
alert-dismissable 13. BOTONES - 2:23:38 - btn end - flex-column - nav-pills - nav-justified -
- btn-primary - btn-secondary - btn-success - dropdown - nav-pills 23. BARRA DE
btn-info - btn-warning - btn-danger - btn-dark - NAVEGACIÓN - 3:39:32 - navbar - navbar-nav
btn-linht - btn-link - btn-outline-primary - btn- - navbar-item - navbar-link - nav-expand-sm -
outline-secondary - btn-outline-success - btn- navbar-brand - colapsable - nav-expand-sm -
outline-info - btn-outline-warning - btn-outline- navbar-collapse - navbar-toggler - navbar-
danger - btn-outline-dark - btn-outline-light - toggler-icon - dropdown - nav-item - nav-link -
btn-outline-link - btn-lg - btn-sm - btn-block - dropdown-toggle - dropdown-menu -
active - disabled 14. GRUPO DE BOTONES - dropdown-item - fixed-top - fixed-bottom 24.
2:30:35 - btn-group - btn-group-lg - btn-group- FORMULARIOS - 3:59:12 - form-control -
sm - btn-group-xs - btn-group-vertical - form-check-label - form-check-input - form-
dropdown-menu - dropdown-item 15. control - disabled - textarea - form-check -

Bootstrap

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap

Uploaded by

Copyright:

Available Formats

tamaño de pantalla

<div class="col border">

<div class="row d-block">

Estaremos viendo el siguiente contenido: - col-lg - justify-content-around

You might also like