Introducción a los componentes de Bootstrap
Originalmente llamado Twitter Blueprint, esto fue desarrollado por Mark Otto y Jacob Thronton en Twitter. Bootstrap es un marco CSS gratuito que imparte capacidad de respuesta a las páginas web. Por capacidad de respuesta, significa que diferentes elementos DOM se redimensionan de acuerdo con el cambio en el tamaño de la pantalla sin comprometer la elegancia de la página web, ya que de lo contrario sucedería tradicionalmente con los métodos CSS de tamaño de píxel o porcentaje.
Esto también se conoce como el marco CSS 'mobile-first', ya que está diseñado para tener un diseño de cuadrícula CSS definiendo las filas y columnas. Este marco también tiene componentes de JavaScript junto con clases de CSS. Para utilizar este marco, debe vincular obligatoriamente jQuery y JavaScript Framework para Bootstrap junto con los otros archivos CSS de Bootstrap. Estos archivos CSS están disponibles para descargar, así como en forma de CDN (Content Delivery Network).
Diferentes componentes de Bootstrap:
Bootstrap se incluye con decenas de componentes que se pueden reutilizar para proporcionar una buena experiencia de usuario e interacciones de usuario en una página web como barras de navegación, ventanas emergentes, menús desplegables, iconos, botones, formularios prediseñados y también opciones de tamaño para diferentes elementos DOM.
1) Glifos : estos son los iconos con formato de fuente que están disponibles en Bootstrap. Son alrededor de 200 en número. Estos glificones se pueden encontrar en https://glyphicons.com.
¿Cómo usarlo?
Hay glifos para denotar casi todas las acciones como zoom, editar, advertencia, archivo, eliminar, etc. y se definen en una clase individual. Por lo tanto, debe usar la clase base y la clase individual, idealmente en un elemento span y usar estos glifos.
Sintaxis:
2) Desplegables : estos son los menús basados en alternar una lista de enlaces. Estos complementos se vuelven más dinámicos con el complemento JS y se pueden encontrar en http: // getbootstrap / javascript / # dropdowns
¿Cómo usarlo?
Debe usar la clase .dropdown ya que la clase del elemento tiene los elementos de la lista debajo de ella con la clase .dropdown-menu.
Sintaxis:
3) Grupos de botones : con este componente Bootstrap puede agrupar un conjunto de botones en una serie adyacente entre sí.
¿Cómo usarlo?
Defina elementos de división con clase .btn-group y anide esos elementos con botón con clase .btn. Correcto
Incorrecto
4) Menú desplegable de botones : este componente se utiliza para emplear un elemento de botón para activar un menú desplegable.
Sintaxis:
5) Grupos de entrada : esto amplía la clase de control de formulario y agrega texto o botones a cada lado de un campo de entrada de un elemento de entrada. Debe usar la clase .input-group con una clase .input-group-addon para usar estos grupos de entrada.
Sintaxis:
@ @
6) Barra de navegación : estos componentes sirven como encabezados de navegación para su sitio web. Se pliegan para expandirse verticalmente con un menú de hamburguesas en los dispositivos de pantallas más pequeñas y se vuelven horizontales a medida que aumenta el ancho de la pantalla.
Sintaxis:
7) Jumbotron : este es un componente de arranque que puede extenderse por la pantalla completa (o ventana) para mostrar contenido clave.
Sintaxis:
8) Alertas : este es un componente de Bootstrap con un complemento jQuery que proporciona mensajes de retroalimentación contextual según la acción del usuario. Esto se usa básicamente para mostrar mensajes de alerta.
Sintaxis: …
9) Barras de progreso : este componente se utiliza para proporcionar los elementos visuales sobre los comentarios sobre el progreso del trabajo o la acción con una barra de progreso.
Synatx:
Ejemplo:
10) Insignias : este es un componente para resaltar algo como elementos no leídos agregando la clase .badge al elemento DOM, preferiblemente un intervalo.
Sintaxis:
Mensajes 3
11) Paginación: este componente proporciona a su sitio una paginación de varias páginas para que el contenido pueda
dividirse en varias páginas y navegar a gusto. Por lo general, el elemento DOM para listas desordenadas se define con esta clase .pagination.
Sintaxis:
¿Cómo te ayudará esto en tu carrera?
Todas las empresas ahora se están centrando en la interacción del usuario y la experiencia del usuario (UI / UX). Porque la gran mayoría de la población está utilizando dispositivos portátiles como tabletas y teléfonos inteligentes que varían ampliamente en términos de resolución de píxeles y tamaño de pantalla. Es por eso que es realmente importante tener un diseño front-end que sea lo suficientemente sensible como para ajustarse a cualquier tipo de pantalla sin comprometer la elegancia de la página web.
Por lo tanto, ser experto en Bootstrap le agregaría valor en la carrera técnica y las empresas estarían ansiosas por contratarlo con un buen sueldo. Y, debido a que es gratuito y de código abierto, hay muchos ámbitos para que usted pueda contribuir como desarrollador y hacerlo aún mejor de lo que es hoy.
Conclusión-
El marco Bootstrap es una herramienta muy útil para incorporar la capacidad de respuesta a las páginas web. Los componentes explicados en este blog son algunos de los muy utilizados que lo ayudan a escribir menos código para obtener más funcionalidad y agregar más elegancia a la página web que está creando.
Artículos recomendados
Esta ha sido una guía para los componentes de Bootstrap. Aquí también discutimos una introducción y diferentes componentes de bootstrap junto con su sintaxis. También puede consultar nuestros otros artículos sugeridos para obtener más información:
- Cómo instalar Bootstrap
- Angular vs Bootstrap
- Curso de entrenamiento Bootstrap
- Preguntas de la entrevista Bootstrap
- ¿Cómo usar el diseño Bootstrap?
- Los 5 tipos principales de boostrap con código de muestra