Escreva na frente
Neste artigo, falarei sobre o uso do bootstrap com base em uma página da Web da paisagem que fiz. As capturas de tela da página da web são as seguintes:
Os efeitos e o código da página completa da Web podem ser visualizados aqui ou visualizados no Codepen. Os principais efeitos que as páginas da web precisam alcançar incluem o seguinte:
1. Os botões de login e registro na barra de navegação aparecem depois de clicar nas caixas modais de login e registro, e as janelas de login e registro podem ser alternadas. A barra de menus é responsiva
2. As opções de paisagem na barra de navegação podem ser puxadas para baixo. Clique na caverna de cortina de água Jiuzhaigou lijiang no suspensão para localizar a guia correspondente.
3. Carrossel de apresentação de tela grande
4. Clique para ligar na página da guia
Agora começamos a abraçar o bootstrap.
Acredito que os amigos já ouviram falar de Bootstrap ou o usaram. Nesta página da web, eu uso o CDN Bootstrap v3.3.4. Clique aqui para baixar a versão mais recente do Bootstrap v3.3.5 ou clique aqui para baixá -lo no site oficial. Eu acredito que sempre há um que combina com você ~~~~~~
Neste artigo, vamos falar sobre a barra de navegação primeiro.
Barra de navegação
Antes de usar o BS, você deve primeiro consultar o BS, incluindo CSS e JS. O método de referência é muito simples, o mesmo que referenciar arquivos externos ordinários. Você pode usar links de CDN ou colocá -los em referências locais. O código é fornecido abaixo.
<html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatível com" content = "ie = edge"> <meta name = "viewport" content = "width = device-width, scale inicial"> <"> <"> <myStin> myStin "myStin" width = width, scale inicial "<"> <"> <mySlin> myStin = myStin. href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.minmin.css"> <!-html5 shim e responda.js para o suporte de IE8 se você faz o suporte de html5 e as perguntas da mídia-> <!-por 1, para que você não faça o suporte de IE8, se o que não faz a manutenção de HTML5. 9]> <script src = "http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "http://cdn.bootcss.com/nchript.js1.2s1.2s1.2sposled/script/script/" <! [endif]-> </ad Head> <!-jQuery (necessário para os plugins JavaScript da Bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <! src = "http://cdn.bootcss.com/bootstrap/3.4/js/bootstrap.min.js"> </script>
Neste exemplo da página da paisagem, eu uso o link CDN.
Ao mesmo tempo, como o plug -in BS é baseado no JQ, o JQ também deve ser introduzido.
Primeiro dê o código completo da barra de navegação
<VN> <div> <!-marca e alternância são agrupados para melhor exibição móvel-> <div> <botão tipo = "button" data-toggle = "colapso" data-target = "#bs-explem-navbar-collapse-1"> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> Uma marca comercial você mesmo </a> </div> <!-navegação no canto superior esquerdo-> <div id = "bs-expler-navbar-colaps-1"> <ul> <li> <a href = "#"> homepage <panuse> (data) </span> </a> </li> <li> <a- href = "# ARIA-EXPAVEND = "FALSE"> cenário <Purn> </span> </a> <ul role = "menu"> <li> <a href = "#jiuzhaigou"> jiuzhaigou </a> </li> <li> <a href = "lijiang"> lijiang </a> href = "#shuilianong"> caverna shuijian </a> </li> <li> </li> <li> <a href = "#shuilianandong"> shuijian caverna </a> </li> <li> <li> <li> <a/href =#"> mais .. Data-Target = "#sobre"> <a href = "#"> sobre </a> </li> </ul> <form role = "search"> <div> <input type = "text" placeholder = "pesquise as atrações .."> <butão type = "button"> go </button> </divd> </form> <li> <iTAggle " id = "SignIn-button"> <a href = "#"> login </a> </li> <li data-toggle = "modal" data-target = "#signin-signup-tab" id = "sinalização-button"> <a href = "#"> registra </a>
Os componentes de navegação do BS dependem da mesma classe .NAV e o código é explicado separadamente. Vejamos primeiro este parágrafo:
<button type = "button" data-toggle = "colapso" data-target = "#bs-expler-navbar-colapso-1"> <span> alternar a navegação </span> </span> </span> </span> </span> </span> </botão>
O objetivo deste código é reduzir a viewport, as opções de menu na barra de navegação entrarão em colapso, clicar no ícone de colapso e as opções de menu na barra de navegação serão organizadas verticalmente. A classe .NavBar Inverse in NAV é de cor inversa. Os amigos podem remover a classe .navbar-Inverse para observar o efeito. Por ser um controle preto, uso a cor invertida aqui. Se você quiser usar outras cores, o ouro rico, os amigos podem combiná -los de acordo com o seu próprio gosto. A classe .Navbar-Brand pode ser usada para definir a marca registrada do seu próprio site. Vou usar o texto para definir uma marca registrada aqui. Amigos interessados podem adicionar seu próprio logotipo. A classe .DropDown-Toggle pode implementar um puxão e a classe .divider pode implementar uma linha divisória clara e escura.
Como o nome sugere , a classe .NavBar-Right na caixa de pesquisa e o login e o registro é para a direita.
Atributos de dados
Aqui é necessário falar sobre o atributo de dados da BS. Na BS, os desenvolvedores podem usar todos os plugins JS em BS apenas através dos atributos de dados. Esta é uma API de primeira classe no BS e geralmente é nossa maneira preferida de usar plugins JS. Por exemplo, o data-toggle = "colapso" e o data-toggle = "suspenso" no código acima são as maneiras de usar os plug-ins JS no BS.
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 é tudo sobre este artigo, espero que seja útil que todos aprendam a barra de navegação de bootstrap.