Guia do Usuário Cancelar

Criar sites responsivos usando o Bootstrap

 

 

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.

Receba ajuda com mais rapidez e facilidade

Novo usuário?