Compartir a través de

Información general de Bootstrap

  • Artículo

Bootstrap es un marco de trabajo front-end que le ayuda a diseñar interfaces web con componentes CSS y JavaScript listos para usar para elementos comunes como navegación, formularios y botones. También tiene un sistema de diseño de cuadrícula dinámico que ajusta el sitio para dispositivos con diferentes tamaños de pantalla, como teléfonos y tabletas. Mediante el sistema de diseño de Bootstrap, puede crear un solo sitio que presente una interfaz adecuada para cualquier dispositivo que los clientes puedan usar.

Las plantillas de Power Pages utilizan componentes Bootstrap estándar con estilos personalizados mínimos. Con estas plantillas puede cambiar fácilmente el tema (fuentes, colores, etc.) para que coincida con su marca y preferencias de manera coherente en todo su sitio.

Power Pages admite Bootstrap versión 3.3.6 y Bootstrap versión 5. La versión 5 de Bootstrap ofrece funciones mejoradas de experiencia de usuario (UX) y nuevos componentes como acordeón, offcanvas y compatibilidad con RTL.

Para sitios Power Pages nuevos, deberá configurar Bootstrap versión 5 en tu entorno. También puede migrar sus sitios web existentes de la versión 3 de Bootstrap a la versión 5.

Personalizar Bootstrap

Para personalizar Bootstrap puede cambiar los valores de variables y después descargar una versión de Bootstrap que se compila con sus valores personalizados.

La potencia de las variables Bootstrap es que definen todos los estilos en el marco de trabajo, no solo un elemento. Por ejemplo, la variable @font-size-base especifica el tamaño predeterminado del texto en su sitio: texto del cuerpo, encabezados y todos los demás elementos de texto. Un encabezado H1 podría definirse como el 300 por ciento de @font-size-base. Al establecer esta variable, puede controlar la escala tipográfica completa del sitio web de una manera coherente.

Puede crear una versión personalizada de Bootstrap a través del sitio oficial de Bootstrap o utilizar un sitio de terceros que pueda ofrecer una interfaz más sencilla o temas prediseñados. El sitio de Personalización oficial de Bootstrap tiene más información sobre la personalización de Bootstrap.

Cuando descarga una versión personalizada de Bootstrap, esta contendrá la siguiente estructura de directorios:

css/
    |-- bootstrap.min.css 
img/
    |-- glyphicons-halflings-white.png 
    |-- glyphicons-halflings.png 
js/ 
    |-- bootstrap.min.js

En función de la aplicación de personalizador utilizada, la estructura de directorios solo podría contener bootstrap.min.css. Es el archivo que contiene sus personalizaciones. Los demás archivos son los mismos para todas las versiones personalizadas de Bootstrap y ya están incluidas en el sitio web.

Pasos siguientes

Consulte también