Criar sites responsivos usando o Bootstrap

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.

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.

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.

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.

Abrir arquivos do Bootstrap

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

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.

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.

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.

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.

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.