1. Forma
Arquivo de código -fonte:
_form.scss
mixins/_form.scss
1. De acordo com a hierarquia: group-group-> forma-control/input-group/format-static-controle-> várias tags
2. Os recipientes como o grupo de formulários/formulário/grupo de entrada/formulário-estático são divididos em dois métodos de exibição: bloco e bloco embutido. A célula de mesa é usada para atingir o nível de grupo de entrada.
.Input-Group {display: Inline-Table; Alinhamento vertical: meio; .input-group-addon, .input-group-btn, .form-Control {width: Auto; }}3. Entrar-se-add-addon: se a classe inserir o ícone de texto da página da web, ele desalinhará o pixel anterior.
Solução: O glificon não pode ser usado em conjunto com outros estilos, mas é usado internamente, porque o glificon possui 1 pixel de configuração para o topo:
.glyphicon {posição: relativa; topo: 1px; Exibição: bloco embutido; Fonte-família: 'Glyphicons Halflings'; estilo de fonte: normal; peso-fonte: normal; altura de linha: 1; -Webkit-font-smanding: antialiaseado; -moz-osx-font-smanding: cinza;}2.
Arquivo de código -fonte:
_navbar.scss
1. Divida principalmente áreas internas, como cabeça, outras áreas; e localizações da barra de navegação de posicionamento
2. A implementação da pasta (removida em 4.0), ou seja, a classe Navbar-Collaps, em vez de colapso, e uma camada oculta aparece no botão
2.1. Navbar-colapso: quando for maior que o ponto de interrupção, será exibido (porque o colapso está oculto por padrão)
3. Conteúdo suporta Nav, Brand, Form, Toggler
4. NavBar-Toggler (4.0 removido): Defina para exibir quando a tela for menor que o valor do ponto de interrupção (768) e, em 4.0, o colapso é usado para exibir esse botão diretamente. Não há limite no tamanho da tela. A aplicação do NavBar-Toggle também deve ser usada em combinação com o colapso.
5. Top-estático de navbar: ele adiciona apenas o Zindex, remove os cantos arredondados, largura da borda e outros conteúdos.
6. Navir-Fixed-Top/Bottom: todos estão posicionados acima e abaixo, com efeitos flutuantes
7. Navbar-Brand: Brand, você pode colocar nomes de páginas da web, logotipos da empresa e outros conteúdos
8. Navbar-Toggle: uma imagem de um clique usado para encolher, que será exibido quando for menor que o ponto de interrupção e, se for maior que esse valor, será oculto (e a exibição de alternância estiver flutuando corretamente e serve como um elemento de posicionamento relativo):
.navbar-toggle {position: relativo; Float: Certo; Margem-direita: $ Navbar-Padding-Horizontal; preenchimento: 9px 10px; @include navbar-vertical-align (34px); Background-Color: transparente; Imagem de fundo: Nenhum; // Redefina o estilo padrão do Firefox-on-Android incomum; Consulte https://github.com/necolas/normalize.css/issues/214 fronteira: 1px transparente sólido; Radio de fronteira: $ Border-Radius-Base; // Removemos o 'esboço' aqui, mas posteriormente compensa a anexação `: hover` // estilos para`: focus`. &: foco {esboço: 0; } // barras .iCon-Bar {display: block; Largura: 22px; Altura: 2px; Radio de fronteira: 1px; } .iCon-Bar + .iCon-Bar {margin-top: 4px; } @media (largura min: $ grid-float-breakpoint) {display: nenhum; }}9. Navbar-Nav: O NAV original fez algumas configurações compatíveis. Devemos ajustar o estilo em ponto de interrupção-max e o estilo sob ponto de interrupção ou remover a cor padrão, sombra, etc.
10. Formulário Navi: Ajuste principalmente todas as formas para serem elementos embutidos
11. NavBar-Text e NavBar-BTN: ambos fizeram configurações de compatibilidade apropriadas com base no padrão
12. Navbar fornece dois temas: padrão e inverso. Cada tema possui o processamento de compatibilidade de estilo correspondente para seus respectivos componentes.
13. A barra de navegação em si não tem muitos estilos. Ele fornece apenas dois conteúdos: alternar e marca, fornecendo principalmente dois temas, bem como uma combinação de quatro componentes: suspensão, colapso, forma e navegação.
Se você ainda deseja estudar em profundidade, pode clicar aqui para aprender e anexar um tópico maravilhoso a você: Bootstrap Learning Tutorial
Esta série de tutoriais foi compilada em: Bootstrap Basic Tutorials Tópicos Especiais, bem -vindo ao clicar para aprender.
O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.