O Bootstrap é a estrutura HTML, CSS e JS mais popular para desenvolver layouts responsivos, projetos da Web de Mobile-primeiro. - Bootstrap Chinese Documentation
O Bootstrap se tornou a estrutura de desenvolvimento de front-end mais popular devido ao seu suporte para layout responsivo, prioridade do dispositivo móvel e fácil de usar e fácil de aprender.
Também vale a pena aprender o design responsivo do Bootstrap, o desenvolvimento de componentes e o desenvolvimento de plug-in e os métodos de desenvolvimento de scripts de pré-processamento de JavaScript.
código -fonte
Download e compilação do código -fonte
Recomenda -se baixar o código -fonte mais recente e mais completo do Bootstrap no GitHub.
O GitHub é um repositório de hospedagem de código -fonte de bootstrap que contém não apenas o código -fonte, mas também os arquivos de origem da documentação do bootstrap. Portanto, você pode navegar por documentos na máquina local compilando e executando o código -fonte do documento sem uma rede.
Diretório de código -fonte
O diretório de código -fonte do Bootstrap contém:
• Código de implantação do documento Subdirectory_GH_Pages/
• Document Document Docs/
• Subdiretório de código de implantação de bootstrap dist/ dist/
• Subdiretório de script de bootstrap JS/
• Subdiretório de estilo de bootstrap Less/
• Bootstrap Fonte Subdirectory Fontes/
• Grunt de script Grunt Build Script Subdirectory Grunt/
• Gerente de pacotes Nuget Subdirectory NUGET/
• Muitos arquivos de configuração
Ponto de entrada
O código -fonte da estrutura do bootstrap é muito complexo e, sem dúvida, é difícil analisar da perspectiva da estrutura de desenvolvimento do autor. O problema pode ser simplificado, sem prestar atenção em como a estrutura é construída ou implantada, mas apenas focando em como a estrutura funciona, a saber, as peças HTML, CSS/Less e JS.
Através da idéia de divisão e governança, problemas complexos são divididos em muitos problemas simples e resolvidos. Quando todos os pequenos problemas forem resolvidos, problemas complexos serão resolvidos facilmente.
Divida toda a estrutura do bootstrap em componentes, tome componentes como ponto de entrada, entenda seu princípio de trabalho e analise gradualmente toda a estrutura.
Análise de componentes
suspenso suspenso suspenso
Código HTML
<!-Componente: menu suspenso-> <div> <!-Button Trigger-> <button type = "button" data-toggle = "suspenso"> suspenso <span> </span> </butão> <!-menu suspenso-> <ul> <li> <a href = "#" ação </a mais> href = "#"> outra coisa aqui </a> </li> </ul> </div>
Nota: O atributo acessível Aria-* No código-fonte é removido do código para facilitar a análise. Não pode ser omitido em aplicações práticas. O estilo de botão não é expandido aqui para análise
Código CSS
// Arrow Slowdown/Caret.caret {display: Inline-Block; largura: 0; altura: 0; margem-esquerda: 2px; Alinhamento vertical: meio; Top de fronteira: @caret-largura-BASE TRANSFUNDO; TOP de borda: @sólido da largura da lareira ~ "/9"; // ie8 fronteira-direita: @transparente sólido de largura-de-largura; Border-left: @Caret-Width-Base Solid Transparent;} // O Wrapper suspenso (div) .Dropup, .Dropdown {Position: relativo; // Posicionamento relativo do elemento pai} // Evite o foco na alternância suspensa ao fechar suspensos. // Posicionamento absoluto de elementos filhos topo: 100%; // O menu suspenso está próximo da borda inferior do elemento pai à esquerda: 0; Z-Index: @zindex-dropdown; Exibir: Nenhum; // Ocultar por padrão, quando o botão do gatilho é exibido (exibição: bloco) Float: esquerda; largura min: 160px; preenchimento: 5px 0; margem: 2px 0 0; // Substitua o estilo de lista UL padrão: Nenhum; Fonte-tamanho: @font-size-base; Alinhamento de texto: esquerda; Background-Color: @suspenso-bg; Border: 1px Solid @suspenso-Fallback-Border; // Border de fallback do IE8: 1px sólido @suspenso-border; Radio de fronteira: @ @-Radius-Base; .Box-Shadow (0 6px 12px rgba (0,0,0, .175)); clipe de fundo: caixa de preenchimento; // alinha o menu suspenso à direita e .pull-right {direita: 0; Esquerda: Auto; } // divisor horizontal com altura de 1px.divider {.nav-divider (@suspenso-divider-bg); } // Links dentro do menu suspenso> Li> A {Display: Block; preenchimento: 3px 20px; claro: ambos; peso-fonte: normal; altura da linha: @altura da altura; Cor: @suspenso-link-cor; Espaço branco: Nowrap; // impedem que os links de embrulhar}} // ondular/foco state.dropdown-menu> li> a {&: hover, &: focus {text-decoration: Nenhum; Cor: @suspenso-link-hover-cor; Background-Color: @suspenso-link-hover-bg; }} // ativo state.dropdown-menu> .active> a {&, &: hover, &: focus {color: @suspenso-link-link-atactive-color; Decoração de texto: Nenhum; Esboço: 0; Background-Color: @suspenso-link-ativo-bg; }} // Mostrar o menu suspenso.open {> .Dropdown-Menu {Display: Block; // Mostrar} // Remova o contorno quando: foco é acionado> a {contorno: 0; }} // Menu Posicionamento.Dropdown-Menu-Right {Esquerda: Auto; // Redefina o padrão de `.Dropdown-Menu` Direita: 0;} //` .pull-Right` Nav componente..Dropdown-Menu-Left {esquerda: 0; Direita: Auto;} // Seção suspensa Headers.Dropdown-header {Display: Block; preenchimento: 3px 20px; Size de fonte: @font-size-small; altura da linha: @altura da altura; Cor: @suspenso-cabeçalho; Espaço branco: Nowrap; // Como com> li> a} // área de menu não dropdown.dropdown-backdrop {position: corrigido; Esquerda: 0; Direita: 0; Inferior: 0; topo: 0; Z-Index: (@zindex-dropdown-10); // Verifique se o menu suspenso não será fechado ao clicar no menu suspenso} // suspenso alinhado direito.Pull-Right> .Dropdown-Menu {Right: 0; Esquerda: Auto;} // permite que os suspensos subam de baixo para cima (também conhecidos como Menu-Menu) ////, basta adicionar .Dropup após a classe .Dropdown Standard e você está definido, Bro.// TODO: Abstract This para que os estilos fixos não sejam colocados aqui? Bottom de fronteira: @Caret-Width-Base frustrou; fundo de fronteira: @sólido da largura da lareira ~ "/9"; // IE8 Conteúdo: ""; } // Posicionamento diferente para menu de baixo para cima .Dropdown-Menu {Top: Auto; Inferior: 100%; Margin-Bottom: 2px; }} // alinhamento do componente //// reiterar por Navbar.less e o alinhamento de componentes modificados lá. @Media (min-width: @grid-float-breakpoint) {.navbar-right {.Dropdown-menu {.Dropdown-Menu-Right (); } // necessário para substituições do menu alinhado direto padrão. // Removerá o v4 com toda a probabilidade. .DropDown-Menu-left {.Dropdown-Menu-left (); }}}O comportamento desse componente de menu suspenso é: quando o botão de gatilho é clicado, o menu suspenso é exibido abaixo dele e quando a área de menu não queda é clicada, o menu suspenso está oculto.
Princípio de implementação:
1. Somente o botão de gatilho é exibido no início, o menu suspenso.
2. Quando o botão do gatilho for clicado, adicione a classe .Penear após .Dropdown. Em .Epen, o valor de exibição do .Dropdown-Menu é o bloco. Portanto, adicione/remove.open classe significa mostrar/ocultar o menu suspenso.
3. Ao clicar na área de menu que não é de queda, o .Dropdown exclui a classe.open, ou seja, esconde o menu suspenso. O princípio da implementação da área de menu que não deve cair é que o posicionamento fixo, o ladrilho e o índice z é menor que o menu suspenso, para que o menu suspenso não seja oculto ao clicar no menu suspenso.
Código JavaScript
/* ================================================================= ================================================================== ================================================================= ================================================================== ================================================================= ================================================================== ================================================================== ================================================================== Licenciado no MIT (https://github.com/twbs/bootstrap/blob/master/license) * ==================================================================== ==================================================================== var de fundo = '.Dropdown-BackDrop' var Toggle = '[data-toggle = "suspenso"]' var suspenso = function (element) {$ (element) .on ('click.bs.dropdown', this.toggle)} suspenso.version = '3.3.6' function (this) {se selecion) $ this.attr ('href') Selector = Selector && /#a-za-z-z ]/.test(sector) && selettor.replace (/.*(?=#[^/ S]*$)/, '') // tira para ie7} var $ $ pai: $ this.Parent ()} função clearmenus (e) {if (e && e.which === 3) retorna $ (cenário) .remove () $ (altern) .Each (function () {var $ = $ (this) var e.type == 'click' && /input|textarea/i.test(e.target.tagname) && $ .contains ($ parent [0], e.Target)) Retornar $ parent.Trigger (e = $ .Event ('hide.bs.dropdown), RELEDTEGGET) se (e.isdefFefFaLDPRERED ('. 'false') $ parent.RemoveClass ('aberto'). Trigger ($. Event ('hidden.bs.dropdown', RelatedTarget))})} DOLHOWN.ProType.toggle = function (e) {var $ this = $ (this) se ($ this.is ('. $ parent.hasclass ('open') clearmenus () if (! isactive) {if ('otouchStart' no document.documentElement &&! $ parent.closest ('. NavBar-nav'). comprimento) {// se móvel usamos um backdrop porque os eventos não delicatem $ (document.cretELENTELENTELENTELENTELENTELENTEL) {// se usamos um backdrop por causa do cliques (document.CreatELENTELENTEL) {// 'se usamos o backdrop, não deLegAte'). .Insertafter ($ (this)) .on ('clique', clearmenus)} var relatedTarget = {RelatedTarget: this} $ parent.Trigger (e = $ .event ('show.bs.dropdown', RelatedTarget)) se (e.isDefaultPreventEd ()) retornou. .toggleClass ('Open') .Trigger ($. Event ('mostrado.bs.dropdown', RelatedTarget))} return false} suspenso.prototype.keydown = function (e) {if (!/(38 | 40 | 27 | 32)/. $ (this) e.PreventDefault () eStopPropagation () if ($ this.is ('. desativado ,: desativado')) retornar var $ parent = getParent ($ this) var isactive = $ parent.hasclass ('aberto') se (! isactive && wwhich! = 27 | $ parent.find (alternar) .Trigger ('focus') retornar $ this.Trigger ('click')} var desc = 'li: não (.Disabled): visível a' var $ itens = $ parent.find ('. (e.which == 40 && index < $items.length - 1) index++ // down if (!~index) index = 0 $items.eq(index).trigger('focus') } // DROPDOWN PLUGIN DEFINITION // ====================================================== function Plugin (opção) {return this.each (function () {var $ this = $ (this) var data = $ this.data ('bs.dropdown') if (! Data) $ this.data ('bs.dropdown', (dados = new DropDown (this)) se (tipoof opção == 'string') [opção]. $ .fn.dropdown = plugin $ .fn.dropdown.constructor = suspenso // suspenso sem conflito // ================================= .fn.dropdown.noconflict = function () { ================================================================================= ================================================================================= $ (document) .on ('click.bs.dropdown.data-api', clearmenus) .on ('click.bs.dropdown.data-api', '.dropdown formul .on ('keydown.bs.dropdown.data-api', alternar, suspenso.prototype.keydown) .on ('keydown.bs.dropdown.data-api', '.dropdown-menu', suspenso.prototype.keydown)} (jQuery);A estrutura do código JavaScript pode ser dividida em três partes:
1. Linhas de definição de classe 1-125
2. Linhas de definição de plug-in 126-144
3. Resolva linhas de conflito 148-153
4. Aplique-se às linhas de menu suspenso padrão 155-166
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.