Probablemente estés familiarizado con la funcionalidad de los frameworks. Su colección de sintaxis para tareas específicas permite a los desarrolladores crear sitios web mucho más rápido, ya que no necesitan preocuparse por los comandos y funciones básicas.
Aun así, hubo una falta de coherencia debido al uso extensivo de bibliotecas que exigió un cambio. Bootstrap respondió a la llamada.
Pero, ¿qué es bootstrap? es un framework de interfaz de usuario, de código abierto, creado para un desarrollo web más rápido y sencillo. Mark Otto y Jacob Thornton fueron los creadores iniciales.
Contiene todo tipo de plantillas de diseño basadas en HTML y CSS para diversas funciones y componentes, como navegación, sistema de cuadrícula, carruseles de imágenes y botones.
Si bien Bootstrap ahorra tiempo al desarrollador de tener que administrar las plantillas repetidamente, su objetivo principal es crear sitios responsive. Permite que la interfaz de usuario de un sitio web funcione de manera óptima en todos los tamaños de pantalla, ya sea en teléfonos de pantalla pequeña o en dispositivos de escritorio de pantalla grande.
Por lo tanto, los desarrolladores no necesitan crear sitios específicos para dispositivos y limitar su rango de audiencia.
Debido a su popularidad, surgen cada vez más comunidades Bootstrap. Estos son grandes lugares para que los desarrolladores y diseñadores intercambien conocimientos y discutan las últimas versiones del framework.
3 Archivos primarios de Bootstrap
Ya sabemos qué es Bootstrap; consiste en una colección de sintaxis que realizan funciones específicas. Debido a esto, tiene sentido que el marco tenga solo tres diferentes tipos de archivos. A continuación, detallamos los tres archivos principales que administran esta interfaz de usuario y la funcionalidad de un sitio web.
Bootstrap.css
Bootstrap.css es un framework CSS que organiza y gestiona el diseño de un sitio web. Mientras que HTML gestiona el contenido y la estructura de una página web, CSS se ocupa del diseño del sitio. Por esa razón, ambas estructuras deben coexistir para realizar una acción en particular.
Debido a sus funciones, CSS te permite crear una apariencia uniforme en tantas páginas web como desees. Podrás decirle adiós a las horas de edición manual solo para cambiar el ancho de un borde.
Con CSS, todo lo que necesitas hacer es referir las páginas web al archivo CSS. Cualquier alteración necesaria se puede hacer en ese único archivo.
Las funciones de CSS no se limitan solo a los estilos de texto, ya que pueden usarse para dar formato a otros aspectos de la página web, como tablas y diseños de imágenes.
Dado que CSS tiene muchas declaraciones y selectores, memorizarlos todos puede llevar algo de tiempo. Sabemos lo ansioso que estás por comenzar, así que aquí hay una hoja de trucos (en inglés) que te ayudará a acortar el proceso de aprendizaje.
Bootstrap.js
Este archivo es la parte principal de Bootstrap. Consiste en archivos JavaScript que son responsables de la interactividad del sitio web.
Para ahorrar tiempo escribiendo sintaxis de JavaScript en numerosas ocasiones, los desarrolladores tienden a usar jQuery. Es una popular biblioteca de JavaScript multiplataforma de código abierto que permite agregar varias funciones a un sitio web.
Aquí hay algunos ejemplos de lo que puede hacer jQuery:
- Realizar solicitudes de Ajax, como restar datos de otra ubicación de forma dinámica.
- Crear widgets usando una colección de complementos de JavaScript.
- Crear animaciones personalizadas usando propiedades CSS.
- Agregar dinamismo al contenido del sitio web.
Si bien un Bootstrap con propiedades CSS y elementos HTML puede funcionar bien, necesita jQuery para crear un diseño receptivo. De lo contrario, solo puede usar las partes estáticas y desnudas de CSS.
Glyphicons
Los iconos son una parte integral de la interfaz de un sitio web. A menudo se asocian con determinadas acciones y datos dentro de la interfaz de usuario. Bootstrap usa Glyphicons para satisfacer esa necesidad.
Bootstrap incluye un conjunto Glyphicons Halflings que se ha desbloqueado para uso gratuito. La versión gratuita tiene un aspecto estándar pero es adecuada para funciones esenciales.
Si deseas encontrar íconos más elegantes, Glyphicons vende varios conjuntos premium que, sin duda, se verán mejor en sitios web específicos de nichos.
También puedes descargar íconos individuales y específicos por tema de forma gratuita en varios sitios web como Flaticon, GlyphSearch e Icons8.
Algunos iconos pueden verse afectados por CSS para cambiar su apariencia mientras que otros están como predeterminados. Utiliza los iconos que mejor se adapten a las necesidades de tu sitio.
Cómo usar Bootstrap
Para tener una mejor idea de qué es bootstrap y cómo usarlo, echa un vistazo al siguiente ejemplo.
- <html lang=»en»>
- <head>
- <meta charset=»utf-8″ />
- <meta http-equiv=»X-UA-Compatible» content=»IE=edge» />
- <meta name=»viewport» content=»width=device-width, initial-scale=1″ />
- <title>Bootstrap 101 Template</title>
- <link href=»css/bootstrap.min.css» rel=»stylesheet» />
- </head>
- <body>
- <h1>Hello, world!</h1>
- <script src=»https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js»></script>
- <script src=»js/bootstrap.min.js»></script>
- </body>
- </html>
Codificación de caracteres para el documento HTML. En este caso, UTF-8 se refiere a Unicode.
- meta charset = «utf-8»
Indica el conjunto de caracteres que se utiliza para escribir el sitio web.
- meta http-equiv=»X-UA-Compatible»
Determina la versión de Internet Explorer que debe representar la página. Al usar el modo Edge, está configurado para usar el modo más alto disponible.
- meta name=»viewport»
Garantiza que la página tenga una relación de 1:1 con el tamaño de la ventana gráfica.
- link href=»css/bootstrap.min.css»
- rel=»stylesheet»
Esta es la parte donde agregamos el CSS central de Bootstrap.
- src=»https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js»
Carga jQuery a través de Google CDN. Es mejor cargarlo desde la CDN a través de HTTP, ya que los archivos se pueden almacenar en caché durante un año.
- src=»js/bootstrap.min.js
Agrega el JavaScript principal de Bootstrap. Esta sintaxis siempre debe estar por debajo de la sintaxis de jQuery para funcionar correctamente. El proceso de adición se puede realizar a través de la URL de Google o mediante una descarga manual.
