O Bootstrap, do Twitter, é a estrutura de front-end mais popular no momento. O Bootstrap é baseado em HTML, CSS e JavaScript. É simples e flexível, tornando o desenvolvimento da Web mais rápido.
Pontos -chave para o aprendizado:
1. Forma
2. Fotos
Nesta lição, aprendemos principalmente sobre formulários de bootstrap e funções de imagem e exibimos vários efeitos ricos por meio da definição de CSS integrada.
um. Forma
O Bootstrap fornece alguns estilos de formulário ricos para os desenvolvedores usarem.
1. Formato básico
// Implementar estilo de formulário básico <form> <div> <brety> email </celt> <input type = "email" placeholder = "digite seu email"> </div> <div> <belt> senha </cret> <input type = "senha" placeholder = "por favor digite sua senha"> </div> </forma>
Nota: O estilo correto só pode ser fornecido se o tipo de tipo de caixa de entrada estiver definido corretamente. Os controles da caixa de entrada suportados incluem: texto, senha, dateTime, DateTime-Local, Data, mês, hora, semana, número, email, URL, pesquisa, tel e cor.
2. Formulário embutido
// Deixe o formulário ficar alinhado e flutuado e se comportar como uma estrutura de bloco em linha em linha <form>
Nota: Quando for menor que 768px, o estilo exclusivo será restaurado.
3. Agrupamento de formulários
// Adicionar fragmentos antes e depois <div> <div> ￥ </div> <input type = "text"> <div> .00 </div> </div>
4. Arranjo horizontal
// Mantenha os elementos no formulário organizado horizontalmente <form> <div> <belt> email </celt> <div> <input type = "email" placeholder = "por favor digite seu email"> </div> </div> </morm>
NOTA: O sistema de varredura col-sm é usado aqui e os capítulos a seguir se concentrarão em explicá-lo, enquanto o controle de controle representa a sincronização com o estilo de elemento pai.
5. Caixas de seleção e caixas de rádio
Definir a caixa de seleção, em uma linha <div> <belt> <input type = "caixa de seleção"> esportes </celt> </div> <div> <belt> <input type = "caixa de seleção"> music </belt> </div> // Set a caixa de seleção desativada <div> <belt> <but type = "caixa de seleção> <// //> TIPO = "Caixa de seleção"> Sports </Label> <belt> <input type = "Caixa de seleção" Disabled> Music </elabel> // Defina a caixa de rádio <div> <belt> <input type = "Radio" name = "Sex" Disabled> masculino </elbel> </div>
6. Lista suspensa
// Defina a lista suspensa <select> <pution> 1 </pption> </option> 2 </pption> <pution> 3 </pption> <pution> 4 </pption> <pution> 5 </pption> </leclect>
7. Verifique o status
// defina como status de erro <div>
Nota: Existem outros status da seguinte forma:
Estilo Descrição do status de erro Has-errror Has ter sucesso Status de sucesso tem um status de aviso de alerta // Sincronização de etiqueta de etiqueta status correspondente <breting> Entrada com o sucesso </cretel>
8. Adicione ícones extras
// Ícone de texto embutido no lado direito da caixa de texto <div> <belt> email </celt> <input type = "email"> <pan> </span> </div>
Nota: Além do Glyphicon-OK, existem várias tabelas abaixo:
Estilo Descrição
9. Controle o tamanho
// De grande a pequeno <input type = "senha"> <input type = "senha"> <input type = "senha">
NOTA: Você também pode definir os elementos pai-pai-group-LG e o Form-Group-SM para ajustar.
dois. foto
O Bootstrap fornece alguns estilos de imagem ricos para os desenvolvedores usarem.
1. Forma da imagem
// três formas <img src = "img/pic.png"> <img src = "img/pic.png"> <img src = "img/pic.png"> // imagem responsiva <img src = "img/pic.png">
O exposto acima está o conteúdo relacionado a formulários e imagens de bootstrap apresentados pelo editor. Espero que seja útil para todos!