No trabalho diário, a função de upload e download de arquivos é uma parte indispensável. As estruturas de estilo de bootstrap front-end também são usadas com mais frequência. Agora, com base nos poderosos modelos de estilo do Bootstrap, personalize um estilo para baixar arquivos.
No futuro, usaremos a estrutura MVC da primavera para implementar todo o código enviado pelo arquivo, portanto, fique atento.
Vejamos o exemplo da imagem primeiro: este exemplo inclui baixar estilos de arquivo de amostra e upload de estilos de arquivo.
Basta enviar o código primeiro e finalmente explicar:
<div id = "arquivo"> <etiqueta para = ""> selecione Arquivo: </etiqueta> <div> <input id = "lefile" type = "file" style = "display: none"> <span onclick = "$ ('input [id = lefile]'). click ();"; style = "cursor: ponteiro; cor de fundo: #e7e7e7"> <i> </i> navegar </span> <input id = "photocover" type = "text"> <span style = "cursor: ponteiro; ponteiro-eventos: auto;"> </span> </div> </div>As principais tecnologias envolvidas são: Bootstrap; Ponteiro-eventos do CSS3; html5
1. Estilo básico de upload de arquivo html5
<input type = "arquivo" name = "file">
O estilo exibirá efeitos diferentes de acordo com diferentes navegadores.
2 Ícones da fonte
Você pode usar o ícone da fonte Glyphicons construído em bootstrap ou ícones de fontes impressionantes. Para tutoriais de uso específicos, consulte o site oficial:
GLYPHICONS: http://v3.bootcss.com/components/#glyphicons
Fonte Awesome: http://fontawesome.io/
Neste exemplo, dois ícones são usados, <i> <i>
Ou <i> <i>
3. CSS3: Ponteiro-eventos
No bootstrap, os eventos ponteiros do .Form-Control-feedback são definidos como nenhum, o que faz com que os elementos sejam selecionados ao clicar no botão de amostra de download e agora estão definidos como automaticamente.
gramática:
Ponteiro-eventos: Auto | Nenhum | VisiblePainted | VisibleFill | visiblestroke | visível | pintado | preencher | AVC | todos
Valor padrão: Auto
Aplicável a: todos os elementos
Herança: Sim
Animação: não
Calcule Valor: Especifique o Valor
Valor:
Auto: o mesmo desempenho que a propriedade Pointer-Events não é especificado. O mesmo valor que VisiblePainted no conteúdo SVG
Nenhum: o elemento nunca se tornará um alvo para eventos do rato . No entanto, quando a propriedade Pointer-Events de seu elemento descendente especifica outros valores, o evento do mouse pode apontar para o elemento descendente; nesse caso, o evento do mouse acionará o ouvinte do evento do elemento pai na ordem de captura ou borbulha.
Outros valores só podem ser aplicados ao SVG.
4. O botão para fazer upload de um arquivo ------- Uso da caixa de combinação de bootstrap
Uso de .Input-Group e .input-Group-Addon.
Para uma renderização CSS específica, verifique o código -fonte do Bootstrap sozinho.
5. Implementação do botão de amostra de download --- consulte o estilo de prompt de erro de formulário do bootstrap
O uso de .Has-feedback e .Form-Control-feedback
Se você não aprendeu o suficiente, pode clicar aqui para aprender e depois anexar um tópico maravilhoso a você: Bootstrap Learning Tutorial
O exposto acima é tudo sobre este artigo, e espero que seja útil que todos aprendam programação de bootstrap.