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 admite actualmente las versiones 3.4.1 y 4.4.1 de Bootstrap:

“Bootstrap 3.4.1 incluye un sistema de cuadrícula fluida, interactiva y orientada a móviles, que escala correctamente hasta 12 columnas, a medida que aumenta el tamaño del dispositivo o de la ventana gráfica. Incorpora clases predefinidas para facilitar las opciones de diseño, así como unos mixins potentes que generan más diseños semánticos”. - Documentación de Bootstrap.

“Bootstrap 4.4.1, con importantes cambios, incluye una potente cuadrícula de cuadros flexibles, orientada a móviles, para crear diseños de todas las formas y escalas, gracias a un sistema de doce columnas, cinco niveles con capacidad de respuesta predeterminados, variables y mixins de Sass, y docenas de clases predefinidas”. - 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. Al crear documentos con cuadrícula fluida para tres relaciones de aspecto básicas, móvil, tableta y escritorio, se comienza por crear un documento para los tamaños de pantalla básicos: pequeño, mediano, grande y extragrande. 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 no tiene ningún archivo CSS de Bootstrap en la ruta raíz del sitio/css, la versión de Bootstrap en Administrar sitio > Configuración avanzada > Bootstrap se establece en 4.4.1.

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.

Creación de documentos HTML basados en el framework de 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. Del mismo modo, los componentes Glyphicons, Panel, Áreas y Miniaturas solo están disponibles en Bootstrap v3.3.7. En función de la versión de Bootstrap, verá los componentes correspondientes en el panel Insertar. 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:

• 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 las preferencias del sitio: para un documento que no sea de bootstrap, Dreamweaver busca la versión en Preferencias del sitio > Avanzadas > Bootstrap. En función de la versión de esta opción, se rellenan los componentes correspondientes. De forma predeterminada, para los sitios nuevos, la versión es la 4.4.1.
• Dónde se guardan los archivos: para un documento que no sea de Bootstrap, y que no forme parte de ningún sitio, el panel Insertar refleja los componentes de la versión 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

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

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.