Guia bootstrap

Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
Guía Básica de Bootstrap
Elaborada Por :Yohnneiber Díaz
Profesora: Lissette Torrealba

¿Qué es un Framework?
En palabras sencillas podemos, definir un Framework es un conjunto de herramientas, la cuales nos permiten
trabajar de forma sencilla, y que la mayoría de las veces podemos reutilizar en otros proyectos.
Por otro parte, en el diseño y desarrollo web, el significado de Framework, nos da a entender, que sirve para
poder estructurar de una mejor manera nuestro código, escribir menos líneas.
¿Para qué sirve un Framework?
Esta herramienta sirve para poder desarrollar o escribir código de manera más fácil, permite tener todo mejor
organizado y lo más importante permite poder reutilizar el código. Nos permite tener mayor productividad,
minimizar los cotos en cuanto al desarrollo y además nos ayuda a minimizar errores.
¿Qué es Bootstrap?
Bootstrap, es un framework originalmente creado por Twitter, que permite crear interfaces web con CSS y
JavaScript, cuya particularidad es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se
visualice. Es decir, el sitio web se adapta automáticamente al tamaño de una PC, una Tablet u otro dispositivo.
Esta técnica de diseño y desarrollo se conoce como “responsive design” o diseño adaptativo.
Pasos para Empezar a maquetar mi web con Bootstrap:
1-Descargar el código fuentes directamente de la página
2-Enlazar el código css de Bootstrap en nuestro código HTML a través de la etiqueta <link>:
Es importante resaltar que de todos los códigos css que descargamos solos vamos enlazar el bootstrap.min.css.
Ejemplo:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
Si no desea descargar y alojar Bootstrap usted mismo, puede incluirlo desde un CDN (Content
Delivery Network).
Ejemplo:
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
3-Enlazar el código JavaScript de Bootstrap, y las diferentes librerías (JQuery, Popper.js a través de
la etiqueta
<script> y su atributo src, de la misma forma que el css vamos enlazar aquellos que en su nombre posean la
palabra min es importante colocarlos en este orden 1-JQuery,2-Popper y de ultimo Bootstrap.
Ejemplo:

Clases de Bootstrap:
Estas clases no ahorran todo él trabaja aquí es donde vamos a ver verdaderamente la utilidad de Bootstrap
,puesto que el css ya está listo, adaptable a dispositivo móviles y a todos los navegadores, ahora solo queda
llamar esas clases y empezar a utilizarlas
1. Contenedores
Bootstrap requiere un elemento contenedor para envolver el contenido del sitio, ya que esta forma podemos
dividir y maquetar nuestro sitio Web.
Hay dos clases de contenedor para elegir:
1. La clase .container proporciona un contenedor responsivo de ancho fijo
2. La clase .container-fluid proporciona un contenedor de ancho completo, que
Abarca todo el ancho de la ventana gráfica
Estas 2 clases se le agregar a la etiqueta <div>
¡Hazlo Tú mismo!
En la plantillaBase.html coloca 2 contendores <div> dentro de la etiqueta <body>
Y uno de esto div le colaremos la clase container y al otro le colocaremos container-fluid, para notar la diferencia a cada
uno le colocaremos un border solido con un color, través de la propiedad de css: border:1px solid color;
Ejemplo:
Si los ejecutamos desde nuestro servidor se va a ver de la siguiente forma:

2- Sistema Grid de Bootstrap
Bootstrap utiliza un modelo de rejilla basado en dos tipos de contenedores lo cuales ya vimos, además de una
rejilla de 12 columnas que resulta muy flexible, y que como veremos podemos también alterar cuando nos
resulte conveniente.
¿Cómo es esto? Imagina que divide tu Web en filas y columnas, como una tabla y que cada fila está compuesta
por 12 columnas de las cuales si no deseas utilizar las 12 podemos agruparla en grupo claro está en base a 12,
además dependiendo del tamaño de las diferentes pantallas podemos ir modificando esta columna.
Esto es un poco difícil de entender a simple vista, pero veamos esta imagen:
Vemos que si sumamos los numero en cada fila nos podremos dar cuenta que todos lleva a 12 y que la pantalla
parece estar divido, es importante resaltas que si tenemos 13 columna la numero 13 bajara y se agrupara en la
siguiente fila, con esto es mucho más fácil el posicionamiento.
Ahora bien como se agregar esto en HTML:
Bueno dentro de los contenedores (<div class=”container”>), vamos a colocar otro div pero este con la clase
row(<div class=”row”>) ósea colocamos una fila, después de esto ¿Qué queda por Agregar? Las columnas,

para esto colocaremos otro div dentro de la fila pero con la clase col, Entonces no quedaría de la siguiente
forma:
¡Hazlo tú mismo!
En la plantillBase.html vamos a borrar unos de los contendores, y en el que nos queda vamos a agregar una fila
y lo dividiremos en 3 columnas, también le agregaremos un borde para notar la diferencia, de igual forma le
asignaremos un número con la etiqueta <h2>:
Ejemplo:
Si los abrimos en el navegador quedaría de la siguiente forma:

Aunque no lo tenemos esto es de gran ayuda para posicionar nuestro elemento en nuestra web o sistema.
Es importante resaltar que aquí estamos haciendo un posicionamiento general, no adaptable a dispositivos
móviles, si lo queremos hacer adaptable tenemos que utilizar la class “.col” pero con sus diferentes prefijos, en
esta tabla se encuentra todos, para pantalla pequeña, mediana, grande y extra grande:
3-Tipografía
Configuración predeterminada:
Bootstrap usa un font-size(tamaño)predeterminado de 16 px.
La font-family(“fuente”) predeterminada es "Helvetica Neue", Helvetica, Arial, sans-serif.
Además, todos los elementos <p> tienen margin-top: 0 y margin-bottom: 1rem (16px por
Defecto).
Títulos:
<h1> - <h6>
Bootstrap estilos de encabezados HTML (<h1> a <h6>) con un font-weight más audaz y un
Tamaño de fuente aumentado:
<h1> Bootstrap heading</h1>
Esto son los tamaños:

4-Colores de texto:
Bootstrap tiene algunas clases contextuales que se pueden usar para proporcionar "significado a
Través de los colores".
Las clases para los colores del texto son: .text-muted , .text-primary , .textsuccess
.text-info , .text-warning , .text-danger , .text-secondary , .text-white ,
.text-dark y .text-light :
A continuación lo colores que tiene cada clase:
Como agregarlas a cualquier etiqueta de texto(<p>,<hN>,a,etc) le agregamos la clases de color que queremos
ejemplo:
A una etiqueta h2 vamos a colocarle el color verde que trae la clase .text-success , le colocamos cualquier texto:

Lo corremos en el navegador y quedaría de la siguiente forma:
5-Colores de fondo
Las clases de colores de fondo son: .bg-primary , .bg-success , .bg-info , .bgwarning
,bg-danger , .bg-secondary , .bg-dark y .bg-light .
Tenga en cuenta que los colores de fondo no configuran el color del texto, por lo que en algunos
casos querrá usarlos junto con una clase .text-* .
Estos lo diferentes de fondo que traen cada una de las clases ya mencionada:
Es importante darse cuenta que son los mismo de letras, y que casi se escriben igual solo que en vez del prefijo
text tiene el bg.
6-Botones
Bootstrap 4 ofrece diferentes estilos de botones:

Las clases de botones (“btn”) se pueden usar en un elemento <a> , <button> o <input> .
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
7-Formularios
Configuración predeterminada de Bootstrap 4
Los controles de formulario reciben automáticamente un estilo global con Bootstrap:
Todos los elementos textuales <input> , <textarea> y <select> con clase .formcontrol
tienen un ancho del 100%.
Diseños de formularios
Bootstrap proporciona dos tipos de diseños de formulario:
•Forma apilada (ancho completo)
•Forma en línea
Forma apilada:
Los <input> y <label >utilizara todo el ancho disponible lo que se ubiquen unos debajo del otro.
Para llevar un orden y poder agruparlo se utiliza un div a lo cual le vamos a poner la clase form-group
Cada <input> tiene su respetivo label y esto a su vez estará dentro de un div con la clase form-group.
Ejemplo:
<form>
<div class="form-group">
<label for="email">Correo</label>
<input type="email" class="form-control" id="email" placeholder="Escribe tu
correo">
</div>
<label for="password">Contraseña</label>
<input type="password" class="form-control" id="password" placeholder="Escribe tu
contraseña">
</div>
<button type="submit" class="btn btn-primary">Entrar</button>
</form>
Copia y pega en tu IDE favorito, y córrelo en tu navegador te quería de la siguiente forma:

¿Se ve muy ancho no crees? , esto es debido a que ocupa todo el ancho disponible, entonces si no nosotros
queremos que ocupe menos espacio , debemos de color en una caja y colocarle el tamaño o el número de
espacio que queremos que ocupe es así como funciona el posicionamiento.
Ejemplo:
<div class="container">
<div class="row">
<div class="col-4">
<form>
<label for="email">Correo</label>
<input type="email" class="form-control" id="email"
placeholder="Escribe tu correo">
</div>
<label for="password">Contraseña</label>
<input type="password" class="form-control" id="password"
placeholder="Escribe tu contraseña">
</div>
<button type="submit" class="btn btn-primary">Entrar</button>
</form>
</div>
</div>
</div>
Lo que he hecho es meter todo eso dentro de un contenedor, le he dicho que ocupe 4 espacios, de todo el ancho
disponible, entonces si lo visualizamos en el navegador quedaría así:

Esto se puede maquetar mucho más todavía, es solo un ejemplo de lo que se podría hacer en esto casos.
Entradas de formulario:
Bootstrap admite todos los tipos de entrada HTML5: texto, contraseña, fecha y hora, hora local,
fecha, mes, hora, semana, número, correo electrónico, url, búsqueda, teléfono y color.
Nota: ¡Las entradas NO se diseñarán completamente si su tipo no se declara correctamente!, además todo los
elemento que vamos a probar debe estar dentro de la etiqueta <form>
Password:
El siguiente ejemplo contiene dos elementos de entrada; uno de tipo texto y uno de tipo
Password
Ejemplo:
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
En el navegador:
Textarea:
Ejemplo:
<label for="comment">Comentario:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>

En el navegador
Casillas de verificación (checkbox)
Las casillas de verificación se utilizan si desea que el usuario seleccione cualquier cantidad de
Opciones de una lista de opciones predefinidas.
El siguiente ejemplo contiene tres casillas de verificación. La última opción está deshabilitada:
Ejemplo:
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="opc1" value="">Option 1
</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="opc2" value="">Option 2
</label>
</div>
<div class="form-check disabled">
<input type="checkbox" class="form-check-input" name="op3" value=""
disabled>Option 3
</label>
</div>
En el navegador:
Utilice la .form-check-inline si desea que las casillas de verificación aparezcan en la misma
Línea:

<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check form-check-inline disabled">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Botones de radio:
Los botones de radio se utilizan si desea limitar al usuario a una sola selección de una lista de
Opciones preestablecidas.
El siguiente ejemplo contiene tres botones de radio. La última opción está deshabilitada:
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
En el navegador:
Utilice la clase .radio-inline si desea que los botones de .radio-inline aparezcan en la misma línea:
<label class="radio-inline"><input type="radio"name="optradio">Option1</label>
En el navegador:

8-Barras de navegación
Una barra de navegación es un encabezado de navegación que se coloca en la parte superior de la
Página:
Con Bootstrap, una barra de navegación puede extenderse o colapsar, dependiendo del tamaño
De la pantalla.
Se crea una barra de navegación estándar con la clase .navbar , seguida de una clase colapsable
Receptiva: .navbar-expand-xl|lg|md|sm (apila la barra de navegación verticalmente en
Pantallas extra grandes, grandes, medianas o pequeñas).
Para agregar enlaces dentro de la barra de navegación, use un
Elemento <ul> con class="navbar-nav" . A continuación, agregue elementos <li> con una
Clase .nav-item seguida de un elemento <a> con una clase .nav-link :
Ejemplo:
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
</li>
</li>
</ul>
</nav>
En el navegador:
Utilice cualquiera de las clases de .bg-color para cambiar el color de fondo de la barra de
Navegación ( .bg-primary , .bg-success , .bg-info , .bg-warning , .bg-danger , .bgsecondary
, .bg-dark y .bg-light )
Consejo: Agregue un color de texto blanco a todos los enlaces en la barra de navegación con la

clase .navbar-dark , o use la clase .navbar-light para agregar un color de texto negro
Logotipo:
Para agregar un texto o logo de nuestro menú lo podemos hacer a través de la etiqueta <a> con las clases
.navbar-brand la cual se utiliza para resaltar el nombre de la marca / logotipo / proyecto de su página:
Conejos: Esta se coloca antes que la lista con tus link
Ejemplo:
<nav class="navbar navbar-expand-sm navbar-dark bg-primary" >
<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-nav">
<a class="nav-link" href="#">Inicio</a>
</li>
<a class="nav-link" href="#">Ayuda</a>
</li>
<a class="nav-link" href="#">Contacto</a>
</li>
</ul>
</nav>
En el navegador:
Actividad a realizar:
Diseñar un formulario de registros, con un menú de navegación en base a lo requerido en su comunidad, el
formulario debe estar estructurado de tal forma que se una vista agradable para el usuario.

Guia bootstrap

Más contenido relacionado

La actualidad más candente (20)

Similar a Guia bootstrap (20)

Más de ljds (20)

Último (20)

Guia bootstrap