Guia do Usuário Cancelar

Criar sites responsivos usando o Bootstrap

  1. Guia do usuário do Dreamweaver
  2. Introdução
    1. Noções básicas de web design responsivo
    2. Novidades do Dreamweaver
    3. Desenvolvimento Web com o Dreamweaver – Visão geral
    4. Dreamweaver/Perguntas frequentes
    5. Atalhos de teclado
    6. Requisitos de sistema do Dreamweaver
    7. Resumo dos recursos
  3. Dreamweaver e Creative Cloud
    1. Sincronizar as configurações do Dreamweaver com a Creative Cloud
    2. Bibliotecas da Creative Cloud no Dreamweaver
    3. Uso de arquivos do Photoshop no Dreamweaver
    4. Trabalhe com o Adobe Animate e o Dreamweaver
    5. Extraia das Bibliotecas arquivos SVG otimizados para a Web
  4. Áreas de trabalho e exibições do Dreamweaver
    1. Espaço de trabalho do Dreamweaver
    2. Otimizar espaço de trabalho no Dreamweaver para desenvolvimento visual
    3. Pesquisa de arquivos baseada no nome de arquivo ou no conteúdo | Mac OS
  5. Configurar sites
    1. Sobre sites do Dreamweaver
    2. Configurar uma versão local do site
    3. Conectar-se a um servidor de publicação
    4. Configurar um servidor de teste
    5. Importar e exportar configurações de site do Dreamweaver
    6. Trazer sites existentes de um servidor remoto para a raiz do site local
    7. Recursos de acessibilidade do Dreamweaver
    8. Configurações avançadas
    9. Definir preferências de site para transferência de arquivos
    10. Especificar configurações do servidor proxy no Dreamweaver
    11. Sincronizar as configurações do Dreamweaver com a Creative Cloud
    12. Como usar o Git no Dreamweaver
  6. Gerenciar arquivos
    1. Criar e abrir arquivos
    2. Gerenciamento de arquivos e pastas
    3. Obter e colocar arquivos no servidor
    4. Devolver e retirar arquivos
    5. Sincronizar arquivos
    6. Comparar arquivos em busca de diferenças
    7. Encobrir arquivos e pastas em seu site do Dreamweaver
    8. Ativar as Design Notes para sites do Dreamweaver
    9. Impedir possível ataque ao Gatekeeper
  7. Layout e design
    1. Usar auxílios visuais para layout
    2. Sobre usar o CSS para criar o layout da página
    3. Criar sites responsivos usando o Bootstrap
    4. Criar e usar consultas de mídia no Dreamweaver
    5. Apresentar conteúdo em tabelas
    6. Cores
    7. Design responsivo usando layouts de grade fluida
    8. Extract no Dreamweaver
  8. CSS
    1. Noções sobre as folhas de estilos em cascata
    2. Aplicar layout às páginas usando o CSS Designer
    3. Usar pré-processadores de CSS no Dreamweaver
    4. Como definir preferências de estilo CSS no Dreamweaver
    5. Mover regras de CSS no Dreamweaver
    6. Converter CSS inline em uma regra de CSS no Dreamweaver
    7. Trabalhar com tags div
    8. Aplicação de degradês ao fundo
    9. Criar e editar efeitos de transição do CSS3 no Dreamweaver
    10. Formatar código
  9. Conteúdo e ativos de página
    1. Definir propriedades da página
    2. Configurar propriedades de cabeçalho e propriedades de link de CSS
    3. Trabalhar com texto
    4. Localizar e substituir texto, tags e atributos
    5. Painel DOM
    6. Editar na Visualização dinâmica
    7. Codificar documentos do Dreamweaver
    8. Selecionar e exibir os elementos na janela Documento
    9. Definir propriedades de texto no Inspetor de propriedades
    10. Verificar ortografia de uma página Web
    11. Usar regras horizontais no Dreamweaver
    12. Adicionar e modificar combinações de fontes no Dreamweaver
    13. Trabalhar com ativos
    14. Inserir e atualizar datas no Dreamweaver
    15. Criar e gerenciar ativos favoritos no Dreamweaver
    16. Inserir e editar imagens no Dreamweaver
    17. Adicionar objetos de mídia
    18. Adição de vídeos no Dreamweaver
    19. Inserir vídeo HTML5
    20. Inserir arquivos SWF
    21. Adicionar efeitos de áudio
    22. Inserir áudio HTML5 no Dreamweaver
    23. Trabalhar com itens da biblioteca
    24. Usar texto em árabe e hebraico no Dreamweaver
  10. Vinculação e navegação
    1. Sobre vinculação e navegação
    2. Vinculação
    3. Mapas de imagem
    4. Solucionar problemas com links
  11. Efeitos e widgets do jQuery
    1. Usar widgets de interface e para dispositivos móveis do jQuery no Dreamweaver
    2. Usar efeitos do jQuery no Dreamweaver
  12. Programar sites
    1. Sobre codificação no Dreamweaver
    2. Ambiente de codificação no Dreamweaver
    3. Definir preferências de codificação
    4. Personalizar codificação por cores
    5. Escrever e editar código
    6. Dicas de código e preenchimento de código
    7. Recolher e expandir código
    8. Reutilizar código com snippets
    9. Linting de código
    10. Otimizar código
    11. Editar código na Visualização de design
    12. Trabalhar com conteúdo do cabeçalho das páginas
    13. Inserir inclusões de servidor no Dreamweaver
    14. Usar bibliotecas de tags no Dreamweaver
    15. Importar tags personalizadas para o Dreamweaver
    16. Usar comportamentos JavaScript (instruções gerais)
    17. Aplicar comportamentos internos do JavaScript
    18. Sobre XML e XSLT
    19. Executar transformações XSL do servidor no Dreamweaver
    20. Executar transformações XSL do cliente no Dreamweaver
    21. Adicionar entidades de caracteres para XSLT no Dreamweaver
    22. Formatar código
  13. Fluxos de trabalho entre produtos
    1. Instalar e usar extensões no Dreamweaver
    2. Atualizações dentro do aplicativo no Dreamweaver
    3. Inserir documentos do Microsoft Office no Dreamweaver (somente Windows)
    4. Trabalho com o Fireworks e o Dreamweaver
    5. Editar conteúdo em sites do Dreamweaver usando o Contribute
    6. Integração do Business Catalyst ao Dreamweaver
    7. Criar campanhas de email personalizadas
  14. Modelos
    1. Sobre os modelos do Dreamweaver
    2. Reconhecimento de modelos e documentos baseados em modelo
    3. Criar um modelo do Dreamweaver
    4. Criar regiões editáveis nos modelos
    5. Criar regiões e tabelas repetitivas no Dreamweaver
    6. Usar regiões opcionais em modelos
    7. Definir atributos de tag editáveis no Dreamweaver
    8. Como criar modelos aninhados no Dreamweaver
    9. Editar, atualizar e excluir modelos
    10. Exportar e importar conteúdo xml no Dreamweaver
    11. Aplicar ou remover um modelo em um documento
    12. Editar conteúdo em modelos do Dreamweaver
    13. Regras de sintaxe para tags de modelo no Dreamweaver
    14. Definir preferências de realce para regiões de modelo
    15. Vantagens de usar modelos no Dreamweaver
  15. Dispositivo móvel e multitela
    1. Criar consultas de mídia
    2. Alterar a orientação de página para dispositivos móveis
    3. Criar aplicativos Web para dispositivos móveis usando o Dreamweaver
  16. Sites dinâmicos, páginas e formulários Web
    1. Noções sobre aplicativos Web
    2. Configurar o computador para desenvolvimento de aplicativos
    3. Solucionar problemas de conexões de banco de dados
    4. Remover scripts de conexão no Dreamweaver
    5. Criar páginas dinâmicas
    6. Visão geral das fontes de conteúdo dinâmico
    7. Definir origens de conteúdo dinâmico
    8. Adicionar conteúdo dinâmico a páginas
    9. Alterar conteúdo dinâmico no Dreamweaver
    10. Exibir registros de banco de dados
    11. Fornecer e solucionar problemas de live data no Dreamweaver
    12. Adicionar comportamentos personalizados de servidor no Dreamweaver
    13. Criar formulários usando o Dreamweaver
    14. Usar formulários para reunir informações de usuários
    15. Criar e ativar formulários do ColdFusion no Dreamweaver
    16. Criar formulários Web
    17. Suporte aprimorado a HTML5 para elementos de formulário
    18. Desenvolver um formulário usando o Dreamweaver
  17. Criação visual de aplicativos
    1. Criar páginas mestre e detalhadas no Dreamweaver
    2. Criar páginas de pesquisa e de resultados
    3. Criar uma página de inserção de registro
    4. Criar uma página de registro de atualização no Dreamweaver
    5. Criar páginas de exclusão de registro no Dreamweaver
    6. Usar comandos ASP para modificar um banco de dados no Dreamweaver
    7. Criar uma página de registro
    8. Criar uma página de logon
    9. Criar uma página que apenas usuários autorizados podem acessar
    10. Proteger pastas no ColdFusion usando o Dreamweaver
    11. Usar componentes do ColdFusion no Dreamweaver
  18. Testar, visualizar e publicar sites
    1. Visualizar páginas
    2. Visualizar páginas Web do Dreamweaver em vários dispositivos
    3. Testar seu site do Dreamweaver

 

Para obter um site responsivo para dispositivos móveis, use modelos iniciais de Bootstrap e arraste e solte componentes de Bootstrap no Dreamweaver.

O Bootstrap é uma estrutura HTML, CSS e JavaScript gratuita e popular para o desenvolvimento de sites responsivos que priorizam os dispositivos móveis (“mobile-first”). A estrutura inclui modelos CSS e HTML responsivos para botões, tabelas, navegação, carrosséis de imagens e outros elementos que você pode usar na sua página da web. Estão disponíveis alguns plug-ins JavaScript opcionais, que permitem que mesmo os desenvolvedores com conhecimento básico de programação desenvolvam sites excelentes e responsivos.

O Dreamweaver permite criar documentos do Bootstrap e também editar páginas da Web existentes criadas com o Bootstrap. Sejam arquivos do Bootstrap totalmente desenvolvidos ou trabalhos em andamento, você pode editá-los no Dreamweaver não apenas para editar código, mas também para usar recursos de edição visual como a edição na Visualização dinâmica, o CSS Designer visual, as Consultas de mídia visual e o Extract para fazer alterações no design.

Observação:

As versões do Bootstrap que têm suporte atualmente incluem v4.4.1 e v3.4.1.

Perguntas frequentes

Estou usando grades fluidas no Dreamweaver. Como posso começar a usar o Bootstrap?

Quando você criou documentos de grade fluida, o Dreamweaver tornou suas páginas da Web responsivas aplicando classes apropriadas automaticamente. Tudo o que você teve de fazer foi se concentrar no conteúdo e decidir como ele refluiria nos diferentes fatores de forma.

Da mesma forma, nos documentos do Bootstrap, você só precisa se concentrar no conteúdo e no design e a capacidade de resposta da sua página da Web será administrada pelo Dreamweaver, que está integrado com a estrutura do Bootstrap.

No momento, o Dreamweaver é compatível com as versões 3.4.1 e 4.4.1 do Bootstrap:

“O Bootstrap 3.4.1 inclui um sistema para dispositivos móveis responsivo de grade fluida que se expande corretamente até 12 colunas conforme o tamanho do dispositivo ou da janela de visualização aumenta. Ele inclui classes predefinidas para opções fáceis de layout, bem como mixins avançados para gerar mais layouts semânticos.” - Documentação do Bootstrap.

“O Bootstrap 4.4.1, com alterações importantes, inclui grades de flexbox avançadas para dispositivos móveis para criar layouts em todas as formas e escalas graças a um sistema de doze colunas, cinco níveis responsivos padrão, variáveis Sass e mixins, além de dezenas de classes predefinidas.” - Documentação do Bootstrap.

Para começar a trabalhar com documentos do Bootstrap no Dreamweaver, considere o uso de modelos iniciais do Bootstrap. O Dreamweaver inclui vários modelos voltados para diferentes tipos de sites, como comércio eletrônico ou portfólio.

Se deseja criar do zero um documento do Bootstrap, siga as etapas descritas na seção Criar documentos do Bootstrap.

Posso migrar documentos existentes de grade fluida para documentos do Bootstrap no Dreamweaver?

Não, não há uma maneira direta de converter seus documentos de grade fluida existentes em documentos do Bootstrap. No entanto, a experiência do usuário no Dreamweaver ao criar e construir documentos do Bootstrap é semelhante a de documentos de grade fluida. Por exemplo, você pode começar criando um documento do Bootstrap direto na caixa de diálogo Novo documento. Enquanto você cria documentos de grade fluida para três fatores de forma básicos, como dispositivos móveis, tablets e desktop, para Bootstrap, você começa criando um documento para tamanhos básicos de tela: pequenos, médios, grandes e extra grandes. As opções de edição de layout que são exibidas quando você clica em elementos nos documentos do Bootstrap também são semelhantes aos documentos de grade fluida.

Posso importar sites antigos na versão mais recente do Dreamweaver?

Sim, você pode importar sites antigos na versão mais recente do Dreamweaver. Ao fazer isso, o Dreamweaver procura o arquivo Bootstrap CSS na pasta site root/css/

  • Se o site tiver um arquivo Bootstrap v3 CSS, a versão do Bootstrap em Gerenciar site > Configurações avançadas > Bootstrap será definida para 3.4.1.
  • Se o site tiver um arquivo Bootstrap v4 CSS, a versão do Bootstrap em Gerenciar site > Configurações avançadas > Bootstrap será definida para 4.4.1.
  • Se o site não tiver o arquivo Bootstrap CSS no caminho site root/css, a versão do Bootstrap em Gerenciar site > Configurações avançadas > Bootstrap será definida como 4.4.1.

Criar documentos do Bootstrap

Você pode começar a criar seu site Bootstrap usando uma das seguintes opções na caixa de diálogo Novo documento:

  • Modelos iniciais de Bootstrap (Modelos iniciais > Modelos de Bootstrap): use esta opção se quiser começar a trabalhar rapidamente, sem ter de dispor as páginas do zero. Basta editar o texto e substituir os ativos, se necessário, e o site responsivo estará pronto. Consulte Usar modelos iniciais de Bootstrap para obter mais informações.
  • Criar um documento HTML com base na estrutura do Bootstrap (Novo documento > HTML > Bootstrap): use esta opção se quiser criar seu site bloco a bloco usando componentes de CSS e de Bootstrap no Dreamweaver. Para saber mais informações, consulte Criar documentos HTML com base na estrutura do Bootstrap.

Usar modelos iniciais de Bootstrap

Os modelos iniciais de Bootstrap permitem que você crie páginas da Web para temas populares sem demora. Todos os arquivos dependentes na estrutura são salvos automaticamente.

  1. Clique em Arquivo > Novo.

  2. Na caixa de diálogo Novo documento, clique em Modelos iniciais e selecione o modelo solicitado na lista de modelos do Bootstrap.

  3. Clique em Criar

    Será criada uma página HTML com base no modelo que você escolheu. Agora você pode modificar a página adicionando ou excluindo componentes ou editando textos ou ativos conforme necessário.

Criando documentos HTML com base na estrutura do Bootstrap

Para começar a fazer um site responsivo, crie um documento HTML com base na estrutura do Bootstrap. Você pode optar por criar um conjunto de arquivos de estruturas do Bootstrap ou usar os arquivos existentes. Depois que o documento for criado, você poderá adicionar componentes de Bootstrap, como acordeões e carrosséis, usando o painel Inserir no Dreamweaver. Ou, se você tiver composições do Photoshop, você pode usar o Extract para levar imagens, fontes, estilos, texto e muito mais para o seu documento do Bootstrap.

  1. Clique em Arquivo > Novo.

  2. Na caixa de diálogo Novo documento, clique em Novo documento > HTML e clique na guia Bootstrap.

  3. Para criar um arquivo bootstrap.css (e os outros arquivos do bootstrap), faça o seguinte:

    Especifique se você deseja criar um Bootstrap CSS ou usar um CSS existente.

    Se você optar por criar um CSS, uma pasta “css“ será criada na raiz do site e o arquivo bootstrap.css será copiado para a nova pasta. Se você optar por usar um CSS existente, especifique o caminho ou navegue até o local do CSS.

    1. Clique em Criar novo.

      Criar um documento do Bootstrap
      Criar um documento do Bootstrap

    2. (Opcional) Se você quiser anexar qualquer outro CSS ao documento, clique em  na seção Anexar CSS. A caixa de diálogo Anexar folha de estilos externa aparecerá. Especifique as configurações e clique em OK.

    3. A opção de incluir um layout previamente criado fornece uma estrutura de documento do Bootstrap básica.

      Se você não quer a estrutura básica e deseja começar com um documento em branco, desmarque a opção Incluir um layout previamente criado.

    4. (Opcional) O layout padrão contém 12 colunas com medianiz de 30 px. Os tamanhos de tela padrão são 576 px, 768 px, 992 px e 1200 px. 

      Se você quiser modificar essas configurações, clique em Personalizar. O arquivo bootstrap.css será modificado conforme necessário.

      Observação:

      Para o Bootstrap v3.4.0, os tamanhos de tela padrão são 768 px, 992 px e 1200 px.

    5. Selecione Usar Extract para criar sua página das composições do Photoshop se deseja que o painel Extract seja aberto (caso esteja fechado). Dessa maneira, você pode começar a extração de ativos das composições do Photoshop imediatamente.

      Por padrão, o novo site é criado usando o Bootstrap 4.4.1. Depois de criar o documento, você encontrará as pastas css e js na pasta raiz do site. No entanto, se você deseja criar o site usando a versão 3.4.1 do Bootstrap, selecione Site > Gerenciar sites. Selecione a pasta raiz do site. Clique em Configurações avançadas > Bootstrap. No campo da lista suspensa de Versão do Bootstrap, selecione 3.4.1. Na versão 3.4.1 do Bootstrap, as pastas css, js e fontes estarão na pasta raiz do site.

      Selecione a versão 4.4.1 do Bootstrap
      Selecione a versão 4.4.1 do Bootstrap

      A versão 3.4.1 do jQuery é compatível com páginas criadas no Bootstrap 4.4.1. Os modelos iniciais do Bootstrap serão atualizados para a versão 4.4.1 do Bootstrap.

      Ao adicionar componentes do Bootstrap a uma página Bootstrap, você pode atualizar as páginas Bootstrap 4.0.0 para a versão 4.4.1 e a versão do jQuery para 3.4.1. Clique em Sim na caixa de diálogo exibida ao inserir os componentes do Bootstrap na página.

      Caixa de diálogo de confirmação da compatibilidade de versões
      Caixa de diálogo de confirmação da compatibilidade de versões

      Caixa de diálogo de confirmação do Bootstrap 3.4.1
      Caixa de diálogo de confirmação do Bootstrap 3.4.1

      Caixa de diálogo pop-up do jQuery
      Caixa de diálogo pop-up do jQuery

      Quando você importa um site do Bootstrap 4.0.0 ou migra um site de versões anteriores para a próxima versão do Dreamweaver, a versão do Bootstrap é definida como 4.4.1 em Configuração do site > Configurações avançadas > Bootstrap.

    Observação:

    Com o Bootstrap 4.3.1, a altura de uma coluna da linha da grade é alterada de 1 px a 0 px. Portanto, para torná-la visível na visualização dinâmica, você precisa adicionar qualquer conteúdo na coluna da linha da grade.

  4. Para usar os arquivos de estrutura do Bootstrap existentes, faça o seguinte:

    1. Clique em Usar existente e especifique o caminho do arquivo bootstrap.css. Você também pode navegar até o local onde foi salvo o CSS.

      Criar documentos do Bootstrap com arquivos de estrutura existentes
      Criando documentos do Bootstrap com arquivos de estrutura existentes

    2. (Opcional) Se você quiser anexar qualquer outro CSS ao documento, clique em  na seção Anexar CSS. Na caixa de diálogo Anexar folha de estilo externa, especifique as configurações e clique em OK.

    3. A opção Incluir um layout previamente criado fornece uma estrutura de documento do Bootstrap básica. Se você não quer a estrutura básica e deseja começar com um documento em branco, desmarque a opção Incluir um layout previamente criado.

  5. Clique em Criar.

Observação:

O arquivo bootstrap.css criado é somente para leitura. Por isso, você não poderá editar esses estilos usando o CSS Designer; o painel Propriedades no CSS Designer está desabilitado nos arquivos do Bootstrap.

Se quiser modificar o estilo do documento do Bootstrap, crie outro arquivo CSS para substituir os estilos existentes e anexe-o ao documento.

Abrir arquivos do Bootstrap

Observação:

É recomendável abrir e editar os documentos criados apenas na versão 3 ou posterior do Bootstrap no Dreamweaver.

Você pode abrir arquivos do Bootstrap de uma das seguintes maneiras:

  • Clique em Arquivo > Abrir e navegue até o arquivo HTML de Bootstrap.
  • (Recomendado) Crie um site do Dreamweaver e aponte a pasta do site para a pasta que contém todos os arquivos do Bootstrap.

Ao abrir um arquivo HTML de Bootstrap no Dreamweaver:

  • As linhas são realçadas em linhas tracejadas em cinza com cantos arredondados.
  • As colunas são realçadas em linhas tracejadas em azul.

O Dreamweaver reconhecerá os arquivos CSS associados a qualquer arquivo HTML de Bootstrap se o termo “bootstrap” fizer parte do nome do arquivo CSS. A referência ao arquivo CSS pode ser qualquer um destes itens ou todos:

  • Caminho local:

    O arquivo CSS minificado ou não minificado está presente localmente. Por exemplo:

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

  • Caminho remoto:
  • Um arquivo CSS minificado ou não minificado remoto. Por exemplo:

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

Observação:

As folhas de estilo Bootstrap nas tags link e import são aceitas no Dreamweaver. No entanto, não há suporte para a importação aninhada - um link para uma folha de estilo que por sua vez importa outra folha de estilo.

Ocultar, reexibir e gerenciar elementos ocultos do Bootstrap

Às vezes, você pode precisar que um elemento seja exibido em um visor ao passo que, em outro visor, talvez prefira ocultar o elemento por uma questão de design. 

Para ocultar um elemento do Bootstrap, clique com o botão direito do mouse e selecione Ocultar elemento. O elemento fica temporariamente oculto.

Ocultar elementos do Bootstrap no Dreamweaver
Ocultar elementos do Bootstrap no Dreamweaver

Para exibir e reexibir elementos ocultos, clique com o botão direito do mouse e selecione Gerenciar elementos ocultos. Os elementos ocultos aparecem com fundo cinza hachurado. Clique no ícone de olho para reexibir o elemento.

Gerenciar elementos ocultos do Bootstrap
Gerenciar elementos ocultos do Bootstrap

Adicionar componentes do Bootstrap

A opção Componentes do Bootstrap no painel Inserir relaciona todos os componentes de Bootstrap que você pode adicionar à sua página da Web no Dreamweaver. De acordo com a versão do Bootstrap no arquivo bootstrap.css vinculado à página HTML, os componentes respectivos estão listados no painel Inserir. Por exemplo, no Bootstrap v4.0.0, você vê componentes adicionais, como Cartões, Emblemas. Da mesma forma, os componentes Glyphicons, Painel, Wells e Miniaturas estão disponíveis apenas no Bootstrap v3.3.7. Dependendo da versão do Bootstrap, você verá os respectivos componentes no painel Inserir. Além disso, o componente Spinners está disponível apenas no Bootstrap v4.4.1.

Os componentes no painel Inserir são dispostos de acordo com os critérios a seguir:

  • O documento em foco: os componentes no painel Inserir são dispostos de acordo com a versão do Bootstrap no arquivo Bootstrap vinculado ao documento. 
  • Versão nas preferências do site: para um documento não-bootstrap, o Dreamweaver procura a versão em Preferências do site > Avançado > Bootstrap. Dependendo da versão nessa opção, os componentes apropriados são populados. Por padrão, para sites novos, a versão é 4.4.1.
  • Onde os arquivos são salvos: para um documento não bootstrap que não faz parte de um site, o painel Inserir reflete os componentes 4.4.1.
Componentes compatíveis com o Bootstrap 4.0.0
Componentes compatíveis com o Bootstrap 4.4.1

Para adicionar um componente, arraste-o do painel para a página da Web. Antes de soltar o componente, observe os auxílios visuais como Guias dinâmicos, Inserção com precisão (usando o DOM) e Assistente de posição. Use esses recursos para colocar os componentes em sua página com rapidez e precisão. Para obter mais informações sobre como inserir elementos na página da Web, consulte Visão geral do painel Inserir.

Adicionar linhas

Clique na linha após a qual você deseja adicionar a nova linha. Em seguida, clique no ícone Adicionar nova linha. É adicionada uma linha de Bootstrap, juntamente com dois elementos-filho de coluna com seis colunas cada.

Este é o código da linha adicionada:

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

onde * representa o tamanho da tela atual no Dreamweaver.

Adicionar colunas

Selecione a coluna desejada e clique no ícone Adicionar nova coluna. A coluna selecionada é duplicada sem seus filhos.

Todas as colunas vazias têm uma altura mínima de 20 px. No entanto, essa altura não é realmente adicionada à página; ela só é mostrada na Visualização dinâmica para facilitar a inserção de elementos nas colunas.

Duplicar linhas e colunas

Clique na linha ou na coluna que deseja duplicar e clique no ícone de duplicação no canto inferior direito. A linha ou a coluna inteira são duplicadas juntamente com seu conteúdo.

Observação:

A opção Adicionar linha ou Adicionar coluna duplica a linha ou a coluna com classes, mas sem o conteúdo.

Redimensionar e deslocar colunas

Redimensionar e deslocar colunas tornam-se ações essenciais especialmente quando você está criando designs responsivos para diversos visores. 

Redimensionar colunas

Clique na coluna necessária e arraste a alça à direita para redimensioná-la. Em um documento Bootstrap v4.0.0, quando você redimensiona uma coluna, é adicionada a classe col-*-n, onde * representa a consulta de mídia atual (sm, md, ld, xl) e n representa o número de colunas que ela ocupa. Para os tamanhos de tela Extrapequeno, a classe col-n é adicionada.

Em um documento Bootstrap v3.3.7, quando você redimensiona uma coluna, é adicionada a classe col-*-n, onde * representa a consulta de mídia atual (xs, sm, md ou lg) e n representa o número de colunas que ela ocupa.

O Dreamweaver detecta o tamanho atual da tela e adiciona a classe apropriada. Para redimensionar colunas da forma adequada a visores específicos, altere o tamanho do visor usando as opções no canto inferior direito ou o depurador. Em seguida, redimensione as colunas conforme apropriado.

Deslocar colunas

Clique na coluna necessária e arraste a alça à esquerda para deslocar a coluna. O deslocamento é mostrado como uma área hachurada. Em um documento Bootstrap v4.0.0, quando você desloca uma coluna, é adicionada a classe offset-*-n, onde * representa a consulta de mídia atual (sm, md, lg ou xl) e n representa o número de colunas que ela ocupa.

Em um documento Bootstrap v3.3.7, quando você desloca a coluna, é adicionada a classe col-*-offset-n, onde * representa a consulta de mídia atual (xs, sm, md ou lg) e n representa o número de colunas que compõem o deslocamento.

O Dreamweaver detecta o tamanho atual da tela e adiciona a classe adequada. Para deslocar colunas da forma adequada a visores específicos, altere o tamanho do visor usando as opções no canto inferior direito ou o depurador. Em seguida, desloque as colunas conforme apropriado.

 Adobe

Receba ajuda com mais rapidez e facilidade

Novo usuário?