Diseño de sitios web interactivos con Bootstrap

Bootstrap es un framework popular gratuito de HTML, CSS y JavaScript que se usa para desarrollar sitios web interactivos principalmente para dispositivos móviles. El framework incluye plantillas interactivas para CSS y HTML de botones, tablas, navegación, carruseles de imágenes (carousel) y otros elementos que puede usar en su página web. Además, incorpora varios complementos de JavaScript que facilitan el desarrollo de sitios web interactivos increíbles, incluso a los desarrolladores con conocimientos básicos de programación.

Dreamweaver permite crear documentos de Bootstrap y modificar páginas web creadas con Bootstrap. Tanto si se trata de archivos de Bootstrap diseñados completamente como de trabajos en curso, podrá modificarlos en Dreamweaver; no solo para editar el código, sino también para realizar cambios de diseño con las inmejorables funciones de edición visual como, por ejemplo, la Vista en vivo, el Diseñador de CSS, las Consultas de medios visuales y Extract.

Sé cómo usar las cuadrículas fluidas en Dreamweaver. ¿Cómo empiezo a usar Bootstrap?

Al crear documentos de cuadrícula fluida, Dreamweaver hizo que sus páginas web fueran interactivas, aplicando automáticamente las clases apropiadas. Lo único que usted tuvo que hacer fue centrarse en el contenido y decidir cómo reajustarlo según las diferentes relaciones de aspecto.

Del mismo modo, en los documentos de Bootstrap solo tiene que centrarse en el contenido y el diseño, pues de la interactividad ya se ocupa Dreamweaver, al estar perfectamente integrado con el framework de Bootstrap.

Dreamweaver actualmente admite las versiones Bootstrap 3.4.1, 4.4.1 y 5.3.8:

• Bootstrap 3.4.1 incluye un sistema de cuadrícula fluida adaptable y móvil primero que se escala apropiadamente hasta 12 columnas a medida que aumenta el tamaño del dispositivo o de la ventana gráfica.Incluye clases predefinidas para opciones de diseño sencillas, así como potentes mixins para generar diseños más semánticos.Consulta la documentación de Bootstrap.
• Bootstrap 4.4.1, con cambios importantes, incluye una potente cuadrícula flexbox móvil primero para crear diseños de todas las formas y escalas gracias a un sistema de doce columnas, cinco niveles adaptables predeterminados, variables y mixins de Sass, y docenas de clases predefinidas.Consulta la documentación de Bootstrap.
• Bootstrap 5.3.8 introduce variables CSS mejoradas para una personalización más sencilla, modos de color ampliados que incluyen compatibilidad con modo oscuro, sistema de cuadrícula mejorado con utilidades actualizadas y eliminación de la dependencia de jQuery para un desarrollo web más limpio, rápido y moderno.Consulta la documentación de Bootstrap

Si quiere empezar a usar documentos de Bootstrap en Dreamweaver, pruebe a utilizar las plantillas de inicio de Bootstrap. Dreamweaver incorpora una serie de plantillas especializadas en los diferentes tipos de sitios web que se pueden crear, por ejemplo, incluye plantillas de comercio electrónico o de portafolio.

¿Con Dreamweaver, puedo convertir documentos de cuadrícula fluida existentes en documentos de Bootstrap?

No, no hay ninguna forma directa de convertir los documentos de cuadrícula fluida que tenga en documentos de Bootstrap. Sin embargo, la experiencia que tiene el usuario en Dreamweaver al crear y diseñar documentos de Bootstrap es muy parecida a la de los documentos de cuadrícula fluida. Por ejemplo, puede empezar por crear un documento de Bootstrap directamente desde el cuadro de diálogo Nuevo documento. Mientras creas documentos de cuadrícula fluida para tres factores de forma básicos (móvil, tableta y escritorio) para Bootstrap, comienzas creando un documento para tamaños de pantalla básicos: pequeño, medium, grande, extra grande y extra extra grande.Las opciones de edición de diseño que se muestran al hacer clic en los elementos de un documento de Bootstrap también son parecidas a las de los documentos de cuadrícula fluida.

¿Puedo importar sitios antiguos en la última versión de Dreamweaver?

Sí, puede importar sitios antiguos en la última versión de Dreamweaver. Al hacerlo, Dreamweaver busca el archivo CSS de Bootstrap en la carpeta raíz del sitio/css/. 

• Si el sitio contiene un archivo CSS de Bootstrap v3, la versión de Bootstrap en Administrar sitio > Configuración avanzada > Bootstrap se establece en 3.4.1.
• Si el sitio contiene un archivo CSS de Bootstrap v4, la versión de Bootstrap en Administrar sitio > Configuración avanzada > Bootstrap se establece en 4.4.1.
• si el sitio tiene un archivo CSS de Bootstrap v4, la versión de Bootstrap en Administrar sitio > Ajustes avanzados > Bootstrap está configurada en 5.3.8.
• si el sitio no tiene ningún archivo CSS de Bootstrap en la ruta site root/css, la versión de Bootstrap en Administrar sitio > Ajustes avanzados > Bootstrap está configurada en 5.3.8.

Crear documentos de Bootstrap

Puede empezar a diseñar su sitio web con Bootstrap mediante una de las siguientes opciones del cuadro de diálogo Nuevo documento:

• Plantillas de inicio de Bootstrap (Plantillas de inicio > Plantillas de Bootstrap): utilice esta opción si quiere empezar rápidamente sin tener que molestarse en diseñar las páginas a partir de cero. Solo tiene que editar el texto y reemplazar los activos, si lo necesita, y habrá creado un sitio web interactivo. Para obtener más información, consulte Uso de las plantillas de inicio de Bootstrap.
• Crear un documento HTML basado en el framework de Bootstrap (Nuevo documento > HTML > Bootstrap): use esta opción si quiere crear su sitio web paso a paso, utilizando componentes de Bootstrap y CSS en Dreamweaver. Para obtener más información, consulte Creación de documentos HTML basados en el framework de Bootstrap.
  

Uso de las plantillas de inicio de Bootstrap

Las plantillas de inicio de Bootstrap le permiten crear páginas web de temas populares en un abrir y cerrar de ojos. Todos los archivos dependientes del framework se guardan automáticamente.

Crear documentos HTML basados en el marco Bootstrap

Puede empezar a crear su sitio web interactivo mediante la creación de un documento HTML basado en el framework de Bootstrap. También puede decidir si crear un conjunto de archivos con el framework de Bootstrap o usar los archivos existentes. Una vez que se haya creado el documento, puede añadir componentes de Bootstrap como acordeones y carruseles (carousel) mediante el panel Insertar de Dreamweaver. O bien, si tiene composiciones de Photoshop, puede utilizar Extract para incluir las imágenes, las fuentes, los estilos, el texto y mucho más en su documento de Bootstrap.

Abrir archivos de Bootstrap

Puede abrir los archivos de Bootstrap de una de las siguientes formas:

• Haga clic en Archivo > Abrir y busque el archivo HTML de Bootstrap.
• (Recomendada) Cree un sitio de Dreamweaver y señale la carpeta del sitio en la carpeta que contiene todos sus archivos de Bootstrap.

Al abrir un archivo HTML de Bootstrap en Dreamweaver:

• Las filas se resaltan con líneas discontinuas en gris y las esquinas se muestran redondeadas
• Las columnas se resaltan en azul, con líneas discontinuas

Dreamweaver reconoce los archivos CSS asociados con cualquier otro archivo HTML de Bootstrap si en el nombre se incluye “bootstrap”. La referencia del archivo CSS puede ser cualquiera de las siguientes o todas:

• Ruta local:

  El archivo CSS disminuido o no disminuido está presente localmente. Por ejemplo:

  <link href="css/bootstrap.css" rel="stylesheet"> o
  <link href="css/bootstrap.min.css" rel="stylesheet">

• Ruta remota:

Un archivo CSS disminuido o no disminuido remoto. Por ejemplo:

<link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
<link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">

• CDN

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_version_number>/css/bootstrap.min.css" rel="stylesheet">

Ocultar, mostrar y administrar elementos ocultos de Bootstrap

A veces, es posible que necesite mostrar un elemento en una ventana gráfica y, al mismo tiempo, ocultar ese elemento en otra ventana gráfica por razones de diseño. 

Para ocultar un elemento de Bootstrap, haga clic con el botón derecho del ratón y seleccione Ocultar elemento. El elemento se ocultará temporalmente y no podrá verlo.

Para ver y mostrar los elementos ocultos, haga clic con el botón derecho del ratón y seleccione Administrar elementos ocultos. Los elementos ocultos aparecerán en gris con un fondo sombreado. Haga clic en el icono con forma de ojo para mostrar el elemento.

Añadir componentes de Bootstrap

La opción Componentes de Bootstrap del panel Insertar enumera todos los componentes de Bootstrap que puede añadir a su página web en Dreamweaver. Según la versión de Bootstrap del archivo bootstrap.css vinculado a la página HTML, los componentes correspondientes se enumeran en el panel Insertar.  Por ejemplo, en Bootstrap v4.0.0, podrá ver componentes adicionales como, por ejemplo, tarjetas y distintivos. De manera similar, los componentes Glyphicons, panel, Wells y Thumbnails solo están disponibles en Bootstrap v3.3.7.Según la versión de Bootstrap, verás los componentes respectivos en el panel Insert.Asimismo, el componente de controles de giro solo está disponible en Bootstrap v4.4.1.

Los componentes del panel Insertar se rellenan según los criterios siguientes:

• En Bootstrap v5.3.8, puedes acceder a componentes nuevos y mejorados como Offcanvas, Modal, Toasts, Scrollspy y Floating Labels.Algunos componentes más antiguos, como Jumbotron y Media Object, se han eliminado o reemplazado con enfoques actualizados basados en utilidades.El panel Insert refleja dinámicamente estos cambios según el marco Bootstrap 5.3.8 vinculado.
• Documento en foco: los componentes del panel Insertar se rellenan según la versión de Bootstrap que venga en el archivo de Bootstrap que está vinculado al documento. 
• Versión en Preferencias del sitio: Para un documento que no es Bootstrap, Dreamweaver busca la versión en Preferencias del sitio > Avanzado > Bootstrap.Según la versión seleccionada, se completan los componentes apropiados.Por defecto, para sitios nuevos, la versión es 5.3.8.
• Dónde se guardan los archivos: Para un documento que no es bootstrap y que no forma parte de ningún sitio, el panel Insert refleja los componentes 4.4.1.

Para añadir un componente, arrástrelo desde el panel hasta la página web. Antes de soltar el componente, observe las ayudas visuales como las Guías interactivas, Insertar con precisión (utilizando DOM) y el Asistente de posición. Utilice estas ayudas para colocar los componentes de forma rápida y precisa en su página. Para obtener más información sobre cómo insertar elementos en su página web, consulte Información general del panel Insertar.

Añadir filas

Haga clic en la fila tras la que desee añadir la fila nueva. A continuación, haga clic en el icono Añadir nueva fila. Se añadirá una fila de Bootstrap junto con dos elementos secundarios de columnas con seis columnas cada uno.

El código de la fila añadida es el siguiente:

<div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>

donde * representa el tamaño de pantalla actual en Dreamweaver.

Añadir columnas

Seleccione la columna que quiera y, a continuación, haga clic en el icono de Añadir nueva columna. La columna seleccionada se duplicará sin sus elementos secundarios.

Las columnas que estén vacías mostrarán una altura mínima de 20 px. No obstante, esta altura no se añade realmente a la página, sino que se muestra solo en la Vista en vivo para facilitar la inserción de elementos dentro de las columnas.

Duplicar filas y columnas

Haga clic en la fila o en la columna que desee duplicar y, a continuación, haga clic en el icono duplicar, situado en la esquina inferior derecha. La fila o la columna entera se duplicará, junto con todo su contenido.

Cambiar de tamaño y desplazar las columnas

La tarea de cambiar el tamaño de las columnas y desplazarlas se convierte en esencial cuando se están creando diseños interactivos para varias ventanas gráficas. 

Cambiar el tamaño de las columnas

Para un documento Bootstrap v5.3.8, cuando cambias el tamaño de una columna, la clase col-*-n se agrega de la misma manera, donde * representa la consulta de medios actual (sm, md, lg, xl o xxl) y n indica el número de columnas que abarca el elemento.El nuevo punto de interrupción xxl proporciona un mejor control del diseño para pantallas muy grandes.Además, puedes usar columnas de diseño automático (por ejemplo, col o col-md-auto) que se ajustan automáticamente según el contenido sin especificar un número fijo de columnas.

Haga clic en la columna en cuestión y arrastre el controlador a la derecha para cambiar el tamaño. Para un documento de Bootstrap v4.0.0, al cambiar el tamaño de una columna, se añade la clase col-*-n, donde * representa la consulta de medios actual (sm, md, ld, xl) y n representa el número de columnas que ocupa. Para el tamaño de pantalla Superpequeño, se añade la clase col-n.

Para documentos de Bootstrap v3.3.7, al cambiar el tamaño de una columna, se añade la clase col-*-n, donde * representa la consulta de medios actual (xs, sm, md, o lg) y n representa el número de columnas que ocupa.

Dreamweaver detecta el tamaño actual de la pantalla y añade la clase apropiada. Si desea cambiar el tamaño de las columnas para adaptarlas a ventanas gráficas específicas, cambie el tamaño de la ventana gráfica mediante las opciones que se muestran en la esquina inferior derecha o la barra de desplazamiento. Luego, ajuste el tamaño de las columnas según corresponda.

Desplazar columnas

Para un documento Bootstrap v5.3.8, cuando desplazas la columna, se agrega la clase offset-*-n, donde * representa la consulta de medios actual (sm, md, lg, xl o xxl) y n indica el número de columnas por las que se desplaza el elemento.Bootstrap 5 también permite la alineación mediante clases de utilidad de margen (por ejemplo, ms-auto o me-auto) para diseños más flexibles y adaptables.

Haga clic en la columna en cuestión y arrastre el controlador a la izquierda para desplazar dicha columna. El desplazamiento se mostrará como una zona sombreada. Para un documento de Bootstrap v4.0.0, al desplazar la columna, se añade la clase offset-*-n, donde * representa la consulta de medios actual (sm, md, lg o xl) y n representa el número de columnas que ocupa.

Para documentos de Bootstrap v3.3.7, al desplazar una columna, se añade la clase col-*-offset-n, donde * representa la consulta de medios actual (xs, sm, md, o lg) y n representa el número de columnas que se desplaza.

Dreamweaver detecta el tamaño actual de la pantalla y añade la clase correcta. Si desea desplazar las columnas para adaptarlas a ventanas gráficas específicas, cambie el tamaño de la ventana gráfica mediante las opciones que se muestran en la esquina inferior derecha o la barra de desplazamiento. Luego, desplace las columnas según corresponda.