Para sitios web interactivos diseñados específicamente para dispositivos móviles, use las plantillas de inicio y los componentes de Bootstrap de arrastrar y soltar de Dreamweaver.

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 plug-in 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, así como modificar páginas web ya existentes que se crearon con Bootstrap. Tanto si se trata de archivos diseñados completamente en Bootstrap 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.

Nota:

Entre las versiones de Bootstrap compatibles actualmente se encuentran la v4.0.0 y la v3.3.7.

Preguntas habituales

Sé como 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 webs fueran interactivas, aplicando automáticamente las clases apropiadas. Lo único que le quedó por hacer fue centrarse en el contenido y decidir cómo se reajustaría 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.3.7 y 4.0.0 de Bootstrap:

“Bootstrap 3.3.7 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.0.0, 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 webs que se pueden crear, por ejemplo, incluye plantillas de comercio electrónico o de portafolio.

Si desea crear un documento de Bootstrap a partir de cero, siempre podrá hacerlo conforme se describe en la sección Crear documentos de Bootstrap.

¿Puedo convertir documentos de cuadrícula fluida existentes en documentos de Bootstrap con Dreamweaver?

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.3.7.
  • 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.0.0.
  • 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.0.0.

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 webs de temas populares en un abrir y cerrar de ojos. Todos los archivos dependientes del framework se guardan automáticamente.

  1. Haga clic en Archivo > Nuevo.

  2. En el cuadro de diálogo Nuevo Documento que aparece, haga clic en Plantillas de inicio y luego seleccione la plantilla necesaria de la lista de Plantillas de Bootstrap.

  3. Haga clic en Crear

    Se crea una página HTML basada en la plantilla seleccionada. Ahora podrá modificar la página, añadiendo o borrando componentes, o bien editando el texto o los activos, según sea necesario.

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. También, si tiene composiciones de Photoshop, puede utilizar Extract para incluir las imágenes, las fuentes, los estilos, el texto y mucho más de la misma en su documento de Bootstrap.

  1. Haga clic en Archivo > Nuevo.

  2. En el cuadro de diálogo Nuevo documento, haga clic en Nuevo Documento > HTML y luego haga clic en la ficha Bootstrap.

  3. Para crear un nuevo archivo bootstrap.css (y el resto de archivos de Bootstrap), realice las siguientes acciones:

    Especifique si desea crear un nuevo CSS de Bootstrap o utilizar uno existente.

    Si decide crear un nuevo CSS, se creará una carpeta “css” en la raíz del sitio y el archivo bootstrap.css se copiará en la nueva carpeta. Si decide utilizar un CSS existente, especifique la ruta de acceso o vaya a la ubicación del CSS.

    1. Haga clic en Crear nuevo.

      Crear un nuevo documento con Bootstrap
      Crear un nuevo documento con Bootstrap
    2. (Opcional) Si desea adjuntar cualquier otro CSS al documento, haga clic en , en la sección Adjuntar CSS. Aparecerá el cuadro de diálogo Adjuntar hoja de estilos externa. Especifique la configuración y haga clic en OK.

    3. La opción Incluir un diseño creado previamente proporciona una estructura de documento básico de Bootstrap.

      Si no quiere usar la estructura básica y prefiere empezar con un documento en blanco, anule la selección de la opción Incluir un diseño creado previamente.

    4. (Opcional) El diseño predeterminado contiene 12 columnas con un medianil de 30 px. Los tamaños de pantalla predeterminados son 576 px, 768 px, 992 px y 1200 px.

      Si desea modificar esta configuración, haga clic en Personalizar. El archivo bootstrap.css se modificará según corresponda.

      Nota:

      Para Bootstrap v3.3.7, los tamaños de pantalla predeterminados son 768 px, 992 px y 1200 px.

    5. Si quiere abrir el panel Extract (en el caso de que estuviera cerrado), seleccione Utilizar Extract para crear una página a partir de composiciones de Photoshop. De este modo, podrá empezar a extraer activos de sus composiciones de Photoshop inmediatamente.

      El sitio se crea de forma predeterminada con Bootstrap v4.0.0. Después de crear el documento, podrá encontrar las carpetas de css y js en la carpeta raíz del sitio. Sin embargo, si desea crear el sitio con la versión 3.3.7 de Bootstrap, seleccione Sitio > Administrar sitios. Seleccione la carpeta raíz del sitio. Haga clic en Configuración avanzada > Bootstrap. En el campo desplegable Versión de Bootstrap, seleccione 3.3.7. Para Bootstrap v3.3.7, encontrará la carpeta de css, js y fuentes en la carpeta raíz del sitio.

      Seleccione la versión 3.3.7 de Bootstrap
      Seleccione la versión 3.3.7 de Bootstrap
  4. Para utilizar los archivos existentes del framework de Bootstrap, realice las siguientes acciones:

    1. Haga clic en Usar existente y especifique la ruta de acceso del archivo bootstrap.css. También puede examinar y buscar la ubicación en la que se guardó el CSS.

      Creación de documentos de Bootstrap con archivos del framework existentes
      Creación de documentos de Bootstrap con archivos del framework existentes

    2. (Opcional) Si desea adjuntar cualquier otro CSS al documento, haga clic en , en la sección Adjuntar CSS. En el cuadro de diálogo Adjuntar hoja de estilos externa, especifique la configuración y haga clic en OK.

    3. La opción Incluir un diseño creado previamente proporciona una estructura de documento básico de Bootstrap. Si no quiere usar la estructura básica y prefiere empezar con un documento en blanco, anule la selección de la opción Incluir un diseño creado previamente.

  5. Haga clic en Crear.

Nota:

El archivo bootstrap.css que se crea es de solo lectura. Por lo tanto, no puede editar estos estilos mediante el Diseñador de CSS, ya que el panel Propiedades del Diseñador de CSS está desactivado en los archivos de Bootstrap.

Si desea modificar los estilos del documento de Bootstrap, cree otro archivo CSS que sobrescriba los estilos existentes y adjúntelo al documento.

Abrir archivos de Bootstrap

Nota:

Se recomienda que solo abra y edite los documentos creados con Bootstrap (versión 3 y posteriores) en Dreamweaver.

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">

Nota:

Las hojas de estilo de Bootstrap tanto en las etiquetas para vincular como para importar son compatibles con Dreamweaver. Sin embargo, no son compatibles los vínculos anidados para importar que enlacen con una hoja de estilo, que a su vez importe otra hoja de estilo.

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.

Ocultar elementos de Bootstrap en Dreamweaver
Ocultar elementos de Bootstrap en Dreamweaver

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.

Administrar elementos ocultos de Bootstrap
Administrar elementos ocultos de Bootstrap

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.

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.0.0.
  • Dónde se guardan los archivos: para un documento no de bootstrap, que no sea parte de ningún sitio, el panel Insertar refleja los componentes 4.0.0.
Componentes admitidos en Bootstrap 4.0.0
Componentes admitidos en Bootstrap 4.0.0

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 posterior a 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.

Nota:

La opción Añadir fila o Añadir columna duplica la fila o la columna con las clases, pero sin el contenido.

Cambiar de tamaño y desplazar las columnas

La tarea de cambiar de tamaño y desplazar las columnas 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 manejador 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 manejador 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.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea