Tutorial de Bootstrap: guía para usar los componentes

Bootstrap es un framework del lenguaje CSS gratis que da dinamismo y capacidad de respuesta a las páginas web. Por dinamismo, nos referimos a que los diferentes elementos (front end) cambian de tamaño de acuerdo con el cambio en el tamaño de la pantalla sin comprometer el estilo de la página web como sucedería tradicionalmente con los métodos CSS.

Bootstrap framework también se denomina "framework CSS mobile-first", ya que está diseñado para tener un diseño de cuadrícula CSS mediante la definición de filas y columnas. Bootstrap también tiene componentes del lenguaje JavaScript junto con clases de CSS. Para usarlo, debes obligatoriamente conectar jQuery y JavaScript Framework for Bootstrap junto con los otros archivos CSS de Bootstrap.

Bootstrap framework proporciona docenas de componentes que se pueden reutilizar para brindar una buena user experience e interacción del usuario en una página web, como barra de navegación, ventana emergente, menú desplegable, íconos, botones, formularios prediseñados e incluso opciones de cambio de tamaño para varios elementos DOM. Un elemento DOM es algo así como un DIV, HTML, BODY en una página web. Puede agregar clases a todos estos usando CSS o interactuando con ellos.

En este tutorial de Bootstrap conoceremos y utilizaremos algunos de los componentes más importantes de este framework, adaptándonos también a las plantillas de Bootstrap que más se adapten al componente que queramos utilizar.

1. Glyphicons: estos son los iconos con formato de fuente disponibles en Bootstrap. Hay alrededor de 200. Hay glyphicons para indicar casi todas las acciones como zoom, edición, alerta, inserción/descarga de archivos, eliminación, etc., y se definen en una sola clase. Por lo tanto, es necesario usar la clase base y la clase individual, idealmente en un elemento de intervalo, y usar estos glyphicons.
2. Dropdown menu: estos son menús basados ​​en botones que generan una lista emergente de elementos o enlaces. Estos se hacen más dinámicos con el complemento de JavaScript y son muy útiles cuando se trabaja en bootstrap form templates.

¿Cómo usarlo?

La clase .dropdown debe insertarse en el DIV porque la clase de elemento tiene los elementos en la lista debajo de ella con el menú class .dropdown.

​<div class= "dropdown"><!-- have your list in this with the class .dropdown-menu --></div>

3. Button groups: este componente Bootstrap permite agrupar un conjunto de botones de forma adyacente. Para que puedas colocarlos estratégicamente dentro de la plantilla de Bootstrap. Para usarlo, usa la clase "btn-group" antes de especificar que es un botón.

   <div class="btn-group"><button class= "btn">Correct</button></div>
   <div class="btn-group"><button class= "btn">Wrong</button></div>
   

4. Navbar: uno de los componentes de Bootstrap más personalizables e importantes dentro de un sitio web dinámico. La navbar es una barra de navegación que puede tener formas infinitamente diferentes de interactuar y mostrarla, tanto que el framework ha reservado una categoría separada llamada Bootstrap navbar templates.

   <nav class = "navbar"><!—Code your navigation DOM elements --></nav>
   

5. Input groups: otro componente que amplía la clase form-control y agrega texto o botones a un campo de entrada. Los .input-groups son muy útiles para agrupar y personalizar campos de entrada dentro de plantillas de formulario específicas de Bootstrap. Hace que mostrar campos de entrada en formularios muy grandes sea más fácil e intuitivo. La sintaxis es la siguiente:

   <div class="input-group">
   <span class="input-group-addon" id="basic-addon1">@</span>
   <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
   </div>

6. Alert: los componentes de Bootstrap cubren todos los aspectos de la experiencia del usuario. Este componente es muy útil y simple, especialmente si deseas dar retroalimentación al usuario mientras interactúas con la página web.

   <div class="alert alert-success" role="alert">...</div>
   

Estos son solo algunos de los componentes de Bootstrap más útiles y versátiles para usar. Los componentes de Bootstrap se crean con una nomenclatura básica, que se puede editar según las prioridades del desarrollador web. Lo que es particularmente útil para generar variantes de un componente son los medios que el framework pone a disposición. La documentación de Bootstrap sobre los componentes también explica cómo crear el propio componente desde cero. Esto hace que el enfoque sea más personal y te permite tener un control total sobre el dinamismo y la capacidad de respuesta del sitio web.

Mejorar la user experience y la interacción con el usuario es un requisito fundamental para un sitio web receptivo y fácil de usar. La gran mayoría de la población utiliza dispositivos portátiles como tabletas y teléfonos inteligentes, que varían mucho en resolución de píxeles y tamaño de pantalla, por eso es muy importante tener un diseño frontal que sea lo suficientemente receptivo para adaptarse a cualquier tipo de pantalla sin compromiso. la integridad de la página web.

Por lo tanto, ser experto en Bootstrap y dominar sus componentes aumentaría tus oportunidades laborales a los ojos de las empresas que desarrollan web.