Usar a estrutura de bootstrap para design e desenvolvimento é uma tendência relativamente popular no mundo. Ao otimizar novos produtos, muitas empresas de software escolherão essa estrutura de desenvolvimento devido às suas vantagens abrangentes em JS e controles.
A estrutura de bootstrap é uma estrutura de design de interface do usuário front-end. Ele fornece uma interface da interface do usuário unificada e simplifica o processo de projetar interface da interface (a desvantagem é que a interface é personalizada; portanto, não há muito espaço para ajuste). Especialmente o layout atual do tempo de resposta (meu entendimento é que a página adota o layout de diferentes elementos da página de acordo com diferentes resoluções), que é bem suportado no bootstrap. Desde que as propriedades sejam simplesmente definidas, o layout do tempo de resposta pode ser implementado automaticamente, simplificando bastante o processo da interface dos programadores.
Portanto, eu uso a estrutura de bootstrap para implementar a seguinte interface. Embora seja simples, é extraordinário (se você realmente deseja implementá -lo, não sei se será o ano do Monkey and Horse Month)
A página inteira é dividida em várias partes, que são implementadas usando o código de exemplo no site oficial do Bootstrap e finalmente formadas em uma página. Os esquemas de cada parte são mostrados na figura a seguir
Em seguida, explique o código de cada parte por sua vez
Primeiro, construa uma página em branco, o código é o seguinte:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name = "viewport" content = "width = device-width, me de maneira", meta. name = "Author" content = ""> <title> bootstrap </title> <link rel = "Stylesheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"> <link Rel = "Stylesheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <!-[se lt ie 9]> <script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]--><!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]--><!--[if lt Ou seja, 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/replge.js/1.3.0/replge.minmin.js"> </script> <! [endif]-> <ylem> .bs-docs-home {Bordal-Color: #1B31B1; Imagem de fundo: URL (line.png); } </style> </head> <body> <script src = "https://code.jquery.com/jquery-1.10.2.min.js"> </sCript> <script src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"> </script> </body> </html>Para usar a estrutura de bootstrap, você deve consultar o arquivo de estrutura de bootstrap na página. Existem quatro no total: bootstrap.min.css, bootstrap-theme.min.css, jQuery-1.10.2.min.js, bootstrap.min.js
Somente referindo -se a esses arquivos, você pode usar os vários elementos da interface do usuário fornecidos pela estrutura do bootstrap.
Em seguida, como mostrado na figura acima, explique os códigos de cada parte em sequência
Descrição superior:
A idéia de projetar a página inteira é colocar a página inteira em um painel, e o texto na parte superior é o cabeçalho do painel
A página da estrutura de bootstrap é um layout de grade de 12 colunas. Então eu dividi a página inteira em três partes. Existem 3 colunas em branco largas à esquerda e à direita e 6 colunas ampliam um painel (painel).
O código é o seguinte: a parte restante do código está em <div> </div> na sequência
<Body> <div> <h1 style = "linha-tena de linha: 2em;"> </h1> <br/> <div> <div> </div> <div> <div> <h3> <strong> Exame de habilidades profissionais Score de exames </scration </strong> </h3> </div> </div> <//div> </strong> </m3> </divi- </div> <div> <//divcational </div> </strong> </m3> <div> </div> </div> <//div> <//</> </fiv </dividt> </h3> </div> </div> <//div> <//</> </<s> </Div> </Div> <Div> <//Div> <//Div </> </> </niv> </divi- src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <script src = "http://cdn.bootcs.com/twitter-bootstrap/3.1/js/bootstrap.mins.js">> </sflinds.joms "> </sflinds.jcs.jcs"> </sflinds.jcs.jcs ">>
Texto rápido
O texto rápido usa o componente de alerta na estrutura do bootstrap, e o código é o seguinte:
<div> <button type = "button" data-dismiss = "alert" aria-hidden = "true"> × </button> <strong> Nota! </strong> As pontuações para este site são do site oficial de 12333. Para obter detalhes, consulte o site oficial </div>
Formulário de cartão de identidade e botão de consulta
O formulário do cartão de identificação e o formulário de conta subsequente devem ser de uma forma. Os botões de forma de identidade e consulta são agrupamentos de elementos de formulário que utilizam a estrutura de bootstrap. Use o grupo de entrada para combinar a caixa de texto e o botão. A estrutura de bootstrap fornece efeitos como marcas d'água e destaques. Adicione muita cor ao formulário
<form role = "form" name = "form1"> <div> <gravador para = "idcard"> Por favor, digite seu número de identificação </cretel> <div> <input type = "text" id = "idcard" name = "iDcard" placeholder = "IDCARD Número"> <pan> <butão = "" "onclick" "form1.subsm () <) > Query </botão> </span> </div> </morm>
Formulário de assunto
Os formulários de conta também são grupos de elementos de formulário que utilizam a estrutura de bootstrap. Use o grupo de entrada para combinar a caixa de texto (entrada), botão (botão) e lista suspensa (UL).
Você pode inserir o assunto diretamente na caixa de texto ou selecionar o assunto no menu suspenso. A implementação específica é usar $ ('#sujeito'). O formulário da conta está localizado abaixo do formulário de identificação, dentro do formulário (formulário)
O código é o seguinte:
<div> <gravadora para = "sujeito"> Por favor, digite o assunto que você está procurando </elatbul> <div> <inspum type = "text" id = "sujeito" name = "sujeito" stakeholder = "conta, assunto em branco significa consultar todos os sujeitos"> <div> <butter type = "Button" "Data-toggle" OnClick = "$ ('#sujeito'). OnClick = "$ ('#sujeito').Informações de erro de consulta
Quando o botão de consulta é clicado e nenhum registro é encontrado, a mensagem de erro de consulta é exibida. Como o texto rápido anterior, ele usa o componente de alerta na estrutura do bootstrap.
Se essas informações são exibidas também requer a cooperação do código dinâmico de segundo plano. O código dinâmico decide se deve exibir as informações com base nos resultados da consulta (se não houver registro, as informações serão exibidas). O código dinâmico não é discutido neste artigo.
A localização está por trás do formulário, e o código é o seguinte:
<div> <button type = "button" data-dismiss = "alert" aria-hidden = "true"> × </button> <strong> Nota! </strong> Nenhum resultado foi encontrado, verifique o número de identificação e os assuntos e verifique novamente </div>
Forma de nota
Quando o botão de consulta é clicado, o formulário de pontuação é exibido quando o registro é encontrado. Da mesma forma, se deve exibi -lo também requer a cooperação de código dinâmico em segundo plano.
Apenas uma mensagem de erro e o formulário de pontuação podem aparecer ao mesmo tempo
O código é o seguinte:
<div> <tabela CellPacing = "0" CellPadding = "0"> <tr> <th scope = "col"> <span style = "cor: white"> sujeitos </span> </th> <th scope = "col"> <td style = "cor: white"> pontuação </span> </th> </trd> <td <td = "operator" <td> Operador de computador </td> <td> Excelente </td> </tr> <tr> <td> operador multimídia </td> <td> bom </td> </tr> <tr> <td> web design </td> <td> falhou </td> </tr> </td> </div>
Esta página é implementada usando a estrutura do bootstrap. Graças ao poder da estrutura de bootstrap, o design da interface do usuário não é mais uma tarefa difícil. Mas o Bootstrap é apenas uma estrutura da interface do usuário e sua excelência depende da cooperação do código dinâmico em segundo plano.
O URL a seguir é a função do autor usando a interface acima, mais código dinâmico de back -end (PHP) para realizar a consulta das pontuações dos testes de habilidades profissionais (apenas em Xangai). Você pode ir e dar comentários valiosos (válidos por 1 mês).
http://bertin.sturgeon.mopaas.com/
O código completo da interface do usuário é o seguinte:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name = "viewport" content = "width = device-width, me de maneira", meta. name = "Author" content = ""> <title> bootstrap </title> <link rel = "Stylesheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"> <link Rel = "Stylesheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <!-[se lt ie 9]> <script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]--><!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]--><!--[if lt Ou seja, 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/replge.js/1.3.0/replge.minmin.js"> </script> <! [endif]-> <ylem> .bs-docs-home {Bordal-Color: #1B31B1; Imagem de fundo: URL (line.png); } </style> </adhead> <body> <div> <h1 style = "line-hight: 2em;"> </h1> <br/> <div> <div> </div> <div> <div> <h3> <div> Exame de habilidades vocacionais "Datanym" Dataming "Dataming" Dataming "," Div> <div> <div> <butting) "Dataming" Datamern "," Div> <div> <div> <blotting) "Datamern", "Div> <div> <div> <blotting," Datamern "," Div. ARIA-HIDDEN = "TRUE"> × </button> <strong> Nota! </strong> As pontuações perguntadas neste site são do site oficial do 12333. Para detalhes, consulte o site oficial </div> <formulário Role = "formulário" Name = "Form1"> <div> espaço local = "Número de identificação"> <pan> <botão tipo = "botão" onclick = "form1.subMit ();" > Query </botão> </span> </div> <div> <etiqueta para = "sujeito"> Por favor, digite o assunto que deseja consultar </creat> <div> <input type = "text" id = "sujeito" name = "sujeito" span <blowholder = "conta em branco" span> span <blowt> "span> <blowt> span) href = "#" onclick = "$ ('#sujeito'). OnClick = "$ ('#sujeito'). <div> <tabela CellPacing = "0" CellPadding = "0"> <tr> <th scope = "col"> <span style = "cor: branco"> sujeitos </span> </th> <th scope = "col"> <td style = "cor: white"> score </span </th> </td <t> <t> operator</td><td>excellent</td></tr><td>multimedia operator</td><td>good</td></tr><td>web design</td><td>failed</td></tr> </table></div> </div></div><div></div></div></div></div> <script src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <script src = "http://cdn.bootcs.com/twitter-bootstrap/3.1/js/bootstrap.minjs">>O exposto acima é o conhecimento relevante sobre o uso da estrutura do bootstrap para criar códigos de exemplo de interface para páginas de consulta introduzidas. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!