O principal objetivo deste artigo permite que você aprenda a usar o Twitter Bootstrap para criar um site dentro de 20 minutos. Como construir um site é introduzido abaixo:
A primeira coisa a dizer é que o Twitter Bootstrap é uma excelente estrutura de código aberto front-end. Ele fornece casos de uso detalhados para todos os agrupamentos -chave, permitindo que você anexe facilmente ao seu design copiando e colando.
Modelos básicos de HTML
Precisamos usar um modelo HTML básico para que possamos incluir o arquivo de bootstrap de que precisamos. Aqui está o começo do nosso projeto de bootstrap no Twitter, copie esses códigos em um arquivo e nomeie IT Index.html.
<! Doctype html> <head> <title> Twitter Bootstrap Tutorial - um tutorial de layout responsivo </ititle> <style type = 'text/css'> body {background -color: #ccc; } </style> </head> <body> </body> </html>Neste código, adicionamos alguns CSs para tornar o fundo de fundo da página, porque dessa maneira podemos ver facilmente colunas diferentes em nosso design, facilitando o entendimento.
Introduzir o arquivo de bootstrap no Twitter
Para usar o Twitter Bootstrap, precisamos apenas introduzir um arquivo em nosso modelo. Existem muitas maneiras de introduzir arquivos. Se você deseja conhecer esses métodos, consulte os documentos relevantes.
Com base no ponto de partida deste tutorial, apresentaremos o arquivo de bootstrap com combinação.min.css através do CDN sem baixar nenhum arquivo.
A cópia do código é a seguinte: href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel = "StyleSheet">
O Twitter Bootstrap CSS entra em vigor em nossos modelos.
O contêiner do Twitter Bootstrap
A classe de contêiner de bootstrap é muito útil. Ele pode criar uma área centralizada na página e, em seguida, podemos colocar o conteúdo de outros locais dentro. A classe de contêineres é equivalente à criação de uma caixa div centrada com uma largura estática e um valor de Magin do Auto. A vantagem da classe de contêineres do Twitter Bootstrap é que ele é responsivo e calcula a melhor largura com base na largura da tela atual para fins práticos.
Na etiqueta corporal, use a classe de contêineres para criar uma div. Ele servirá como o invólucro externo principal para outros códigos na página.
Se você ajustar a altura desta div e definir sua cor de fundo para o branco, o efeito que você vê será assim:
Título e navegação
Agora que temos um local para adicionar código HTML extra, podemos adicionar o texto do título e criar a principal barra de navegação para o site.
Adicione o seguinte texto ou o texto selecionado à tag Div da classe de contêiner.
<h1> Twitter Bootstrap Tutorial </h1>
Não há muito novo agora, é apenas um título, vamos para o aspecto mais interessante da navegação no Twitter Bootstrap.
O Bootstrap possui uma classe NAV que nos permite criar vários elementos de navegação. Você pode adicionar o seguinte código após a tag H1.
<div class = 'Navbar Navbar-Inverse'> <div class = 'Nav-colapso' style = "Hight: Auto;"> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> página um </a> </li> <li> <a>
As classes relacionadas à barra de navas têm todos os estilos da barra de navegação. Adicionar a classe Inverse Navbar aplicará um estilo preto legal, que é uma combinação comum de bootstrap no Twitter. Sugiro expandir esse estilo para criar sua navegação exclusiva. Mas neste tutorial ainda usaremos o estilo básico de bootstrap.
Em uma div com classe Navbar, adicionamos outra div com colapso de classe Nav e adicionamos altura do estilo embutido: AUTO; Isso informa ao Bootstrap que, quando esta página estiver em uma janela do navegador com uma largura inferior a 970px, ele fornecerá uma visualização de chave compactada.
Se você salvar o arquivo index.html e abri -lo no navegador, poderá ver essa alteração quando ajustar a largura da janela do navegador, como mostrado na figura.
Maior que 979px:
Menos de 979px:
Além disso, podemos adicionar uma classe NAV a um elemento de lista HTML não ordenado para aplicar mais estilos no arquivo CSS do Bootstrap, ou podemos adicionar uma classe ativa ao item da lista "Home".
Compartilhe artigos maravilhosos sobre a navegação de bootstrap: "Navegação que deve ser aprendida todos os dias por bootstrap", "navegação que deve ser aprendida todos os dias por bootstrap"
Conteúdo principal e barra lateral
Terminamos a navegação principal do site e agora precisamos adicionar a área de conteúdo principal e uma barra lateral para suportar mais links ou caminhos de navegação. Adicione o seguinte código à barra de navegação.
<div id = 'content' class = 'Row-Fluid'> <div class = 'span9 main'> <h2> seção de conteúdo principal </h2> </div> <div class = 'span3 barra lateral'> <h2> barra lateral </h2> </div> </div>
É exatamente isso que precisamos entender sobre o sistema raster da Bootstrap. Obviamente, a documentação oficial do Bootstrap abrange mais detalhes, mas começaremos com o básico e permitiremos que você entenda melhor.
O sistema raster utiliza um layout de 12 colunas, o que significa que uma página pode ser dividida em 12 colunas idênticas. A figura a seguir obtida no documento oficial do Bootstrap fornece uma boa exibição.
No código, acabamos de colar na barra de navegação, você pode ver as classes chamadas Span9 e Span3. Eles dividirão a página em duas partes das 9 colunas à esquerda e 3 colunas à direita, formando nossa área de conteúdo e barra lateral. Um dos benefícios do uso de um sistema raster é que ele calcula dinamicamente a largura da coluna com base na largura da janela, para que você não precise escrever nenhuma consulta de mídia para fazer seu site funcionar em qualquer resolução de tela.
Você pode observar o efeito deles alterando o número de vãos e ajustando o tamanho do seu navegador. Você notará que, quando a área de conteúdo for menor que 724px, essas colunas são empilhadas verticalmente.
Agora, colocamos o seguinte texto ou qualquer outro texto atrás da tag H2 na área de conteúdo principal, apenas para alongar um pouco a página.
Copie o código da seguinte forma: PSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, SED DIAM DIAM NIMUMOMMOMENT NIBH EUISMOD Tincidunt Ut Laoreet dolore magna aliquam Erat volutpat. Ut wisi enim ad mínimo veniam, quis nostrud exercício sta ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequeat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit guiltit lumtatum zzril delenit augue duis dolore te feugait nulla facialilisi. Nam Liber temporal cum soluta nobis eleifend opção conge nihil imperdiet doming id quod mazim placerat facer poder assumir. </p>
<p> typi não habitante clariitatem insitam; Estus Legite no IIS Qui Facit Eorum Clariitatem. Investigações demonstrar -se -de -trapaceiros clariitres lenda me lius quod ii legunt saepius. Claritas est etiam Process Dynamicus, Qui sequenciador mutationem Consuetudium Legorum. Mirum est notare quam littera gothica, quam nunc putlamus parum claram, anteposuerit litterarum formato humanitatis por Seacula quarta decima et quinta decima. EODEM MODO TYPI, QUI NUNC Nobis Videntur Parum Clari, Fiant Sollenes em Futurum. </p>
Agora o site mostrará o seguinte:
Navegação da barra lateral
Você pode ver todos os elementos de navegação que o Twitter Bootstrap nos fornece aqui (twitter.github.com/bootstrap/components.html#navs).
Usaremos a guia vertical para criar uma área de navegação adicional. Copie e cole o código a seguir na tag H2 da barra lateral.
<ul> <li> <a href = '#'> outro link 1 </a> </li> <li> <a href = '#'> outro link 2 </a> </li> <li> <a href = '#'> outro link 3 </a> </li> </ul>
Esta é uma tela simples! O código acima é literalmente apenas uma lista não ordenada com as classes NAV-Tabs e NAV empilhada, mas cria um painel de navegação para nós.
Olhando para o efeito final, uma página baseada no Twitter Bootstrap está concluída.
Depois de ler este tutorial, você poderá usar o Bootstrap para criar uma página de layout responsiva básica, entender o sistema de grade e poder usar o bootstrap para navegar, barras de navegação e entender o básico do design responsivo.
Mais conteúdo sobre bootstrap também pode ser encontrado em tópicos especiais: "Tutorial de aprendizado de bootstrap"
Todos os itens acima são o conhecimento necessário para usar o Twitter Bootstrap. Espero que seja útil para o aprendizado de todos. Espero que você possa gastar mais tempo e fazer perfeito. Em um futuro próximo, você pode se tornar um especialista em bootstrap.