O aprendizado do bootstrap é muito simples, e o estilo que oferece é muito bonito. Apenas um pouco de estudo simples pode criar páginas bonitas.
Site chinês Bootstrap: http://v3.bootcss.com/
Bootstrap fornece três tipos de downloads:
Bootstrap para ambientes de produção
Compilar e compactar CSS, JavaScript e arquivos de fonte. Não contém documentos e arquivos de origem.
Código fonte do bootstrap
Menos, JavaScript e Font Arquivos código -fonte e com documentação. Requer o menos compilador e algum trabalho de configuração.
Sass
Este é um projeto de porção de origem de menos para SASS para uma rápida introdução em projetos de trilhos, bússola ou somente SASS.
Na verdade, podemos usá -lo sem baixar o bootstrap:
O site chinês da Bootstrap criou especialmente seu próprio serviço de aceleração CDN gratuito para o Bootstrap. Com base no serviço CDN dos fabricantes de nuvem domésticos, a velocidade de acesso é mais rápida, o efeito de aceleração é mais óbvio, não há velocidade e limitação de largura de banda e é permanentemente livre.
base.html
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name "" viewport "=" width = device-width,, inicialmente scale "> <meta =" viewport "=" width = device-width,, sply-scale "> <meta =" viewport "=" width = device-width, " E qualquer outro conteúdo * deve * segui -los! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h1>Hello, bootstrap! </h1> <!-jQuery (necessário para os plugins JavaScript do Bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jQuery.min.js"> </script> <!-incluem todos os plugins compilados (abaixo) ou individualmente-ou também src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
O bootstrap foi introduzido em base.html. Salve e podemos usar os estilos fornecidos pelo Bootstrap.
Ícone da fonte
O Bootstrap fornece mais de 200 ícones por padrão. Podemos usar estes ícones através da tag span:
<H3> Ícone </h3> <pan> </span> </span> </span> <pan> </span> <pan> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span>
Botão
A tag <button> </botão> é usada para criar botões e o Bootstrap fornece estilos de botão ricos. <h3>Button</h3> <button type="button">Button</button> <button type="button">primary</button> <button type="button">success</button> <button type="button">info</button> <button type="button">warning</button> <button type="button">warning</button> <button type="button">danger</button> <h3>Button size</h3> <button type = "Button"> Button </button> <button type = "button"> primário </button> <button type = "button"> success </botão> <button type = "button"> info </botão> <h3> mostre o ícone no botão </h3> <botão tipo = "Button"> </span> </span> </sutão> Botão </button "
Além do tamanho padrão do botão, o Bootstrap também fornece três parâmetros para ajustar o tamanho do botão, a saber: BTN-LG, BTN-SM e BTN-XS.
Menu puxador
O menu suspenso é uma das interações mais comuns, e o Bootstrap fornece belos estilos.
<H3> menu suspenso menu </h3> <div> <button type = "button" id = "suspensomenu1" data-toggle = "suspenso" aria-expeled = "true"> suspenso <pan> </span> </button> <l role = "menu" aria-labelledby = "role" "> <li> role =" presença " href = "#"> ação </a> </li> <li role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> outra ação </a> </li> <li role = "Apresentação"> <a Role = "Menuitem" Role = "menuitem" tabindex = "-1" href = "#"> link separado </a> </li> </ul> </div>
Caixa de entrada
Use a tag <input> </input> para criar uma caixa de entrada.
<H3> Caixa de entrada </h3> <div> <mpan> </span> <input type = "text" placeholder = "nome de usuário"> </div> <div> <span> </span> <input type = "senha" stawolder = "senha"> </div>
Barra de navegação
A barra de navegação é essencial como um guia para todo o site.
<H3> Barra de navegação </h3> <av> <div id = "navbar"> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#sobre"> sobre </a> </li> <li> <a href = "#"> contact </a> </a> Role = "Button" ARIA-EXPAVEND = "FALSO"> DOLDOWN <SPAN> </span> </a> <ul role = "MENU"> <li> <a href = "#"> ação </a> </li> <li> <a href = "#"> outra ação </a> </li> <li> <li> <i> href = "#"> outra ação </a> </li> <li> <li> <li> " link </a> </li> </li> </li>
Forma
A transferência de dados entre pessoas e sistemas precisa ser concluída por formulários. Por exemplo, o envio de informações de registro/login, o envio de condições de consulta, etc. Use a tag <form> </morm> para criar um formulário.
<H3> formulário </h3> <form> <div> <npan> </span> <input type = "email" id = "exemploinputemail1" someholder = "digite email"> </div> <div> <dran> </span> <input type = "senha" id = "ExpletInTPassword1" PlaceHelder = "senha"> </Div = " <input type = "file" id = "exemploinputfile"> <p> Exemplo de ajuda no nível do bloco aqui.
Caixa de aviso
As caixas de aviso são um meio importante para o sistema transmitir informações e fornecer orientação aos usuários. Não há rótulo para caixas de aviso, e o estilo fornecido pela Bootstrap pode criar instantaneamente belas caixas de aviso.
<H3> Caixa de aviso </h3> <div role = "alert"> <button type = "button" data-dismiss = "alert" aria-label = "Close"> <span Aria-hidden = "true"> × </s3 </div> <div role = "alert"> <a href = "#"> sucesso! </div>
Barra de progresso
O processo de processamento do sistema geralmente exige que os usuários esperem, e a barra de progresso permite que os usuários percebam o processo de processamento do sistema, aumentando assim a tolerância.
<H3> Barra de progresso </h3> <div> <div role = "ProgressBar" Aria-valuenow = "70" Aria-valuemin = "0" Aria-valuemax = "100"> 70% </div> </div>
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.
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