O artigo anterior já falou sobre algumas etapas e alguns usos básicos do bootstrap. Clique para visualizar
Este blog continua a apresentar alguns efeitos comuns, incluindo principalmente os seguintes componentes
1. Menu puxar para baixo
2. Barra de navegação
3. Barra de progresso
4. Objetos de mídia
5. Paginação
6. Lista
Primeiro, importe o CSS e JS de Bootstrap
<link rel="stylesheet" href="css/bootstrap.min.css"><!--It is best to quote cdn's css, some style files do not --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><script src = "js/jQuery-3.1.0.min.js"> </script> <script src = "js/bootstrap.min.js"> </script>
1. Menu puxar para baixo
Consiste principalmente em botão e UL, e pode adicionar legendas e linhas divididas
<div> <button type = "button" data-toggle = "suspenso" ARIA-EXPAVEND = "FALSO"> Linha do metrô <!-Este é um símbolo do triângulo descendente-> <pan> </span> </button> <l role = "MENU"> <!-este é um subtitle-> <li> Subway </li> <li> <li> <a hre "<!-é um subtitle-> <li> <li> href = "#"> linha 2 </a> </li> <li> <a href = "#"> linha 3 </a> </li> <li> <a href = "#"> linha 4 </a> </li> <!-esta é uma linha dividida-> <li> </li> <li> <a>
2. Barra de navegação
A barra de navegação é o padrão para quase todas as páginas da web, por isso é absolutamente certo aprender a usá -la.
Esta é a barra de navegação no topo da página
<!-Defina a classe NAV como mais sofisticada, defina como NavBar-Static-Top para remover os cantos arredondados da barra de navegação e consertá-lo na parte superior-> <navegação de role = "navegação"> <div> <!-o início da barra de navegação, geralmente texto ou imagem-> <div> <! Data-Target = "#BS-Exemplo-NavBar-Collapse-1"> <pan> TOGLGE NAVEGIGAÇÃO </SPAN> </span> </span> </span> </span> <pan> </span> </span> </span> </button> <!-Swap Brand to IMG-> <a href = "#"> Brand </a> retraído e clicado em-> <div id = "bs-exemplo-navbar-colaps-1"> <ul> <li> <a href = "#"> gerenciamento de membros </a> </li> <li> <a href = "#"> gerenciamento de membros </a> </li> <li> <a- a href = "#"> gerenciamento </s-membro Gerenciamento </a> </li> <li> <a href = "#"> Gerenciamento de membros </a> </li> <li> <a href = "#"> gerenciamento de membros </a> </li> <li> <a href = "#"> gerenciamento de membros </a> </li> <li> <a href = "#"> <a href = "#" data-toggle = "suspenso" role = "botão" aria-expeled = "false"> manutenção do sistema <pan> </span> </a> <ul role = "menu"> <li> <a href = "#"> restaurar o sistema </a> </li> <li> <a href = "#"> system> system href = "#"> desconecte </a> </li> <li> <a href = "#"> exclua o usuário </a> </li> </li> </li> </ul> <!-escreva navbar-right primeiro e a direita-> <!-na barra de navegação-> <blot = "" "> signot em </signo"> <! <input type = "text" placeholder = "insuram o conteúdo da pesquisa"> </div>
Quando usamos páginas da web para navegar em blogs ou arquivos, temos um nível. No momento, se queremos retornar ao nível anterior ou a vários níveis, precisamos da barra de navegação de localização.
<!-barra de navegação-> <ar> <li> <a href = "#"> meu back-end </a> </li> <li>
3. Barra de progresso
<div> <!-com listras de barra progressiva define as listras, e ativo define animação-> <!-Mostre a porcentagem da barra de progresso de acordo com a porcentagem de largura de estilo-> <div função = "ProgressBar" ARIA-Valuenow = "60" ARIA-valuemin = "0" ARIA-Valuemax = "100"> <mlen> 30%<span> 30%<60 "" 40 "40" 40 "40" 40 "40" 40 "> </div> </div>
4. Objetos de mídia
Esta é basicamente a mesma mensagem no Weibo ou no Twitter
O avatar à esquerda, o título e o texto à direita
<div> <div> <img src = "imagens/1.jpg"> </div> <div> <h4> tabela de mídia </h4> <p> cras sit amet nibh libero, em gravida nulla. Nulla vel metus esclerisque ante Sollicticdudin Commodo. Cras Purus Odio, vestíbulo em vulputado em, Tempus Viverra Turpis. FUSCE Condimentum nunc ac nisi Fringilla. Donec Lacinia Congue Felis em Faucibus. </p> </div> </div>
5. Paginação
Esta é várias páginas
<ul> <li> <a href="#" aria-label="Previous"> <!--Double Arrows to the Left--> <span aria-hidden="true">«</span> </a> </li> <!--The first option is activated--> <li><a href="#">1</a> </li> <li><a href="#">2</a> </li> <li> <a href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> <li> <li> href = "#"> 7 </a> </li> <li> <a href = "#"> aria-label = "next"> <!-setas duplas para a direita-> <span hidden = "true"> »</span> </a> </li> </ul>
Esta é apenas a página anterior e a próxima página
<ul> <li> <a href = "#"> <span Aria-hidden = "true"> ← </span> página anterior </a> </li> <li> <a href = "#"> <span Aria-hidden = "true"> → </span> próxima página </a> </li> </ul>
O acima está escrito com dois botões conectados juntos
O seguinte é escrito, pois dois botões são distribuídos de ambos os lados
<ul> <li> <a href = "#"> <span Aria-hidden = "true"> ← </span> página anterior </a> </li> <li> <a href = "#"> <span Aria-hidden = "true"> → </span> próxima página </a> </li> </ul>
6. Lista
O efeito da lista é muito comum e muito simples de usar
<div> <!-O primeiro item foi selecionado-> <a href = "#"> estatísticas de acesso </a> <a href = "#"> estatísticas de informação </a> <a href = "#"> estatísticas de log </a> <a href = "#"> estatísticas </a> <aist = "#"> informações href = "#"> estatísticas de informação </a> <a href = "#"> estatísticas de informação </a> </div>
Eu usei o componente acima para fazer uma página da web estática de back -end
O efeito é como mostrado na imagem
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.