O maior benefício do bootstrap para os desenvolvedores é o seu layout responsivo e alguns estilos excelentes.
Agora vou apresentar algumas etapas e algumas coisas comumente usadas para usar o Bootstrap.
1. Escreva o cabeçalho
<head> <meta charset = "utf-8"> <!-Para fazer com que o IE use o modo de renderização mais recente, adicione esta tag-> <meta http-equiv = "x-ua compatível com" content = "ie = borda"> <!-para o layout de responsabilidade, primeiro a largura física do dispositivo, definido a web "> <! name = "viewport" content = "width = largura do dispositivo, escala inicial = 1"> <title> LearnBootStrap </title> <!-Consulte o arquivo diretamente-> <link rel = "sTILLESHEET" type = "text/css" href = "css/bootstrap.min.css"> <! href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-para apoiar o IE9 ou abaixo, adicione estes-> <!-[se LT ie 9]> <!-deixe-o apoiar H5-> <! src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <!-Deixe-o apoiar consultas de mídia, ou seja, responsivo-> <script src = "https://oss.maxcdn.com/rest odores/1.4.2/replge.min.js"> </script> <!-[endif]-> </ad Head>
2.Introduz JS
Isso pode ser escrito no corpo
<!- arquivo jQuery. Certifique-se de introduzir-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>< !-- o último arquivo javascript de bootstrap-> <script <script src = "// cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
3. Use aula de contêiner
A classe de contêineres é uma classe div comumente usada
Use principalmente a função de centralização
<div> Olá </div>
4. Use um sistema rasterizado
Sistema Rasterizado é um sistema de layout muito usado para bootstrap
Uso simples como segue
<div> <!-XS significa no telefone, SM significa no tablet e MD significa na área de trabalho. Os seguintes números representam quantas colunas estão ocupadas. A tela cheia é de 12 colunas-> <!-o conteúdo excede a altura da grade e a altura será aumentada, e a largura não será aumentada-> <!-deslocamento significa quantas colunas serão movidas para a direita-> <div> .col-xs-12 .col-sm-6 .col-md-8.col-xs-12. .col-sm-6 .col-md-4 </div> </div> <div> <!-Empurre move para trás, puxe move-se para a frente
Você pode ver que o sistema rasterizado pode ajustar diferentes larguras de acordo com diferentes dispositivos.
5. Use o formulário
<div> <!-Tabela responsiva, o conteúdo é muito longo para se mover para a esquerda e para a direita-> <div> <!-As últimas mesas são as mesas com fronteiras. When the mouse passes through the tbody row, the color is darker and the table is compacted --> <table> <thead> <tr> <th>Table title</th> <th>Table title</th> <th>Table title</th> <th>Table title</th> </tr> </thead> <tbody> <!--The color of the row is light green --> <tr> <th>Table content</th> <th>Table Conteúdo do conteúdo da tabela </th> conteúdo da tabela </th> <th> conteúdo da tabela </th> <!-A cor da linha é bege-> <tr> <th> conteúdo de tabela </th> <th> tabela </th> <th> conteúdo da tabela </th> <th> conteúdo da tabela </th> <th> conteúdo da tabela </th> th the TABLE CONTEÚNDO </th> <th> conteúdo da tabela <The> <th> the TABLE </ <th> Conteúdo da tabela </th> <the> Conteúdo da tabela </th> <th> conteúdo da tabela </th> <the> conteúdo da tabela </th> <th> conteúdo da tabela </th> <th> conteúdo da tabela </th> <th> conteúdo da tabela </th> <th> conteúdo da tabela </th> </t> </tbody> </tabela </div> </div>
Se você quiser alterar a cor de uma determinada grade, você pode adicionar classes como TR na tag th
6. Use formulários
O uso mais básico é o seguinte
<div> <form> <!-Parte do item é um layout de formulário-grupo, com rótulo e entrada-> <div> <!-Rótulo para correspondente ao ID de entrada-> <Label para = "ExpletImputEmail1"> Endereço de email </elbel> <!-classe de entrada deve ser definido como formulário-> <but) Para = "ExemploInputPassword1"> senha </elabel> <input type = "senha" id = "ExpletInputPassword1" Standarholder = "senha"> </div> <div> <gravador para = "ExpletInputFile"> FILE <!-Ajuda </etc. <Boel> <input type = "Caixa de seleção"> Confira -me
Se você definir a classe de formulário para entrar em linha, todos os elementos serão exibidos na mesma linha
Se você definir a classe de formulário como formulada, cada grupo de formulários exibirá uma linha, mas você precisará definir a largura
como
<div> <!--Let each form-group display one line, but each form-group child must specify the width--> <form> <div> <label for="Emai">Email</label> <!--input-group let prompts and supplements be displayed in the same line--> <div> <input type="email" placeholder="Email" id="Emai"> </div> </div> <div> <label Para = "passwor"> senha </elabel> <div> <input type = "senha" stakeholder = "senha" id = "passwor"> </div> </div> <button type = "submit"> cump </botão> </morm> </div>
Geralmente, quando registramos uma conta, se as informações estiverem incorretas ou corretas, elas solicitarão ao lado dela e a cor da caixa de entrada será diferente.
Bootstrap nos fornece esta função muito prática
<div> <form> <!-Adicionar dois itens devem ser adicionados à classe da divisão dos pais-> <!-Status do sucesso-> <div> <gravador para = "inputSuccess2"> entrada com sucesso </elated> <input type = "text" id = "inputSuccess2" ARIA-DSCRIBTY = "inputsucscess2status"> aria-hidden = "true"> </span> <!-essas informações estão ocultas, aumentando a legibilidade do código-> <span id = "inputSuccess2Status"> (success) </span> </div> <!-Warning Status-> <div> <bel para = "inputwarning2"> inputat com aviso </> ARIA-Descritedby = "InputWarning2Status"> <span Aria-hidden = "true"> </span> <span id = "inputwarning2status"> (aviso) </span> </div> <!-status de erro-> <div> <bel para "inputerror2"> input com erro </> ARIA-DESCRIBREDBY = "InputError2Status"> <span Aria-hidden = "true"> </span> <span id = "inputError2status"> (erro) </span> </div> </morm> </div>
7. Botão
Os botões são essenciais
Fundo branco-> <botão tipo = "Button"> (estilo padrão) padrão </botão> <!-fundo azul-> <button type = "button"> (preferências) primário </button> <!-fundo verde-> <butter tipo = "Button"> (SUCCESS) SUCCESSO) </BOTTLE> <!-Azul-> <e Button e ""> ("> (Buttern> (General) Informações) </Button> <!-Azul-> <! (AVISO) AVISO </botão> <!-fundo vermelho-> <button type = "button"> (perigo) Danger </butut>Você também pode adicionar dimensões à classe
<button type = "button"> (botão grande) Botão grande </button> <botão do botão = "Button"> (tamanho padrão) Botão padrão </button> <botão tipo = "botão"> (botão pequeno) Button pequeno </botão> <Button Type = "Button"> (botão pequeno) Button extra pequeno </toxle>
O exposto acima são as etapas e o uso comum de bootstrap
Depois de usar essa estrutura, a velocidade de desenvolvimento não apenas aumentou, mas a qualidade também melhorou.
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.