Bootstrap design responsivo

breve introdução

Este tutorial mostra como usar o design responsivo o layout da página. No curso, você vai aprender Web Design Responsive. Com a popularidade de dispositivos móveis, como permitir que os usuários navegar através de dispositivos móveis para o seu site para obter uma boa efeitos visuais, já é um problema inevitável. Web design responsivo é uma forma eficaz para alcançar este objectivo.

O que é Web Design Responsive

Web design responsivo é, permitindo que os usuários acessem uma variedade de tamanhos de dispositivos de navegar no site uma boa eficácia visual. Por exemplo, em um monitor de computador que você visita um site da Web, e depois procurar em telefones inteligentes, o tamanho da tela do telefone inteligente é muito menor do que um monitor de computador, mas você não sente qualquer diferença entre a experiência do usuário é quase o mesmo, indicando que o site em design de resposta faz um bom trabalho.

Temos os nossos exemplos de layout fluido de a aplicação do desempenho da resposta , e convida você a navegar em diferentes tamanhos de tela. Você pode usar o Chrome ou Firefox para ajustar a expansão janela do navegador redimensionamento.

Clique aqui, você pode ver exemplos de design responsivo Bootstrap .

Responsive Web Design Works

Web design responsivo a fim de aplicar, você precisa criar uma variedade de dispositivos para se adaptar ao tamanho do CSS estilos incluem. Uma vez que a página é carregada em um dispositivo específico, use uma variedade de fontes sobre as tecnologias de página e de desenvolvimento da Web, como consultas de mídia (Media Queries), desta vez, será o primeiro teste do tamanho da janela do dispositivo, e em seguida, carrega o dispositivo específico estilo.

estudo aprofundado do Design CSS Responsive Web

Vamos 'inicialização-responsive.css "aprender a aprender" design responsivo "é conseguir a nuance. Antes disso, você deve adicionar a seguinte linha de código na área do cabeçalho da página:

 <Meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> 

meta tag viewport, substitui a janela de exibição padrão e ajudar a carregar um estilo específico janela de exibição associado.

propriedade de largura à largura da tela. Ele contém um valor, como 320, representa 320 pixels, ou um valor de 'device-width', usado para dizer ao navegador para utilizar a resolução original.

propriedade escala inicial é a razão entre o visor inicial. Quando ajustado para 1.0, o dispositivo irá mostrar a largura original.

Claro, você deve adicionar o CSS Responsive Bootstrap, como segue:

 <Link href = "ativos / css / inicialização-responsive.css" rel = "stylesheet"> 

Agora, se você encontrar o arquivo CSS responsivo, você vai achar que em algumas declarações públicas de volta (a partir do número da linha 10-22), a uma variedade de área '@media' começou. Esta é a forma de escrever um modelo adequado para uma variedade de dispositivos.

A primeira área a '@media (max-width: 480px )' começou como uma largura máxima de 480 pixels configurações do dispositivo de estilo.

A segunda área de "@media (max-width: 767px ) ' começou como uma largura máxima de 767 pixels configurações do dispositivo de estilo.

A terceira área de "@media (min-width: 768px ) e (max-width: 979px) 'começou como uma largura mínima de 768 pixels e uma largura máxima de 979 pixels configurações do dispositivo de estilo.

A próxima área é a largura máxima do estilo de configurações do dispositivo 979 pixels. Por isso, é '@media (max-width: 979px )' começar.

As duas últimas áreas, respectivamente "@media (min-width: 980px ) ' e' @media (min-width: 1200px ) ' começar, antes de um dispositivo está definido para uma largura mínima de 980 pixels no estilo, este último é o menor width definir o estilo para o dispositivo 1200 pixels.

Portanto, o papel fundamental desta folha de estilo é usando o 'min-largura "e propriedade' máximo de largura" para determinar o modelo utilizado de acordo com a largura máxima e uma largura mínima do dispositivo.

explicação

A fim de tornar o layout mais ágil, Bootstrap fazer três coisas:

1. Modificar a largura das colunas na grade.

2. Enquanto existe uma necessidade, que utiliza elementos da pilha, em vez de elemento flutuante. Se você não sabe o que é o elemento de pilha, as seguintes formas de w3.org pode fornecer alguma ajuda:

elemento raiz (html) para formar um contexto raiz pilha, a outra geração de contexto de pilha (incluindo elementos relativamente posicionado, há um 'z-index' valor em vez de 'auto' calculado) por um posicionamento elemento arbitrário. Contexto pilha em relação ao bloco contém não necessária.

3. Para renderizar corretamente o título e um texto de seu tamanho.

desenvolvimento mais rápido para dispositivos móveis de layout amigável

classe Bootstrap tem vários útil para o desenvolvimento do layout do mobile-friendly. Estas classes pode ser visto em 'responsive.less' em.

.Visible-phone, uma largura de 767px e menos visível no telefone, na 979px para 768px Tablet escondido da vista, escondido do desktop, que é o padrão.

.Visible-comprimido, uma largura de 767px e abaixo do telefone celular oculto não é visível, 979px para 768px visível na placa, não visível na área de trabalho para se esconder, que é o padrão.

.Visible-desktop, escondido em uma largura de 767px e abaixo do telefone não é visível, escondido em 979px para 768px Tablet invisível, visível no ambiente de trabalho, que é o padrão.

.hidden-phone, uma largura de 767px e se esconder no seguinte telefone não é visível, no 979px para 768px Tablet visível, visível no ambiente de trabalho, que é o padrão.

.hidden-comprimido, uma largura de 767px e menos visível no telefone, no Tablet 979px para 768px escondido invisível, visível no ambiente de trabalho, que é o padrão.

.hidden-desktop, com uma largura de 767px e abaixo a visibilidade do telefone 979px para 768px Tablet visível, escondido do desktop, que é o padrão.

Clique aqui para baixar o tutorial para usar todo o HTML, CSS, JS e arquivos de imagem.