Bootstrap para verdaderos principiantes
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
16 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Bootstrap para verdaderos principiantes to your Wishlist.

Add to Wishlist

Bootstrap para verdaderos principiantes

Una forma rápida y profesional de hacer páginas responsivas
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
16 students enrolled
Last updated 7/2017
Spanish
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 11.5 hours on-demand video
  • 10 Articles
  • 15 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Comprenderá los inicios de Bootstrap, cómo instalarlo en la computadora o desde un CDN, usar básicamente la cuadrícula para hacer una página responsiva.
  • Aprenderá las diferencias de tipografía y de estilo entre HTML y Bootstrap en etiquetas como abbr, mark, pre, kdb o blockquote
  • Aprenderá a crear listas agrupadas, paneles y grupos de paneles, menús dropdown, listas colapsables, crear un acordeón, menú de tabuladores, menú de píldoras, menús verticales, así como tabuladores y píldoras centradas en Bootstrap.
  • Creará barras de navegación normales y en colores invertidos, añadir un dropdown, crear opciones a la derecha e izquierda de la barra, agregar botones, un formulario y hacer una barra colapsable para un dispositivo pequeño.
  • Aprenderá a crear y modificar los objetos media, centrándo verticalmente, justificarlo a la izquierda o derecha o anidarlos.
  • Creará un carrusel de imágenes y posteriormente agregará subtítulos, creará ventanas modales, añadirá un tooltip a un elemento HTML, creará ventanas popover, así como una barra ScrollSpy y un componente Affix.
  • Creará páginas responsivas de varias columna para dispositivos pequeños, medianos, computadoras de escritorio y de pantalla ancha. Conocerá el uso de las clases hidden, visible, clearfix, offset, pull y push.
View Curriculum
Requirements
  • Para este curso debes tener una computadora con conexión a Internet, un navegador moderno y un editor de código como SublimeText, Brackets, etc.
Description

Bootstrap es sin duda el framework más utilizado para hacer páginas web responsivas de manera rápida y profesional en el mundo, pero no solo nos permite adaptar nuestras páginas web a cualquier dispositivo, sino que nos brinda una enorme gama de herramientas para simplificarnos la vida de diseñadores y desarrolladores web. 

Este curso está enfocado para personas que no tengan ningún conocimiento sobre el tema, hasta poder lograr páginas flexibles y poderosas. Es necesario que se tengan conocimientos básicos sobre HTML y CSS, pero no necesitas ser un experto en el área. No necesitas tener ningún conocimiento en JavaScript, ya que no utilizaremos este lenguaje.

Al final el curso podrás:

  • Comprender los inicios de Bootstrap, cómo instalarlo en la computadora o desde un CDN, usar básicamente la cuadrícula para hacer una página responsiva.

  • Aprender las diferencias de tipografía y de estilo entre HTML y Bootstrap en etiquetas como abbr, mark, pre, kdb o blockquote.

  • Aprender a crear listas agrupadas, paneles y grupos de paneles, menús dropdown, listas colapsables, crear un acordeón, menú de tabuladores, menú de píldoras, menús verticales, así como tabuladores y píldoras centradas en Bootstrap.

  • Crear barras de navegación normales y en colores invertidos, añadir un dropdown, crear opciones a la derecha e izquierda de la barra, agregar botones, un formulario y hacer una barra colapsable para un dispositivo pequeño.

  • Aprender a crear y modificar los objetos media, centrando verticalmente, justificarlo a la izquierda o derecha o anidarlos.

  • Crear un carrusel de imágenes y posteriormente agregará subtítulos, creará ventanas modales, añadirá un tooltip a un elemento HTML, creará ventanas popover, así como una barra ScrollSpy y un componente Affix.

  • Crear páginas responsivas de varias columna para dispositivos pequeños, medianos, computadoras de escritorio y de pantalla ancha. Conocerá el uso de las clases hidden, visible, clearfix, offset, pull y push.

En el curso encontrarás los apuntes a cada sección, así como más de 100 ejercicios que te ayudarán a lograr nuestros objetivos. Para este curso necesitas una computadora con Internet y un navegador moderno, así como un editor de código como SublimeText, Brackets, Dreamweaver, etc.

Who is the target audience?
  • Desarrolladores y diseñadores de páginas web con conocimientos básicos de HTML y CSS.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
115 Lectures
11:22:21
+
Introducción a Bootstrap
5 Lectures 33:05

Bootstrap fue desarrollado por Mark Otto y Jacob Thornton en Twitter, y lanzado como un producto de código abierto en agosto de 2011 en GitHub.

En junio de 2014 Bootstrap fue el proyecto No.1 en GitHub.

Bootstrap es un framework gratuito para front-end para un desarrollo web más rápido y fácil.

Bootstrap incluye plantillas de diseño basadas en HTML y CSS para tipografía, formularios, botones, tablas, navegación, carruseles de imágenes y muchos otros, así como complementos opcionales en JavaScript.

Bootstrap también le da la capacidad de crear fácilmente diseños de responsivos.

Preview 03:55

Podemos instalar la librería en nuestra computadora bajándola de la página de Bootstrap.

También podemos acceder a un CDN (Content Delivery Network)

Preview 12:21

1. Agregue el doctype HTML5

Bootstrap utiliza elementos HTML y propiedades CSS que requieren el doctype HTML5.

Incluya siempre el doctype HTML5 al principio de la página, junto con el atributo lang y el conjunto de caracteres “utf-8”:

2. Bootstrap es Mobile-First

Para garantizar la reproducción adecuada, agregue la siguiente etiqueta <meta> dentro del elemento <head>.

Preview 08:35

Por medio del Grid System o cuadrilla o grilla o cuadrícula tendremos nuestro viewport dividido en doce columnas. Podemos agrupar las columnas, pero siempre en múltiplos de doce. Tendremos cuatro tamaños: XS, SM, DM y LG.

Bootstrap, Grid System, XS, SM, DM, LG, viewport, páginas responsivas, dispositivos móviles, HTML 5, CSS3

Preview 08:12

En esta clase encontrarás los apuntes de la sección.

Apuntes la sección 1: Introducción a Bootstrap
00:02
+
Definiciones y tipografías de Bootstrap
8 Lectures 29:49

El tamaño de fuente predeterminada global de Bootstrap es 14px, con una altura de línea de 1.428.

Esto se aplica al elemento <body> ya todos los párrafos <p>.

Además, todos los elementos <p> tienen un margen inferior 10px por defecto.

Preview 05:41

Bootstrap utiliza <mark> para remarcar texto:

<p>Esto es un texto <mark>remarcado</mark> en Bootstrap.</p>

Bootstrap, Grid System, XS, SM, DM, LG, viewport, páginas responsivas, dispositivos móviles, HTML 5, CSS3, tipografía, mark

El uso de la etiqueta <mark> en Bootstrap
02:31

Bootstrap utiliza <abbr> para definir los acrónimos:

La <abbr title="Organización de las Naciones Unidas">ONU</abbr> fue fundada en 1945.

El uso de la etiqueta <abbr> en Bootstrap
03:55

Bootstrap utiliza <blockquote> de la siguiente forma:

<blockquote>

<p>El el agua clara, que brota en la fuente, un lindo pescado sale de repente. “Lindo pescadito, ¿no quieres salir? A jugar con mi aro, vamos al jardín.</p>

<footer>Anónimo</footer>

</blockquote>

Bootstrap

La clase .blockquote-reverse

Añade la clase .blockquote-reverse para ver la cita alrevés:

<blockquote class=”blockquote-reverse”>

<p>El el agua clara, que brota en la fuente, un lindo pescado sale de repente. “Lindo pescadito, ¿no quieres salir? A jugar con mi aro, vamos al jardín.</p>

<footer>Anónimo</footer>

</blockquote>

El uso de la etiqueta <blockquote> en Bootstrap
04:22

Bootstrap utiliza la etiqueta <dl> (lista de descripciones), <dt> (término) y <dd> (definición del término)  la siguiente forma:

<dl>

  <dt>dl</dt>

    <dd>Crea la caja que contiene los items de la lista.</dd>

  <dt>dt</dt>

    <dd>Item que contiene un término a definir.</dd>

  <dt>dd</dt>

    <dd>Item que contiene una definición.</dd>

</dl>

Las listas de definiciones en Bootstrap
04:04

Por medio de las etiquetas pre, kdb y code podemos manejar la representación del código en Bootstrap y tiene una representación ligeramente diferente a HTML.

Bootstrap utiliza la etiqueta <code> de la siguiente forma:

<div class="container">

 <h1>Código</h1>

 <p>Es importante incluir la siguiente etiqueta en su código</p>

<code>document.getElementById();</code>

</div>

La etiqueta <kbd>

Bootstrap utiliza la etiqueta <kbd> de la siguiente forma:

<div class="container">

 <h1>Atajos de teclado</h1>

 <p>Para indicar conjunto de teclas se utiliza la etiqueta kdb:</p>

 <p>Use <kbd>ctrl + c</kbd> para copiar texto..</p>

</div>

Etiquetas para el manejo de código con Bootstrap
05:16

Bootstrap también tiene algunas clases contextuales que se pueden utilizar para proporcionar "significado a través de colores".

Las clases para los colores de texto son: .text-muted, .text-primary, .text-success, .text-info, .text-warning y .text-danger:

Clases para remarcar textos y fondos según su contexto
03:58

En esta clase encontrarás los apuntes de la sección.

Apuntes a la sección 2: Tipografía en Boostrap
00:02
+
Manejo de diferentes etiquetas HTML por Bootstrap
20 Lectures 01:54:56
  • La clase .table añade estilos básicos a las tablas.
  • La clase .table-striped alterna los renglones con tonos de colores.
  • La clase .table-bordered añade bordes alrededor de la misma.
  • La clase .table-hover añade un efecto de roll-over sobre el renglón seleccionado.
  • La clase .table-condensed hace una tabla más compacta reduciendo el margen interno o padding a la mitad.
  • Con las clases contextuales podemos colorear los renglones (<tr>) o las celdas  (<td>) en una tabla:
  • La clase .table-responsive crea una tabla resposponsiva. A partir de los 768px de ancho se ajusta la tabla.
Preview 07:16

La clase .img-circle da forma a la imagen a un círculo (IE8 no admite esquinas redondeadas).

La clase .img-rounded da forma a la imagen a un círculo (IE8 no admite esquinas redondeadas).

La clase .img-thumbnail da forma a la imagen a un círculo (IE8 no admite esquinas redondeadas).

Las imágenes responsivas se ajustan automáticamente para adaptarse al tamaño de la pantalla.

Cree imágenes reponsivas añadiendo una clase .img-responsive a la etiqueta <img>.

La imagen entonces se escalará adecuadamente al elemento del padre.

La clase .img-responsive se aplica display: block; anchura máxima: 100%; altura: auto; a la imagen:

Las clases para manejar las imágenes con Bootstrap
07:28

La clase thumbnail

Se tiene una clase .thumbnail podemos hacer una sencilla galería:

<div class=”thumbnail”>

   <a href=”fondos/fondo1.jpg”>

      <img src=”fondos/fondo1.jpg”>

      <div class=”caption”>

      <p>Lorem ipsum dolor sit amet...</p>

   </a>

</div>

Crear una sencilla galería de imágenes con la clase thumbnail
07:09

  • Un “jumbotron” indica una caja grande para llamar la atención adicional a un cierto contenido o información especial.

  • Un “jumbotrón” se muestra como una caja gris con las esquinas redondeadas. También amplía los tamaños de fuente del texto dentro de él.

  • Consejo: Dentro de un “jumbotron” puede poner casi cualquier HTML válido, incluyendo otros elementos / clases de Bootstrap.

  • Utilice un elemento <div> con la clase .jumbotron para crear un jumbotron.
Crear un "jumbotron" y modificarlo en la página
07:05

La clase .page-header

Un encabezado de página es como un divisor de sección.

La clase .page-header agrega una línea horizontal bajo el encabezado (añade un espacio adicional alrededor del elemento).

La clase .page-header como divisor de sección
03:41

Wells o pozos

La clase .well (o “pozo”)añade un borde redondeado alrededor de un elemento con un color de fondo gris y un relleno.

Tamaño del pozo. Cambie el tamaño del pozo añadiendo la clase .well-sm para pozos pequeños o la clase .well-lg para pozos grandes.

La clase .well para remarcar texto con Bootstrap
04:01

Bootstrap nos permite mandar mensajes de alerta (que no son ventanas emergentes como las de JavaScript) dependiendo del contexto como danger, warning, success, etc.

Crear alertas dependiendo de su contexto Bootstrap
09:19

Para lograr los estilos de botón, Bootstrap tiene las siguientes clases:

    .btn

    .btn-default

    .btn-primario

    .btn-success

    .btn-info

    .btn-warning

    .btn-danger

    .btn-link

El manejo de botones desde Bootstrap
04:39

Podemos convertir en botones los hipervínculos y las cajas de entrada (input).

Las clases que definen los diferentes tamaños son:

    .btn-lg

    .btn-md

    .btn-sm

    .btn-xs

Otros tipos de botones y diferentes tamaños de los mismos
08:14

Un botón de nivel de bloque abarca todo el ancho del elemento padre.

Agregue la clase .btn-block para crear un botón de nivel de bloque.

Botones activos / deshabilitados

Un botón puede establecerse en un estado activo (aparecer presionado) o en un estado inhabilitado (unclickable).

La clase .active hace que un botón aparezca presionado, y la clase .disabled hace que un botón se encuentre deshabilitado.

Los estados de los botones y botones de bloque
05:04

Grupos de botones:

Bootstrap le permite agrupar una serie de botones (en una sola línea) en un grupo de botones.

Utilice un elemento <div> con la clase .btn-group para crear un grupo de botones.

Consejo: en lugar de aplicar los tamaños de los botones a cada botón de un grupo, utilice la clase .btn-group-lg | sm | xs para dimensionar todos los botones del grupo.

Grupos de botones
03:49

Grupos de botones verticales

Bootstrap también admite grupos de botones verticales.

Utilice la clase .btn-group-vertical para crear un grupo de botones vertical.

Grupo de botones verticales
03:32

Grupos de botones justificados

Para abarcar todo el ancho de la pantalla, utilice la clase justificada por el grupo .btn-justified.

Justificar el grupo de botones horizontales
03:40

Grupos de botones de anidamiento y menús desplegables
06:56

Glifos

Bootstrap proporciona 260 glyphicons de los Glyphicons Halflings..

Los Glyphicons se pueden utilizar en texto, botones, barras de herramientas, navegación, formularios, etc.

Aquí hay algunos ejemplos de glyphicons:

Correo glyphicon:

Imprimir glyphicon:

Buscar glyphicon:

Descargar glyphicon:

Sintaxis de Glyphicon

Un glifo se inserta con la siguiente sintaxis:

<span class = "glyphicon glyphicon-name"> </ span>

La parte del nombre en la sintaxis anterior debe reemplazarse con el nombre propio del glifo.

El manejo de los glifos en Bootstrap
06:57

Insignias

Las insignias son indicadores numéricos de cuántos elementos están asociados con un enlace.

Los números (5, 10 y 2) son los distintivos.

Utilice la clase .badge dentro de los elementos <span> para crear insignias o burbujas.

Las insignias también se pueden usar dentro de otros elementos, tales como botones.

Crear insignias en Bootstrap
05:10

Etiquetas (label)

Las etiquetas se utilizan para proporcionar información adicional acerca de algo.

Utilice la clase .label, seguida de una de las seis clases contextuales:

.label-default,

.label-primary,

.label-success,

.label-info,

.label-warning o

.label-danger,

dentro de un elemento <span>

Manejo de etiquetas en Bootstrap
03:56

Barra de progreso básica

Se puede usar una barra de progreso para mostrar al usuario hasta qué punto está en un proceso.

Bootstrap proporciona varios tipos de barras de progreso.

Para crear una barra de progreso predeterminada, agregue una clase .progress a un elemento <div>.

Nota: Las barras de progreso no son compatibles en Internet Explorer 9 y versiones anteriores (ya que utilizan transiciones y animaciones CSS3 para lograr algunos de sus efectos).

Nota: Para ayudar a mejorar la accesibilidad de las personas que usan lectores de pantalla, debe incluir los atributos aria- *.

Barras de progreso en Bootstrap
10:42

Paginación básica

Si usted tiene un sitio web con un montón de páginas, es posible que desee añadir algún tipo de paginación a cada página.

Para crear una paginación básica, agregue la clase .pagination a un elemento <ul>.

Estado Activo

Agregue la clase .active para que el usuario sepa en qué página está.

Estado deshabilitado

No se puede hacer clic en un enlace desactivado.

Añadir clase .disabled si un enlace está deshabilitado por alguna razón.

Tamaño de la paginación

Los bloques de paginación también pueden ser dimensionados para un tamaño mayor o un tamaño más pequeño.

Agregue clase .pagination-lg para bloques más grandes o .pagination-sm para bloques más pequeños.

Migas de pan

Otra forma para la paginación, es migas de pan:

La clase .breadcrumb indica la ubicación de la página actual dentro de una jerarquía de navegación: blocks.

Paginación y migas de pan con Bootstrap
06:16

En esta clase encontrarás los apuntes de la sección.

Apuntes a la sección 3: Manejo de otras etiquetas
00:02
+
Herramientas de agrupación
14 Lectures 01:14:34

Grupos de listas básicas

El grupo de lista más básico es una lista no ordenada con elementos de lista:

Para crear un grupo de listas básicas, utilice un elemento <ul> con clase .list-group y <li> elementos con clase .list-group-item.

Preview 09:49

Un panel en Bootstrap es un recuadro bordeado con un relleno alrededor de su contenido.

Los paneles se crean con la clase .panel y el contenido dentro del panel tiene una clase .panel-body.

La clase .panel-default se utiliza para diseñar el color del panel.

Encabezado del Panel

La clase de encabezado de paneles agrega un encabezado al panel.

Pie de página del panel

La clase .panel-footer añade un pie de página al panel.

Paneles y grupos de paneles en Bootstrap
05:05

La clase .dropdown indica un menú desplegable.

Para abrir el menú desplegable, utilice un botón o un enlace con una clase de .dropdown-toggle y el atributo data-toggle = "dropdown".

La clase .caret crea un icono de flecha de cursor, que indica que el botón es una lista desplegable.

Agregue la clase .dropdown-menu a un elemento <ul> para crear el menú desplegable.

Menús dropdowns en Bootstrap
11:55

Los elementos plegables son útiles cuando se desea ocultar y mostrar una gran cantidad de contenido.

La clase .collapse indica un elemento plegable. Este es el contenido que se mostrará o se oculta con un clic de un botón.

Para controlar (mostrar / ocultar) el contenido plegable, agregue el atributo data-toggle = "collapse" a un elemento <a> o un elemento <button>.

Listas colapsables con Bootstrap
08:36

Acordeón

División con la clase .panel-group y un id.

División con panel panel-contextual

División con clase .panel-heading

División con clase .panel-collapse collapse

División con clase .panel-heading

   <h4 class=”panel-title>

      <a data-toggle=”collapse” data-parent=”#acordeon”...

División con clase .panel-collapse collapse

División class=”panel-body”

Nota: Utilice el atributo data-parent para asegurarse de que todos los elementos plegables debajo del padre especificado se cerrarán cuando se muestre uno de los elementos plegables.

Crear un acordeón con Bootstrap
11:53

Menús

La mayoría de las páginas web tienen algún tipo de menú.

En HTML un menú se define a menudo en una lista sin orden <ul>.

Si desea crear un menú horizontal de la lista anterior, agregue la clase .list-inline a <ul>.

Crear un menú sencillo con una lista en línea
02:02

Pestañas o tabuladores

Las pestañas se crean con <ul class = "nav nav-tabs">

Consejo: Marque también la página actual con <li class = "active">

Crear un menú con tabuladores
01:43

Tabuladores con una iista dropdown
03:55

Pastillas o píldoras

Las píldoras se crean con <ul class = "nav nav-pills">. Marque también la página actual con <li class = "active">:

Crear un menú con píldoras
01:59

Píldoras verticales

Las píldoras también se pueden mostrar verticalmente. Simplemente agregue la clase .nav-stacked.

El siguiente ejemplo coloca el menú de píldora vertical dentro de la última columna. Así, en una pantalla grande el menú se mostrará a la derecha. Pero en una pequeña pantalla, el contenido se ajustará automáticamente en un diseño de una sola columna:

Píldoras con menú desplegable

Las píldoras también pueden contener menús desplegables.

Crear un menu vertical con píldoras
01:28

Píldoras verticales en una fila

El siguiente ejemplo coloca el menú de píldora vertical dentro de la última columna. Así, en una pantalla grande el menú se mostrará a la derecha. Pero en una pequeña pantalla, el contenido se ajustará automáticamente en un diseño de una sola columna:

Píldoras con menú desplegable

Las píldoras también pueden contener menús desplegables.

Menu vertical con dropdown
04:40

Pestañas centradas y pastillas

Para centrar / justificar las fichas y píldoras, utilice la clase .nav-justified.

Tenga en cuenta que en las pantallas que son más pequeñas que 768px, los elementos de la lista se apilan (el contenido permanecerá centrado).

Tabuladorer y píldoras centradas en Bootstrap
04:26

Fichas Toggleable / Dinámicas

Para habilitar las pestañas, agregue el atributo data-toggle = "tab" a cada enlace. A continuación, agregue una clase .tab-pane con un ID único para cada ficha y envuélvalos dentro de un elemento <div> con clase .tab-content.

Si desea que las pestañas se atenúen y se apaguen al hacer clic en ellas, añada la clase .fade al panel .tab:

Píldoras Toggleable / Dinámicas

El mismo código se aplica a las píldoras; Sólo cambia el atributo data-toggle a data-toggle = "pill":

Tabuladores y píldoras dinámicas en Bootstrap
07:01

En esta clase encontrarás los apuntes de la sección.

Apuntes a la sección 4: Herramientas de agrupación
00:02
+
Barras de navegación
8 Lectures 37:38

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 contraerse, dependiendo del tamaño de la pantalla. Se crea una barra de navegación estándar con <nav class = "navbar navbar-default">.

Barra de navegación invertida

Si no te gusta el estilo de la barra de navegación predeterminada, Bootstrap proporciona una barra de navegación alternativa.

Simplemente cambie la clase .navbar-default por .navbar-inverse.

Preview 06:13

Barra de navegación con Dropdown

Las barras de navegación también pueden contener menús desplegables.

Barras de navegación con listados dropdown
03:34

Barra de navegación alineada a la derecha

La clase .navbar-right se utiliza para alinear a la derecha los botones de la barra de navegación.

Barra de navegación a la derecha con Bootstrap
03:59

Navbar Botones

Para agregar botones dentro de la barra de navegación, agregue la clase .navbar-btn en un botón Bootstrap.

Agregar botones en la barra de navegación
04:07

Formularios Navbar

Para agregar elementos de formulario dentro de la barra de navegación, agregue la clase .navbar-form a un elemento de formulario y añada una entrada (s).

Tenga en cuenta que hemos añadido una clase .form-group al contenedor div que contiene la entrada.

Para agregar elementos de formulario dentro de la barra de navegación, agregue la clase .navbar-form a un elemento de formulario y añada una entrada (s).

Tenga en cuenta que hemos añadido una clase .form-group al contenedor div que contiene la entrada

Agregar un formulario en la barra de navegación
06:21

También puede usar las clases .input-group y .input-group-addon para adjuntar un icono o texto de ayuda junto al campo de entrada.

Texto de la barra de navegación

Utilice la clase .navbar-text para alinear verticalmente cualquier elemento dentro de la barra de navegación que no sea vínculo (asegura el relleno adecuado y el color del texto).

Mostrar texto, fijar la barra de navegación arriba o abajo
03:28

También puede usar las clases .input-group y .input-group-addon para adjuntar un icono o texto de ayuda junto al campo de entrada.

Texto de la barra de navegación

Utilice la clase .navbar-text para alinear verticalmente cualquier elemento dentro de la barra de navegación que no sea vínculo (asegura el relleno adecuado y el color del texto).

Barra de navegación fija

La barra de navegación también se puede fijar en la parte superior o en la parte inferior de la página.

Una barra de navegación fija permanece visible en una posición fija (superior o inferior) independiente de la página de desplazamiento.

La clase .navbar-fixed-top hace que la barra de navegación esté fija en la parte superior.

Hacer una barra de navegación colapsable con Bootstrap
09:54

En esta clase encontrarás los apuntes de la sección.

Apuntes a la sección 5: Barras de navegación
00:02
+
Manejo de formularios con Bootstrap
11 Lectures 01:04:28

Configuración predeterminada de Bootstrap

Los controles de formulario reciben automáticamente un estilo global con Bootstrap.

Todos los elementos <input>, <textarea> y <select> de texto con clase .form-control tienen un ancho de 100%.

Configuración predeterminada de Bootstrap

Bootstrap proporciona tres tipos de diseños de formularios:

    Forma vertical (esta es la opción predeterminada)

    Forma horizontal

    Forma en línea

Preview 06:14

Formulario Inline de Bootstrap

En una forma en línea, todos los elementos están en línea, alineados a la izquierda y las etiquetas están al lado.

Esto solo se aplica a los formularios dentro de viewports que tienen al menos 768px de ancho.

Formulario Inline de Bootstrap

Regla adicional para una forma en línea.

Agregue la clase .form-inline al elemento <form>

Crear un formulario horizontal en dos columnas con Bootstrap
09:00

Controles de formulario compatibles

Bootstrap admite los siguientes controles de formulario:

  • Input
  • Textarea
  • Checkbox
  • Radio
  • Select

Bootstrap soporta todos los tipos de entrada HTML5: texto, contraseña, fecha y hora, fecha y hora, fecha, mes, hora, semana, número, correo electrónico, url, búsqueda, telefono y color.

Textarea, checkboxes, radio buttons y select en Bootstrap
07:33

Una forma horizontal se distingue de las otras formas tanto en la cantidad de marcado y en la presentación de la forma.

Normas adicionales para un formulario horizontal:

  •     Agregue la clase .form-horizontal al elemento <form>
  •     Agregue la clase .control-label a todos los elementos <label>
Texto estático en las formas con Bootstrap
05:13

Control Estático

Si necesita insertar texto sin formato junto a una etiqueta de formulario dentro de un formulario horizontal, utilice la clase .form-control-static en un elemento <p>.

Agrupar glifos o textos a una caja de entrada con Bootstrap
06:45

Input Groups de Bootstrap

La clase .input-group es un contenedor para mejorar una entrada añadiendo un icono, texto o un botón delante o detrás de él como un "texto de ayuda".

La clase .input-group-addon adjunta un icono o texto de ayuda junto al campo de entrada.

El .input-group-btn adjunta un botón junto a una entrada. Esto se utiliza a menudo junto con una barra de búsqueda.

INPUT FOCUS - Se elimina el contorno de la entrada y se aplica una sombra de cuadro al foco

Estados y contextos en las cajas de entrada en Bootstrap
10:27

Tamaño de entrada en formularios

Establezca las alturas de los elementos de entrada utilizando clases como .input-lg y .input-sm.

Modificar la altura de la caja de entrada con Bootstrap
05:56

Tamaño de entrada en formularios

Establezca las alturas de los elementos de entrada utilizando clases como .input-lg y .input-sm.

Modificar la altura de la caja de entrada en un formulario horizontal
04:18

Tamaño de la columna

col-xs-2

col-xs-3

col-xs-4

Modificar el ancho de una caja de input
03:40

Texto de ayuda

Utilice la clase .help-block para agregar un texto de ayuda de nivel de bloque en formularios.

Los textos de ayuda o help-block en un formulario en Bootstrap
05:20

En esta clase encontrarás los apuntes de la sección.

Apuntes a la sección 6: Formularios
00:02
+
Manejo de objetos media con Bootstrap
5 Lectures 20:50

Objetos de medios

Bootstrap proporciona una manera fácil de alinear objetos multimedia (como imágenes o videos) a la izquierda o a la derecha de algún contenido. Esto se puede utilizar para mostrar comentarios de blog, tweets, etc.

Utilice un elemento <div> con la clase .media para crear un contenedor para objetos multimedia.

Preview 05:42

Alineación superior, central o inferior

El objeto multimedia también puede ser superior, central o inferior alineado con la clase .media-top, .media-middle o .media-bottom.

Alinear verticalmente los objetos media en Bootstrap
06:11

Objetos de medios de anidamiento

Los objetos multimedia también pueden anidarse (un objeto multimedia dentro de un objeto multimedia).

Anidar los media-object en Bootstrap
04:57

Objetos de medios de anidamiento

Los objetos multimedia también pueden anidarse (un objeto multimedia dentro de un objeto multimedia).

Otra forma de anidar los media-objects
03:58

En esta clase encontrarás los apuntes de la sección.

Apuntes a la sección 7: Media Object
00:02
+
Otros temas sobre Bootstrap
12 Lectures 01:27:17

Cómo crear un carrusel

El más externo <div>:

Los carruseles requieren el uso de un id (en este caso id = "carrusel") para que los controles del carrusel funcionen correctamente.

La clase = "carousel" especifica que esta <div> contiene un carrusel.

Preview 06:56

Cómo crear un carrusel

El más externo <div>:

Los carruseles requieren el uso de un id (en este caso id = "carrusel") para que los controles del carrusel funcionen correctamente.

La clase = "carousel" especifica que esta <div> contiene un carrusel.

Crear un carrusel de imágenes, segunda parte
09:21

Añadir subtítulos a diapositivas

Añada <div class = "carousel-caption"> dentro de cada <div class = "item"> para crear una leyenda para cada diapositiva.

Los subtítulos en el carrusel en Bootstrap
04:32

El Modal Plugin

El complemento Modal es un cuadro de diálogo / ventana emergente que se muestra en la parte superior de la página actual.

Un botón lanzador:

<button class="btn btn-info btn-lg" data-toggle="modal" data-target="#mensaje">Mensaje</button>

Las ventanas modales en Bootstrap, primera parte
09:29

El Modal Plugin

El complemento Modal es un cuadro de diálogo / ventana emergente que se muestra en la parte superior de la página actual.

Un botón lanzador:

<button class="btn btn-info btn-lg" data-toggle="modal" data-target="#mensaje">Mensaje</button>

Las ventanas modales en Bootstrap, segunda parte
02:21

El complemento Tooltip

El complemento Tooltip es un pequeño cuadro emergente que aparece cuando el usuario mueve el puntero del ratón sobre un elemento.

El complemento Tooltip

Para crear una información de herramientas, añada el atributo data-toggle = "tooltip" a un elemento.

Utilice el atributo title para especificar el texto que se debe mostrar dentro de la información de herramientas.

<a href="#" data-toggle="tooltip" title="Ups!"> Pasa sobre mí </a>

Crear los tooltips en los elementos HTML con Bootstrap
07:11

El complemento de Popover es similar a tooltips.

Es un cuadro emergente que aparece cuando el usuario hace clic en un elemento.

La diferencia es que el popover puede contener mucho más contenido.

Las ventanas popover en Bootstrap
06:24

Scrollspy

El complemento Scrollspy se utiliza para actualizar automáticamente los enlaces en una lista de navegación basada en la posición de desplazamiento.

La ScrollSpy en Bootstrap, primera parte
10:50

Scrollspy

El complemento Scrollspy se utiliza para actualizar automáticamente los enlaces en una lista de navegación basada en la posición de desplazamiento.

La Scrollspy en Bootstrap, segunda parte
10:38

El componente Affix de Bootstrap
10:35

Dado que los desplazamientos son opcionales, establecer uno requiere que configure el CSS apropiado.

En este caso, agregue la position: absolut; cuando sea necesario.

En el primer ejemplo anterior, el complemento Affix añade la clase .affix (position: fixed) al elemento <nav> cuando hemos desplazado 197 pixels desde la parte superior.

Los componentes Affix y Scrollspy combinados
08:58

En esta clase podrás encontrar los apuntes de la sección.

Apuntes a la sección "Otros temas sobre Bootstrap"
00:02
+
El Grid System en Bootstrap
12 Lectures 01:11:39

Sistema de cuadrícula Bootstrap

El sistema de cuadrícula de Bootstrap permite hasta 12 columnas en la página.

Si no desea utilizar todas las 12 columnas individualmente, puede agrupar las columnas para crear columnas más amplias.

Preview 05:18

Dispositivos pequeños

Supongamos que tenemos un diseño sencillo con dos columnas iguales. Queremos que las columnas se dividan el 50% / 50% para los dispositivos pequeños.

Los dispositivos pequeños se definen como un ancho de pantalla de 768 píxeles a 991 píxeles.

Para dispositivos pequeños usaremos las clases .col-sm- *.

El Grid System para dispositivos pequeños (SM)
09:08

Asegúrese de que la suma siempre suma hasta 12.

Para una división del 33,3% / 66,6%, se utilizarían .col-sm-4 y .col-sm-8.

Dispositivos medios

En el capítulo anterior, presentamos un ejemplo de cuadrícula con clases para dispositivos pequeños. Usamos dos divs (columnas) y les dimos una división del 25% / 75%:

<Div class = "col-sm-3"> .... </ div>

<Div class = "col-sm-9"> .... </ div>

El GridSystem para dispositivos medios (MD)
07:14

Dispositivos grandes

En el capítulo anterior presentamos un ejemplo de cuadrícula con clases para dispositivos pequeños y medianos. Usamos dos divs (columnas) y les dimos una división del 25% / 75% en dispositivos pequeños, y una división 50% / 50% en dispositivos medianos:

<Div class = "col-sm-3 col-md-6"> .... </ div>

<Div class = "col-sm-9 col-md-6"> .... </ div>

El GridSystem para pantallas largas (LG)
06:11

Tres columnas iguales

.col-sm-4

.col-sm-4

.col-sm-4

El siguiente ejemplo muestra cómo obtener tres columnas de igual anchura que empiezan en las tabletas y se escalan a escritorios grandes. En los teléfonos móviles, las columnas se apilarán automáticamente.

Crear una página con tres columnas
04:21

Dos columnas con dos columnas anidadas

En el ejemplo siguiente se muestra cómo obtener dos columnas que empiezan en las tablas y la escala en escritorios grandes, con otras dos columnas (anchuras iguales) dentro de la columna más grande (en los teléfonos móviles, estas columnas y sus columnas anidadas se apilarán).

Anidar columnas dentro de renglones en Bootstrap
07:23

Mezclado: Móvil y Escritorio

El sistema de cuadrícula Bootstrap tiene cuatro clases: xs (teléfonos), sm (tablets), md (escritorios) y lg (escritorios más grandes). Las clases se pueden combinar para crear diseños más dinámicos y flexibles.

Cada clase se incrementa, por lo que si desea establecer los mismos anchos para xs y sm, solo necesita especificar xs.

Crear un layout con varios renglones desiguales en Bootstrap
07:17

Visible/Hidden

Con visible-* mostramos una columna.

Con hidden-* ocultamos una columna.

Las clases Hidden y Visible
05:50

Clearfix

Por medio de clase .clearfix limpiamos la flotación de las cajas cuando se modifica el tamaño del viewport.

La clase .clearfix en Bootstrap
06:03

Offset (desplazamiento) de columnas

Mueve las columnas hacia la derecha (las desplaza) utilizando las clases .col-*-offset- *.

Estas clases aumentan el margen izquierdo de una columna por * columnas.

La clase .offset en Bootstrap
06:38

Push y Pull - cambia la orden de la columna

Cambie el orden de las columnas de la cuadrícula con las clases .col-md-push- * y .col-md-pull- *:

Push y Pull - cambia la orden de la columna

XS: Extra small devices Phones (<768px)    

SM: Small devices Tablets (≥768px)    

MD: Medium devices Desktops (≥992px)    

LG: Large devices Desktops (≥1200px)

Las clases pull y push en Bootstrap
06:14

En esta clase encontrarás los apuntes de la sección.

Apuntes a la sección "El Grid System"
00:02
2 More Sections
About the Instructor
Francisco Javier Arce Anguiano
4.4 Average rating
981 Reviews
12,853 Students
34 Courses
Lic. Matemáticas Aplicadas y Computación

Soy licenciado en matemáticas aplicadas y computación por parte de la Universidad Nacional Autónoma de México e instructor certificado de Adobe desde 2002. He trabajado para diferentes centros autorizados de Adobe en México y da clases en universidades de la Ciudad de México. Asimismo, he publicados cuatro libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de Méxicoasi como un libro de desarrollo de juegos con ActionScript con la misma editorial. He desarrollado aplicaciones para Android, iPhone, Windows Phone y BlackBerry. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología. También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.