Recentemente, descobri uma coisa boa chamada Bootstrap, a estrutura CSS mais popular hoje em dia, que prioriza os dispositivos móveis e pode se adaptar rapidamente a diferentes dispositivos. Use -o para escrever páginas responsivas de maneira rápida e conveniente e bloqueia as diferenças do navegador. Com o Bootstrap, você não pode mais imaginar a vida trágica de escrever páginas da web no CSS original no passado.
Depois de aprender, descobri que também tinha a capacidade de desenvolver uma página de ponta em minutos. Este artigo introduzirá o Bootstrap para você e o levará a implementar uma página responsiva juntos.
Figura 1. Prioridade móvel, adaptada a diferentes dispositivos
1. Instalação
A maneira mais fácil é referenciar diretamente o Bootstrap fornecido pela Rede de Distribuição de Conteúdo (CDN) na página da web. Quando um usuário acessa a página da web, ele obterá recursos do servidor próximo.
Listagem 1. Obtenha o bootstrap da rede de distribuição de conteúdo
<!-CSS mais recente compilado e minificado-> <link rel = "Stylesheet" href = "bootstrap/3.3.4/css/bootstrap.min.css"> <!-tema opcional-> <link Rel = "Stylesheet" href = "bootstrap/3.3.4/csSs/putconSstrap-thinStrap-Thin" Javascript -> <script src = "bootstrap/3.3.4/js/bootstrap.min.js"> </script>
Você também pode optar por baixar o Bootstrap para implantar localmente. Os usuários podem baixar o bootstrap completo na página ou podem selecionar as funções usadas no projeto de acordo com as necessidades do projeto na página personalizada, compilar e baixar uma versão simplificada do bootstrap. Após a conclusão do download, um arquivo zip é obtido. A estrutura de diretório descompactada é a seguinte:
Listagem 2. Estrutura do diretório de bootstrap
bootstrap/
├── CSS/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── JS/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fontes/
├── glificons-halflings-regular.eot
├── glificons-halflings-regular.svg
├── glificons-halflings-regular.ttf
├── glificons-halflings-regular.woff
└── glifos-halflings-regular.woff2
Aqui, focamos principalmente em três arquivos simplificados: bootstrap.min.css é o componente principal do bootstrap e contém um grande número de classes CSS a serem usadas; bootstrap-theme.min.css contém temas de bootstrap opcionais; bootstrap.min.js fornece alguns métodos JavaScript. Deve -se notar que o bootstrap depende do jQuery, para que o jQuery seja introduzido antes de usar o bootstrap.min.js. Como o uso de redes de distribuição de conteúdo, usamos caminhos relativos para introduzir CSS e JavaScript correspondentes em nossas páginas. No desenvolvimento real, geralmente usamos o modelo fornecido pelo Bootstrap como ponto de partida. Este modelo apresenta os metadados e o bootstrap exigidos pelas páginas responsivas. Os desenvolvedores podem escrever suas próprias páginas responsivas nesta base:
Listagem 3. Modelo básico de bootstrap
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatível" content = "ie = borda"> <meta name = "viewport" content = "width = tag-width, scale-scale"> 1 " Qualquer outro conteúdo da cabeça deve vir * depois de * essas tags. Veja a página via arquivo: //-> <!-[se lt ie 9]> <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <Cript> src = "https://oss.maxcdn.com/rest odores/1.4.2/replge.min.js"> </script> <! [endif]-> </ad Head> <body> <h1> Olá, mundo! src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="js/bootstrap.min.js"></script></body></html>
2. CSS
O Bootstrap é o primeiro a uma estrutura CSS, que predefinou muitas classes CSS. Os desenvolvedores precisam adicionar apenas classes CSS apropriadas aos elementos HTML para obter o estilo desejado, que pode concluir o layout da página, o layout e outras funções. O CSS fornecido pelo Bootstrap é extremamente poderoso. Este artigo se concentrará no sistema de grade que ele fornece. Para outras funções, ele será mencionado apenas pela maneira de aplicá -lo. Se você quiser saber mais sobre as funções, consulte a documentação oficial.
recipiente
Ao usar o layout do bootstrap, você precisa incluir elementos HTML em um contêiner (.Container). O Bootstrap fornece dois contêineres: .Container e .Container-Fluid. O primeiro centra o conteúdo com largura fixa, enquanto o último permite que o conteúdo preencha horizontalmente a janela inteira do navegador, como mostrado abaixo:
Listagem 4 .Container e .Container-Fluid
<div> <p> "Quando eu era criança, minha mãe fazia uma xícara de café para mim sempre que eu estava doente. Ela dizia gentilmente:" Os estrangeiros bebem isso. "" Eu sempre tinha medo de café, e a acidez e a amargura estavam entrelaçadas. Agora não consigo encontrar o sabor que bebi quando criança quando criança, até aquele dia que bebi uma xícara de Isatis. "</p> </div> <div> <p>" Quando eu era criança, sempre que estava doente, minha mãe fazia uma xícara de café para mim. Ela disse gentilmente: "Os estrangeiros bebem isso". "Enquanto jovem, eu sempre tinha medo do café, e a amargura e a amargura estão entrelaçadas. Agora não consigo encontrar o sabor que bebi quando criança quando criança, até aquele dia que bebi uma xícara de Isatis." </p> </div>
A figura a seguir mostra como é no navegador:
Figura 2. RECIMENTO
Sistema de grade
Como o sistema de grade que projetamos escrevendo a primeira página responsiva, o Bootstrap divide a página em linhas (.row), com 12 colunas por linha (.col-md-*). As linhas devem ser incluídas no contêiner. De acordo com o tamanho da tela, as colunas são divididas em .col-xs-, .col-sm-, .col-md- e .col-lg-, respectivamente, correspondentes a telefones celulares (<768px), tablets (≥768px), computadores de tela média (≥992Px) e grande screen (≥768px), com tela média ≥1 ≥1s). Esses pixels que aparecem nele são chamados de pontos críticos. Sempre que o tamanho do navegador ou o tamanho da tela atingir outro ponto crítico, a classe CSS correspondente funcionará e o layout da página mudará. Veja a figura a seguir para obter detalhes:
Figura 3. Sistema de grade
Como você entende a tabela acima? Se você precisar cavar a página em três colunas ao navegar em uma página em um computador, que representa 1/4, 2/4 e 1/4 da largura da linha, você pode escrever o código da seguinte forma:
Listagem 5. Uma linha é dividida em três colunas
<div> <div> .col-md-3 </div> <div> .col-md-6 </div> <div> .col-md-3 </div> </div>>
Abra o navegador e você poderá ver que cada um ocupa 3, 6 e 3 das 12 colunas, que somam exatamente 12 colunas. Se restringirmos a janela do navegador até que seja menor que 970px, descobriremos que ela se tornou três linhas, empilhadas para exibir. Exceto por .col-xs-, outras classes CSS se comportam da mesma forma. Quando o tamanho da tela é menor que seu ponto crítico, ele será exibido empilhado. Ele será exibido apenas em colunas quando o tamanho da tela for maior que o seu ponto crítico e .col-xs- é exibido em colunas em qualquer caso.
As classes CSS correspondentes a diferentes tamanhos de tela podem ser usadas de maneira mista. Por exemplo, se eu quiser que uma página exiba 3 colunas no computador e 2 colunas no telefone, posso escrever o código da seguinte forma. No telefone, a terceira coluna será exibida na próxima linha e ocupará metade da largura da linha:
Listagem 6. Mostre diferentes números de colunas em computadores e telefones
<div> <div> .col-md-3 </div> <div> .col-md-6 </div> <div> .col-md-3 </div> </div>>
Se você deseja exibir a mesma coluna em todos os dispositivos, só precisar
Listagem 7. O mesmo número de colunas é exibido em todos os dispositivos
<div> <div> .col-xs-6 </div> <div> .col-xs-6 </div> </div>
Você também pode dar um certo deslocamento à coluna, por exemplo, a primeira coluna representa 1/4 da largura da linha, e queremos que a segunda coluna compense 6 colunas à direita, ocupando 3 colunas no final da linha:
Listagem 8. Offset da coluna
<div> <div> .col-md-3 </div> <div> .col-md-3 </div> </div>
A ordem das colunas também pode ser ajustada por .col-md-push-* e .col-md-pull-*. O significado deles é empurrar um elemento para trás ou puxar várias colunas para a frente. Os desenvolvedores podem usar esse recurso para puxar conteúdo importante para a frente ao exibi -lo no telefone:
Listagem 9. Push e pule coluna
<div> <div> .col-md-9 .col-md-push-3 </div> <div> .col-md-3 .col-md-pull-9 </div> </div>
O que é ainda mais emocionante é que esse sistema de malha também pode ser aninhado, para que vários layouts complexos possam ser realizados:
Listagem 10. Nestificação
<div> <div> Nível 1: .col-sm-9 <div> <div> Nível 2: .col-xs-8 .col-sm-6 </div> <div> Nível 2: .col-xs-4 .col-sm-6 </div> </div> <div> Nível 1: .col-sm-3 </> </>
O código acima é geralmente dividido em duas colunas e a primeira coluna possui duas colunas aninhadas.
A função Grid da Bootstrap fornece várias possibilidades para o layout da página da web e é muito simples de usar. Vamos tomar um caso para ver como é simples escrever uma página responsiva usando o bootstrap.
3. Combate real
Suponha que você queira implementar uma página da web, como mostrado na imagem a seguir:
Figura 4. Web Design
Primeiro, dividimos os elementos da página da web em linhas e colunas correspondentes. A figura a seguir mostra a divisão do autor:
Figura 5. Dividindo o design da web em linhas e colunas
Consequentemente, defina nossa estrutura HTML e adicione a classe CSS de bootstrap apropriada:
Listagem 11. Definindo a estrutura HTML
<div> <div> <img src = "http://placehold.it/150x150"> </div> <div> <h1> Jane Doette </h1> <h3> Front-end ninja </h3> </div> <hr> <div> src = "http://placehold.it/950x350"> </div> <div> <div> <h2> obra em destaque </h2> </div> <div> <div> <img src = "http://placehold.it/250x250"> <h2> aplique </h2> <a href = "https://github.com/udacity/applify"> https://github.com/udacity/applify </a> </div> <div> <img src = "http://placehold.it/250x250"> <h2> sunflower </h2> <a href = "https://github.com/udacity/sunflower"> https://github.com/udacity/sunflower </a> </div> <div> <img src = "http://placehold.it/250x250"> <h2> bokeh </h2> href = "https://github.com/udacity/bokeh"> https://github.com/udacity/bokeh </a> </div> </div>
Demorou menos de 10 minutos para o autor escrever o código acima e, como não havia fotos, o autor usou as imagens de espaço reservado fornecido on -line. Abrir esta página em um navegador está próximo do design, mas a fonte, a maçaneta, a maçaneta e o tipo de letra ainda são inconsistentes com o design. Em seguida, você precisa ajustar e navegar no documento do bootstrap para descobrir as classes CSS relacionadas. O efeito final é mostrado na figura abaixo:
Figura 6. Efeito de realização
O mais interessante é que, quando você restringe a janela do navegador ou acessa a página do seu telefone, descobrirá que já é uma página simples e responsiva e não adicionamos nenhum código extra! Olhando para o momento, levou menos de 20 minutos no total, e também cumpri minha promessa de escrever uma página responsiva em minutos.