Guía del usuario Cancelar

Diseño de sitios web interactivos con Bootstrap

  1. Guía del usuario de Dreamweaver
  2. Introducción
    1. Conceptos básicos sobre diseño web adaptable
    2. Novedades de Dreamweaver
    3. Desarrollo web con Dreamweaver: información general
    4. Dreamweaver / Preguntas frecuentes
    5. Métodos abreviados de teclado
    6. Requisitos del sistema para Dreamweaver
    7. Resumen de funciones
  3. Dreamweaver y Creative Cloud
    1. Sincronizar la configuración de Dreamweaver con Creative Cloud
    2. Bibliotecas Creative Cloud en Dreamweaver
    3. Uso de archivos de Photoshop en Dreamweaver
    4. Trabajar con Adobe Animate y Dreamweaver
    5. Extraer archivos SVG optimizados para la Web desde bibliotecas
  4. Espacios de trabajo y vistas de Dreamweaver
    1. El espacio de trabajo de Dreamweaver
    2. Optimización del espacio de trabajo de Dreamweaver para la implementación visual
    3. Buscar archivos por nombre de archivo o contenido | Mac OS
  5. Configuración de sitios
    1. Acerca de los sitios de Dreamweaver
    2. Configuración de una versión local del sitio
    3. Conectar con servidores de publicación
    4. Configuración de un servidor de prueba
    5. Importación y exportación de la configuración de un sitio de Dreamweaver
    6. Traer sitios web existentes desde un servidor remoto a la raíz del sitio local
    7. Funciones de accesibilidad en Dreamweaver
    8. Ajustes avanzados
    9. Configuración de las preferencias de sitio para transferir archivos
    10. Especificación de la configuración del servidor proxy en Dreamweaver
    11. Sincronizar la configuración de Dreamweaver con Creative Cloud
    12. Uso de Git en Dreamweaver
  6. Administrar archivos
    1. Creación y apertura de documentos
    2. Administración de archivos y carpetas
    3. Carga de archivos al servidor y descarga desde el mismo
    4. Desprotección y protección de archivos
    5. Sincronizar archivos
    6. Comparación de archivos para detectar diferencias
    7. Ocultación de archivos y carpetas en el sitio de Dreamweaver
    8. Activación de Design Notes para sitios de Dreamweaver
    9. Prevención de la posible actuación repentina de Gatekeeper
  7. Maquetación y diseño
    1. Usar ayudas visuales al diseñar
    2. Información sobre el uso de CSS para diseñar la página
    3. Diseño de sitios web interactivos con Bootstrap
    4. Creación y uso de consultas de medios en Dreamweaver
    5. Presentación de contenido en tablas
    6. Colores
    7. Diseño interactivo mediante diseños de cuadrícula fluida
    8. Extract en Dreamweaver
  8. CSS
    1. Aspectos básicos de las hojas de estilos en cascada
    2. Diseño de páginas con el Diseñador de CSS
    3. Uso de preprocesadores de CSS en Dreamweaver
    4. Configuración de las preferencias de estilos CSS en Dreamweaver
    5. Mover reglas CSS en Dreamweaver
    6. Conversión de CSS en línea en una regla CSS en Dreamweaver
    7. Uso de etiquetas div
    8. Aplicación de degradados al fondo
    9. Creación y edición de efectos de transición de CSS3 en Dreamweaver
    10. Formatear código
  9. Contenido de página y activos
    1. Definición de las propiedades de la página
    2. Configuración de propiedades de encabezado CSS y propiedades de vínculo CSS
    3. Uso de texto
    4. Buscar y reemplazar texto, etiquetas y atributos
    5. Panel DOM
    6. Editar en la Vista en vivo
    7. Codificación de documentos en Dreamweaver
    8. Selección y visualización de elementos de la ventana de documento
    9. Configuración de las propiedades de texto en el inspector de propiedades
    10. Revisión ortográfica de una página web
    11. Uso de las reglas horizontales en Dreamweaver
    12. Añadir y modificar combinaciones de fuentes en Dreamweaver.
    13. Trabajo con activos
    14. Inserción y actualización de fechas en Dreamweaver
    15. Creación y gestión de activos favoritos en Dreamweaver
    16. Insertar y editar imágenes en Dreamweaver
    17. Adición de objetos multimedia
    18. Adición de vídeos en Dreamweaver
    19. Insertar vídeo HTML5
    20. Insertar archivos SWF
    21. Adición de efectos de sonido
    22. Insertar audio HTML5 en Dreamweaver
    23. Trabajar con elementos de bibliotecas
    24. Uso de texto árabe y hebreo en Dreamweaver
  10. Establecimiento de vínculos y navegación
    1. Acerca del establecimiento de vínculos y la navegación
    2. Vinculación
    3. Mapas de imágenes
    4. Vínculos de solución de problemas
  11. Widgets y efectos de jQuery
    1. Uso de interfaz de usuario y widgets móviles de jQuery en Dreamweaver
    2. Uso de efectos jQuery en Dreamweaver
  12. Programación de sitios web
    1. Acerca de la programación en Dreamweaver
    2. Entorno de programación en Dreamweaver
    3. Configuración de las preferencias de programación
    4. Personalización de los colores del código
    5. Escritura y edición de código
    6. Sugerencias de código y completado de código
    7. Contraer y expandir código
    8. Reutilizar código con fragmentos
    9. Depuración de código mediante linting
    10. Optimización del código
    11. Edición de código en Vista de diseño
    12. Trabajo con el contenido de Head para páginas
    13. Inserción del lado del servidor incluida en Dreamweaver
    14. Uso de bibliotecas de etiquetas en Dreamweaver
    15. Importación de etiquetas personalizadas a Dreamweaver
    16. Uso de comportamientos de JavaScript (instrucciones generales)
    17. Aplicación de comportamientos JavaScript incorporados
    18. Acerca de XML y XSLT
    19. Realización de transformaciones XSL del lado del servidor en Dreamweaver
    20. Realización de transformaciones XSL en el lado del cliente en Dreamweaver
    21. Adición de entidades de caracteres para XSLT en Dreamweaver
    22. Formatear código
  13. Flujos de trabajo de varios productos
    1. Instalación y uso de extensiones para Dreamweaver
    2. Actualizaciones integradas en Dreamweaver
    3. Insertar documentos de Microsoft Office en Dreamweaver (solo Windows)
    4. Trabajo con Fireworks y Dreamweaver
    5. Edición de contenido en sitios de Dreamweaver con Contribute
    6. Integración de Dreamweaver Business Catalyst
    7. Crear campañas de correo electrónico personalizado
  14. Plantillas
    1. Acerca de las plantillas de Dreamweaver
    2. Reconocimiento de plantillas y documentos basados en plantillas
    3. Crear una plantilla de Dreamweaver
    4. Crear regiones editables en plantillas
    5. Creación de tablas y regiones repetidas en Dreamweaver
    6. Usar regiones opcionales en plantillas
    7. Definición de atributos de etiqueta editables en Dreamweaver
    8. Creación de plantillas anidadas en Dreamweaver
    9. Edición, actualización y eliminación de plantillas
    10. Exportar e importar contenido xml en Dreamweaver
    11. Aplicación o eliminación de una plantilla de un documento existente
    12. Edición de contenido en plantillas de Dreamweaver
    13. Reglas de sintaxis de etiquetas de plantilla en Dreamweaver
    14. Configuración de preferencias de resaltado en regiones de plantillas
    15. Ventajas de usar plantillas en Dreamweaver
  15. Móvil y multipantalla
    1. Creación de consultas de medios
    2. Cambio de la orientación de página para dispositivos móviles
    3. Creación de aplicaciones web para dispositivos móviles con Dreamweaver
  16. Sitios, páginas y formularios web dinámicos
    1. Aspectos básicos de las aplicaciones web
    2. Configuración del ordenador para desarrollo de aplicaciones
    3. Solución de problemas de conexiones a bases de datos
    4. Eliminación de secuencias de comandos de conexión en Dreamweaver
    5. Diseñar páginas dinámicas
    6. Introducción a las fuentes de contenido dinámico
    7. Definir fuentes de contenido dinámico
    8. Añadir contenido dinámico a las páginas
    9. Cambio de contenido dinámico en Dreamweaver
    10. Visualización de registros de bases de datos
    11. Proporcionar datos en vivo y solucionar sus problemas en Dreamweaver
    12. Añadir comportamientos de servidor personalizados en Dreamweaver
    13. Crear formularios con Dreamweaver
    14. Uso de formularios para recopilar información de los usuarios
    15. Crear y activar formularios de ColdFusion en Dreamweaver
    16. Crear formularios web
    17. Compatibilidad mejorada con HTML5 para elementos de formulario
    18. Desarrollar un formulario con Dreamweaver
  17. Creación visual de aplicaciones
    1. Creación de las páginas maestra y de detalles en Dreamweaver
    2. Crear páginas de búsqueda y resultados
    3. Crear una página de inserción de registros
    4. Crear una página de actualización de registros en Dreamweaver
    5. Creación de páginas de eliminación de registros en Dreamweaver
    6. Usar comandos ASP para modificar una base de datos en Dreamweaver
    7. Crear una página de registro
    8. Crear una página de inicio de sesión
    9. Creación de una página para acceso exclusivo de usuarios autorizados
    10. Protección de carpetas en ColdFusion con Dreamweaver
    11. Uso de componentes de ColdFusion en Dreamweaver
  18. Prueba, vista previa y publicación de sitios web
    1. Vista previa de páginas
    2. Vista previa de páginas web de Dreamweaver en varios dispositivos
    3. Comprobación del sitio de Dreamweaver

 

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

Nota:

Las versiones de Bootstrap admitidas actualmente son v4.4.1 y v3.4.1.

Preguntas habituales

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.

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.

¿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.

  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 contenidos, 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. 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.

  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.4.0, 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 contenidos de sus composiciones de Photoshop inmediatamente.

      Se creará un nuevo sitio de forma predeterminada con la versión 4.4.1. de Bootstrap. 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.4.1 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.4.1. Para la versión 3.4.1 de Bootstrap, encontrará la carpeta de css, js y fuentes en la carpeta raíz del sitio.

      Seleccionar la versión 4.4.1 de Bootstrap
      Seleccionar la versión 4.4.1 de Bootstrap

      La versión 3.4.1 de jQuery es compatible con las páginas creadas en Bootstrap 4.4.1. Las plantillas de inicio de Bootstrap se actualizarán a la versión 4.4.1 de Bootstrap.

      Cuando añade componentes de Bootstrap a una página de Bootstrap, puede actualizar las páginas de Bootstrap 4.0.0 a Bootstrap 4.4.1 y la versión de jQuery a 3.4.1. Haga clic en  en el cuadro de diálogo que aparece al insertar componentes de Bootstrap en la página.

      Diálogo de confirmación de compatibilidad de la versión
      Diálogo de confirmación de compatibilidad de la versión

      Cuadro de confirmación de Bootstrap 3.4.1
      Cuadro de confirmación de Bootstrap 3.4.1

      Diálogo emergente de jQuery
      Diálogo emergente de jQuery

      Al importar un sitio de Bootstrap 4.0.0 o migrar un sitio desde versiones anteriores a la siguiente versión de Dreamweaver, la versión de Bootstrap se establece en 4.4.1 en Configuración del sitio > Ajustes avanzados > Bootstrap.

    Nota:

    Con Bootstrap 4.3.1, la altura de una columna de filas de la cuadrícula cambia de 1 px a 0 px. Por lo tanto, para que esto resulte visible en la Vista en vivo, tendrá que agregar algún contenido en la columna de filas de la cuadrícula.

  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 en Dreamweaver los documentos creados con Bootstrap (versión 3 y posteriores).

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 se admiten 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. 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.
Componentes admitidos en Bootstrap 4.0.0
Componentes admitidos en Bootstrap 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.

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

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?