Hoje vamos dar uma olhada nos efeitos do componente CSS e nas classes mais importantes. Essas classes não são difíceis. A chave é dominá -los com proficiência, usá -los em combinação e usá -los com flexibilidade. Para artigos sobre o estilo CSS e o layout nos dois primeiros artigos, você pode lê -los nos artigos anteriores.
1. Componentes de navegação
Eu mesmo fiz uma navegação. Atualmente, existe apenas um menu de primeiro nível. No próximo artigo, um menu de segundo nível será fornecido, envolvendo plug-ins JS, para não descrevê-lo aqui.
<! 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> Menu de segundo nível </itit> <yoy> .sidebar-Menu {margem: 20px Auto; largura: 180px;}/*Reescreva o estilo do mouse deslizando*/. Nav-pills li a: pairar {Background-Color: #337Ab7; Cor: #fff;} </style> <link href = "css/bootstrap.css" rel = "STILESHEET"> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <link href = "css/style.css" Rel = "Stylesheet"> src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><body><!-- bootstrap production navigation MENU-> <div> <ul> <li role = "Apresentação"> <a href = "#"> <pan> </span> home </a> </li> <li role = "Apresentação"> <a href = "#"> </span> </span> sobre mim </a> </li> <li role = "Apresentação"> <ahf> Role = "Apresentação"> <a href = "#"> <pan> </span> Missing </a> </li> <li role = "Apresentação"> <a href = "#"> <plane> </span> placa de mensagem </a> </li> <li role = "Apresentação"> <a href = "#"> <pan> <///li> </ul> </div> </body> </html>Os efeitos são os seguintes:
Os seguintes pontos devem ser observados na navegação:
1: O componente de navegação depende da classe NAV. (Ou seja, ao usar outras classes, você deve escrever esta classe)
2: Garanta a acessibilidade dos componentes de navegação (adicione o atributo de função)
3: As classes envolvidas incluem varas de navegação, pilhas de navegação (fazem cápsulas de navegação), empilhadas em navegação (faça navegação horizontal na navegação vertical), justificada por NAV (faça o arranjo de armas de largura igual)
4: Para a classe desativada, ao adicionar links na página de navegação (incluindo guias e páginas de navegação), ela está apenas desativada na superfície (a cor fica acinzentada, a forma do mouse muda) e a função real ainda existe.
5: Use a navegação com menu suspenso.
Vejamos o seguinte sub-: você pode colar código e testá-lo sozinho, e não tirar mais capturas de tela.
<!-Navegação depende da classe Nav da classe NAV-TABS NAV-> <ul> <li role = "Apresentação"> <a href = "#"> home </a> </li> --- Por favor, adicione o atributo de função <li role = "/) <a href = "#"> perfil </a> <li> <li> <li> <a href = "#"> perfil </a> <li> <li> <li) </ul> <!-guias de cápsula organizadas verticalmente empilhadas-> <ul> <li role = "Apresentação"> <a href = "#"> home </a> </li> <li role = "Apresentação"> <a href = "#"> perfil </a> </li> <li role = "apresentação"> <a href = "> Role = "Apresentação"> <a href = "#"> mensagens </a> </li> </ul> <!-Alinhando a navegação em ambas as extremidades, justificada para alcançar o alinhamento da coluna de navegação-> <ul> <li role = "Apresentação"> <a href = "#"> </a> </li> <i> role = " Role = "Apresentação"> <a href = "#"> mensagens </a> </li> </ul> <br> <br>
Vamos dar uma olhada no status de navegação com o menu suspenso:
<ul> <li role = "Apresentação"> <a data-toggle = "suspenso" href = "#" role = "botão" aria-haspopup = "true" ARIA-EXPAVEND = "FALSO"> DOLTODN <CPON> </span> </li> <ul> <li> <a href = "#". <li> <a href = "#"> Ação 222 </a> </li> <li> <a href = "#"> ação 333 </a> </li> </li> </li> <li> <a href = "#"> ação 333 </a> </li> <li> </li> <li> <siD) geralmente usando li vazio ou span. <li role = "Apresentação"> <a href = "#"> perfil </a> </li> <li role = "Apresentação"> <a href = "#"> mensagens </a> </li> </ul>
De fato, para usar o menu suspenso suspenso suspenso, o formato básico é como o acima, ou se você ligar o botão A no botão, etc., poderá usá -lo com flexibilidade.
2. Componente da barra de navegação
Observação:
1: A barra de navegação é organizar todos os componentes horizontalmente e embrulhar os componentes, semelhante à navegação horizontal
2: Garanta a acessibilidade. Use a tag <av> ou <div role = "navegação">
3: As classes envolvidas nas barras de navegação incluem: Inversa de Navi (para implementar a cor do fundo como preto e texto em branco), Navbar fixed-top | Navbar-Fixed-Bottom (barras de navegação fixa na parte superior e inferior)
NavBar-left | Navbar-right (geralmente adiciona-se-direita ao último elemento), text de navbar, link de navbar (defina a cor da conexão), NavBar-btn (para botões não incluídos no formulário, você pode
Use esta classe para alcançar o efeito da centralização vertical), formulário de navbar (para obter alinhamento vertical), Navber-Brand (Ícone da marca Set), Navbar-Collaps (colapso)
Vamos dar uma olhada no efeito da dobragem de colapso da marinha, o código é o seguinte:
<!-- Navigation bar collapsed means folding--><nav> <div> <div> --Navigation bar header<button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href = "#"> marca </a> </div> <div id = "bs-expler-navbar-collapse-1">-Folding coluna <ul> <li> <a href = "#"> link <li link </span </a> </li> <li> <a href = "> data-toggle = "suspenso" role = "botão" aria-haspopup = "true" aria-expeled = "false"> suspenso <pan> </span> </a> <ul> <li> <a href = "#"> ação </a> </li> <li> <a href = "#" outra ação </a> </a> Aqui </a> </li> <li> <a href = "#"> link separado </a> </li> <li role = "separador"> </li> <li> <a href = "#"> um link mais separado </a> </li> </li> </li> </ul> <form) type = "submite"> submeter </butut> </morm> <ul> <li> <a href = "#"> link </a> </li> <li> <a href = "#" data-toggle = "suspenso" role = "button" aria-haspopup = "" ARIA-ExpAdD = "falsed"> <pann> <pann> <npan "</spanle" href = "#"> ação </a> </li> <li> <a href = "#"> outra ação </a> </li> <li> <a href = "#"> outra coisa aqui </a> </li> <li> <a href = "#"> link separado </a> </li> </li> <a> type = "Button" data-toggle = "colapso" dados de dados = "#BS-Exemplo-navbar-colapso-1" ARIA-EXPAVEND = "FALSE"> <Span> Alterá a navegação </span> </mun> </span> </span> </span> </span> </span> </botão> <ahre>
O efeito é o seguinte:
Ou seja, quando a tela do meu navegador diminui, os componentes originais se tornam linhas dobradas (três linhas horizontais) no lado direito da linha da marca. Clique no botão três horizontais e o componente será exibido.
3. Componentes da paginação
Observação:
1: Use a paginação da classe (adicione a classe de paginação-LG para aumentar a
2: Atinge o alinhamento da volta da página e o alinhamento de giro de página de implementação (a frente e a parte traseira estão localizadas nas duas extremidades, respectivamente).
O código é o seguinte:
<!-categoria de paginação-> <mav> <ul> <li> <a href = "#" aria-label = "anterior"> <span Aria-hidden = "true"> «</span> </a> </li> <li> <a href ="#"> 1 </a> </li> <li> <a> <ah ="> "> 1 </a> </li> <li> <a> href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a> ARIA-HENDEN = "TRUE"> »» </span> </a> </li> </ul> </av>
Se você implementar a paginação, basta adicionar <ul>.
O efeito de curva da página é o seguinte: Use principalmente a classe Pager
<!-FLIP-UP-> <NAV> <ul> <li> <a href = "#"> anterior </a> </li> <li> <a href = "#"> a seguir </a> </li> </ul> </nav> <!-O link de alinhamento adicionou aulas anteriores e seguintes em ambos os fins-> <c Nav> <li> <li> <li> <! Aria-Hidden = "True"> ← </span> mais antigo </a> </li> <li> <a href = "#"> mais recente <span Aria-hidden = "true"> → </span> </a> </li>
Os efeitos dos dois acima são os seguintes:
4. Crachá
Função: Apresente as informações em números atraentes.
<!-Badge-> <a href = "#"> Caixa de entrada <pange> 42 </span> </a> <botão tipo = "Button"> mensagem <pange> 4 </span> </butut>
Os efeitos são os seguintes:
Adicionar esse tipo de classe de crachá também pode ser usado com navegação, etc.
5. Componente de miniatura
Use -o com o sistema raster e a classe de miniatura. O código é o seguinte: pode ser testado por você
Miniatura de miniatura-> <div> <div> <div> <img src = "111.png"> <div> <h3> rótulo de miniatura </h3> <p> <a href = "#" role = "botão"> Button </a> </p> </div> </div = </" src = "111.png"> <div> <h3> rótulo de miniatura </h3> <p> <a href = "#" role = "button"> botão </a> </p> </div> </div> <!-terceiro-> <div> <div> <mg srumb = "111.pngng"> <! href = "#" role = "button"> botão </a> </p> </div> </div> <!-terceiro-> <div> <div> <img src = "111.png"> <div> <h3> thumbnail Label </h3> <p> <a href = "#" role = ""> Button </div> </div> </div> </div> </div> </div>
6. Caixa de aviso fechada
Use Classe: Alert-Dismissible e um botão são postados da seguinte forma:
<!-Forneça um botão de fechar para a caixa de aviso-> <div role = "alert"> <botão tipo = "botão" Data-Dismiss = "Alert" ARIA-Label = "Close"> <span ARIA-Hidden = "True"> × </span>-ATRIBUTO ARIA-ARIA-HENDEN </Strong> Div. comportamento em todos os dispositivos ->
Em relação à cena, você pode substituí -lo sozinho. Não há mais descrição. Defina alerta-Link para definir a cor que corresponde à caixa de aviso atual.
7. Barra de progresso
Usar classe: barra de progresso e progresso para implementar a animação
<!-barra de progresso-> <div> <div role = "progressbar" aria-valuenow = "60" aria-valuemax = "100" aria-valuemin = "0"> 60% </div> </div> <!-Defina a largura mínima-> <div> <div Role = "ProgressBar" ARIA-ARIA-ARIANIA "80". ARIA-valuemax = "100"> 80% </div> </div> <div> <div role = "ProgressBar" Aria-valuenow = "2" aria-valuemin = "0" Aria-valuemax = "100" Style = "min-width: 2em;"> 2% </div> </div>
Para alcançar a barra de progresso do efeito de animação, use o progresso-bar-barra para alcançar o efeito de animação e adicionar ativo. O código é o seguinte: Não há mais capturas de tela
<!-Use o progresso-bar-listrado na classe Stripe-> <div> <div role = "ProgressBar" Aria-valuenow = "100" Aria-valuemin = "0" ARIA-valuemax = "100"> <pan> 40% completo </span> 100% </div> </div>
Você também pode alterar a cor das listras da barra de progresso em combinação com a cor da cena.
8. Grupo de lista, componentes do grupo de entrada
Vamos primeiro olhar para o grupo de listas, principalmente usando a classe List-Grupo e, em segundo lugar, os itens da lista são escritos com o Item de Grupo de Lista. O código é o seguinte:
<!-List Group-> <ul> <li> <lpan> 3 </span> 1111 </li> <li> <span> 5 </span> 2222 </li> <li> 3333 </li> <li> 4444 </li> <li> <li> 5555 </li> </li> <!-Links também pode adicionar as classes de FISTO-AS FELIO href = "#"> 2222 </a> <a href = "#"> 33333 </a> <a href = "#"> 44444 </a> <a href = "#"> 55555 </a> </div> <! type = "Button"> 2222 </button> <button type = "button"> 3333 </button> <button type = "button"> 4444 </button> <!-Item do grupo de listas-> <div> <a href = "#"> <h4> itens do grupo de lista </h4> <p> 11111 </p> </a> <p> 22222 </p> </a> </div>
Vamos dar uma olhada no grupo de entrada, usar a classe de grupo de entrada para envolver os componentes. O código é o seguinte:
<!-Grupo de entrada-> <div>-Os componentes estão incluídos no Inout-Group <span> <button type = "button"> go </button> </span> <input type = "text" aria-label = "text"> </div>
9. Incorporar conteúdo de recursos responsivos
Entenda o que isso significa e o que é conteúdo incorporado? Como incorporá -lo? Então, como responder?
Incorporação: isto é, use tags como <frame>, <bed>, <dide> e <ject> para introduzir conteúdo de arquivo externo. Eu acredito que todo mundo conhece os novos atributos no HTML5. vídeo, rádio, etc.
Resposta: Crie automaticamente uma escala fixa com base na largura do contêiner externo incorporado, permitindo que o navegador determine automaticamente o tamanho do vídeo ou conteúdo e pode escalar em vários dispositivos.
Se você deseja que o estilo final corresponda a outras propriedades, também pode usar explicitamente uma classe derivada.
O código é o seguinte:
<div> <iframe src = "..."> </frame> </div> <div> <iframe src = "..."> </frame> </div>
Vamos dar uma olhada no que a incorporação de incorporação-16by9 e incorporar-se-4by3 significa, respectivamente.
Vamos dar uma olhada no console:
.Embed-responsivo-4by3 {--- 4 representa a horizontal, 3 representa vertical, ou seja, uma taxa de escala, ou seja, uma escala de 4: 3-Bottom: 75%;}.Mantenha a proporção, se a largura for calculada a 100%, é 100% * 3/4 = 75%. Neste momento, defina sua proporção definindo seu preenchimento. Quando você amplia o zoom no navegador,
Finalmente, mantenha essa taxa de escala para escala.
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.