Com o crescente número de usuários móveis, a arquitetura tradicional do sistema da web não é compatível com o uso normal de muitos terminais móveis. No trabalho, também descobrirei que muitos clientes agora têm a necessidade de usar sistemas de gerenciamento em terminais móveis, como telefones celulares e tablets. Se a página da Web de resposta correspondente for desenvolvida separadamente para cada terminal, isso aumentará inevitavelmente o custo do projeto e a pressão sobre os desenvolvedores. Neste momento, é necessário entender o layout responsivo, que nasce para resolver problemas multi-terminais. Desta vez, introduzimos bootstrap leve, de código aberto e gratuito.
Construir um ambiente de desenvolvimento
Primeiro, faça o download do pacote de código -fonte boostrap do site oficial: http://www.bootcss.com/. Para desenvolver projetos simples, você não precisa adicionar todos os CSs, JS, Fontes, etc. no código -fonte. De acordo com as necessidades do seu projeto, você pode adaptar o ambiente necessário.
Os arquivos necessários são os seguintes: jquery.min.js, bootstrap.min.js, bootstrap.css. Se você precisar usar alguns estilos de fonte, também precisará adicionar arquivos relacionados à fonte, como mostrado na figura abaixo:
[Nota] Ao carregar JS, você deve primeiro carregar jQuery.min.js, porque no bootstrap.min.js, você usará métodos relacionados ao jQuery, ou seja, boostrap.min.js, depende do jQuery.min.js.
Teste o ambiente do Bootsrap
Escreva um arquivo de teste index.html. O conteúdo do arquivo de teste é o seguinte:
<! Doctype html> <html> <head> <title> Teste o ambiente de boostrap </ititle> <link rel = "Stylesheet" type = "text/css" href = "./ css/bootstrap.css"> <script type = "text/javascript" src =. type = "text/javascript" src = "./ js/bootstrap.min.js"> </script> </head> <body> </body> </html>
O acima é um ambiente de desenvolvimento de boots. É muito simples!
O que você deve saber ao usar o Boostrap é o sistema raster da Boostrap. É precisamente por causa desse sistema de grade que o torna melhor compatível com dispositivos terminais com diferentes resoluções.
O site oficial do sistema de grade específico tem uma introdução clara: http://v3.bootcss.com/css/. A imagem a seguir do site oficial está localizada:
Ao usar o boostrap, usamos principalmente alguns estilos que foram definidos nele. Isso é útil para um programa que não tem a capacidade de arte, construindo rapidamente uma boa página.
Ao realmente usar o Bootstrap, geralmente verificamos alguns documentos de ajuda no site oficial: http://v3.bootcss.com/css/#tables.
Pessoalmente, recomendo que você copie diretamente o código relevante em sua própria página da web nos exemplos do site oficial e faça modificações relevantes com base nisso. Dessa forma, a velocidade de desenvolvimento será mais rápida e a precisão será maior.
Demonstre alguns estilos de boostrap --- estilos de tabela.
<! DOCTYPE html> <html> <head> <title> Teste Boostrap Environment </itit> <link rel = "Stylesheet" type = "text/css" href = "./ css/bootstrap.css"> <script type = "text/javascript" sc). type = "text/javascript" src = "./ js/bootstrap.min.js"> </script> <body> <table> <tr> <td> formulário de teste </td> <td> teste </td> <td> teste de teste </td> <d> teste </td <td> teste <t. form</td> <td>Test</td> <td>Test</td> </tr> <tr> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> </tr> <tr> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> </tr> <tr> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td> teste </td> <td> teste </td> <td> teste </td> <td> teste </td> <td> teste </td> <td> teste </td> <td> teste </td> <td> test </td> </trd> </tabela </body> </ht>
Os resultados da visualização da página da web são os seguintes:
Os atributos da aula são introduzidos:
1) Tabela e isso já tem o estilo da tabela de bootsrap
2) Aparelhamento indica que o fundo da linha do mouse da tabela permanece brilhante
3) A tabela de tabela aparece nas fronteiras
4) listras de mesa com listras de mesa
[Nota] Quando vários atributos são adicionados, existem espaços entre cada atributo.
2. Botão
<!-Button-> <a href = "#" role = "button"> link </a> <botão type = "submit"> button </button> <input type = "button" value = "input"> <input type = "submit" value "" submit "> <!-Standard-> <botão de botão (" e "e" e "e" e "e" e ", o botão de entrada" e ", o botão, o botão, o botão de botão de sett) </! -> <button type = "button"> (preferências) Primário </botão> <!-Indica uma ação bem-sucedida ou positiva-> <botão, "botão"> (sucesso) Sucesso </botão> <!-botão contextual para alerta de informação Mensagens-> <butty type = "Button"> (Informações gerais) Informações </Button> <!-Indicates Cuaring deve ser tomado com essa ação-> Ação perigosa ou potencialmente negativa-> <button type = "button"> (perigo) Danger </botão> <!-Defase um botão, fazendo com que pareça um link enquanto mantém o comportamento do botão-> <botão tipo = "botão"> (link) </botão>Os resultados da página da web são os seguintes:
Para muitos outros estilos e componentes, é recomendável consultar a documentação oficial de ajuda.
Resumir
Este artigo é um guia, que apresenta brevemente para o que é o boostrap e como usá -lo. Não existe uma lista detalhada de todos os componentes e estilos, mas ... Read!
Este é um artigo muito mágico, você deve clicar e dar uma olhada: Tutorial de aprendizado de Bootstrap que vale a pena compartilhar e coletar
Se você ainda deseja aprender em profundidade, clique aqui para aprender e anexar dois tópicos interessantes a você: Bootstrap Learning Tutorial Bootstrap Tutorial Practical Tutorial
Espero que aqueles que estão interessados em bootstrap possam testar manualmente os efeitos de cada estilo e como usar cada componente sozinhos, e realmente sentir a diversão trazida pela bootstrap.