O Bootstrap é como uma estrutura front-end. Ele já organizou muitos CSs e pode ser chamado diretamente se for necessário para o desenvolvimento do front-end. O endereço do site é http://www.bootcss.com. O uso do bootstrap pode reduzir o tempo de layout no CSS durante o desenvolvimento do front-end
Você precisa usar o Bootstrap para baixar os componentes no site oficial (clique para abrir o link). A versão de bootstrap usada no ambiente de produção (clique para abrir o link). O Bootstrap3 não é compatível com 2. É recomendável usar o Bootstrap3 diretamente de acordo com seus documentos de desenvolvimento.
Depois de descomprimir o bootstrap, copie as 3 pastas obtidas CSS, fontes e JS para o diretório do site. Se for o JSP Web Project do Eclipse, coloque -os na pasta Webroot.
Depois disso, você pode chamar o bootstrap para modelar rapidamente o front-end qualquer página neste diretório do site.
No entanto, vale a pena notar que diferentes navegadores têm explicações diferentes para o Bootstrap. O IE não pode ler alguns estilos, mas as funções básicas não são afetadas e a página é um pouco feia.
Aqui está uma comparação entre o IE e o Google Chrome na mesma página:
1. Objetivos básicos
Use Bootstrap para escrever uma bela página de destino para PC, tablet e telefone celular.
Se esticado no PC, vários elementos se adaptarão automaticamente à tela.
Se você abrir essas páginas no seu telefone, se adaptará diretamente à tela do telefone sem a necessidade de ajuste automático do usuário.
2. Ideias básicas
O layout da página foi projetado de acordo com o estilo inerente de bootstrap da seguinte maneira:
3. Processo de produção
O código específico de toda a página é o seguinte e o seguinte analisará as tags uma a uma:
<! Doctype html public "-// w3c // dtd html 4.01 transitório // pt"> <html> <head> <title> página de login </title> <meta name = "viewport" content = "width = dispositivo-widththth = scale = 1.0, user-scalable"> Rel = "Stylesheet" Media = "Screen"> </head> <body> <div> <div> <table chame = "void"> <tr> <td> <img src = "imagens/img0.jpg"/> </td> <td> Bem -vindo. Faça logon primeiro. </td> </tr> </ tabela> </div> <div> <form role = "form" action = "1.html" method = "post"> <div> <gravador para = "nome de usuário"> nome de usuário: </celt> <div> <input type = "text" = "username" placeholder = "username" ida "" Senha: </elabel> <div> <input type = "senha" name = "senha" placeholder = "senha" id = "senha"/> </div> </div> <div> <div> <button type = "submit"> login </botão> <small> não tem uma conta? <a href = "http://2.com"> clique para registrar </a> </mall> </div> </div> </morm> </div> </div> </div> </body> </html>
1. tag <head>
Primeiro, coloque as duas linhas de código a seguir na tag <head>:
<head> <title> página de login </ititle> <!-Exige que a página se adapte automaticamente à tela do navegador-> <meta name = "viewport" content = "width = width, escala inicial = 1.0, user-scalable = no"> <!-declarar que eu quero usar o bootstrap-> <link href = css = css/"boots/bom = boots" (links/boms/bom = bys/", que eu quero usar o bootstrap-> <link-sf = css/" css/boots/", que eu quero usar o bootstrap-> <link-sf = css/" css/"-", que eu quero usar o bootstrap-> <link-sf = csSs/""- </head>
2. Tag <body>
(1) Primeiro escreva <div> </div> e depois coloque o código nele. A descrição básica é a seguinte:
(2) tag <div>
<div> <!-Defina a tabela para layout esta camada CSS. Não é fácil adicionar align = "esquerda" à tag IMG. A imagem transbordará para a camada-> <!-O mesmo que <table>-> <table chame = "void"> <tr> <td> <img src = "imagens/img0.jpg"/> </td> <td> Bem-vindo. Faça logon primeiro. </td> </tr> </ table> </div>
(3) Na tag <div>, primeiro coloque um formulário de formulário Role = "Form" Action = "1.html" Method = "post">. Comparado com os formulários HTML comuns, esse formulário possui mais atributos de classe e atributos de função. Não há necessidade de dizer muito sobre o atributo de classe. Se o valor for formado, mesmo que o formulário tenha localização suficiente, a etiqueta externa e a caixa de entrada não estarão na mesma linha. Se o valor for o formulário atual-horizontal, é como mostrado no efeito da figura. O atributo de função não mostra nenhum efeito e é adicionado apenas de acordo com o documento chinês de bootstrap.
Em seguida, os elementos em cada formulário são os seguintes:
<div> <form role = "form" action = "1.html" method = "post"> <!-O rótulo externo de cada propriedade forma uma tupla do grupo de forma com a caixa de entrada-> <div> <!-o atributo de classe a seguir é para que o sinistro é automaticamente de acordo com o tamanho da tela-> <LABEL para = "USERNAME"> USERNAME: Entrando em qualquer coisa, que obviamente não pode ser explicada no IE8. Não consigo ver nenhuma função do ID, ele é adicionado apenas de acordo com os requisitos dos documentos chineses de bootstrap -> <input type = "text" name = "nome de usuário" placeholder = "nome de usuário" id = "nome de usuário"/> </div> </div Type ""> senha "> senha"> </> </div> "typ>" Name "> senha"> senha: </beler> <div> <input <stpy> " </div> <div> <!-O botão aqui é diferente do botão Enviar HTML Ordinary, mas não afeta o envio do formulário-> <botão type = "submit"> login </botão> <!-<mall> Tag garante que este texto seja a mesma linha que o botão de envio-> <mall> sem conta? <a href = "http://2.com"> clique para registrar </a> </mall> </div> </div> </morm> </div> </div>
Neste ponto, o desenvolvimento desta página foi concluído.
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.