Primeiro de tudo, gostaria de agradecer a todos os meus amigos pelo apoio deles. Continuarei atualizando meu resumo do estudo sobre o Bootstrap. Se houver algo errado com a escrita, por favor me corrija. Em relação ao artigo anterior, o layout fixo e o layout de streaming são muito importantes. Se você não estiver claro sobre isso, pode dar uma olhada no que eu escrevi: Bootstrap Study Notes: CSS Style Design (1)
Desta vez, vamos dar uma olhada em algumas classes específicas e importantes sobre estilos no bootstrap e como usar essas classes, as diferenças entre as classes e algumas classes relacionadas envolvidas, que são explicadas ao listá -las.
1. Forma
1. Classe de controle de forma: a largura das tags <input> <leclect> <sexttarea> contendo esta classe se tornará largura: 100%e, no formulário, o controle geralmente é incluído no grupo de formulários com a tag de etiqueta.
<form role="form"> <!-- All input, textarea, select elements with form-control class set will be defaulted to width:100% --> <div> --form-group: Generally speaking, labels and space wrapping are used in form-group <label for="exampleInputEmail">Email address</label> <input type="email" id="exampleInputEmail" placeholder="input"> </div> <div> <Label para = "ExempliinInputEmail"> Nome do e -mail
De acordo com o código acima, podemos procurá -lo um por um. Adicione a classe de formulário-na-linha (coloque o controle em uma linha) | Classe de forma-horizontal (o rótulo está à esquerda e o controle está à direita), que usa a ajuda do rótulo.
<!-classe de formulário-inline torna a forma horizontalmente presente-> <form>-Segundo, existem check-in-in-in-inline, etc. <div> <gravador para = "ExempliinInputamount"> valor </elatbul> <div>--input-group: Grupo de entrada <div>@</div> --ddon: Exemplo de referência ao texto ou botão " <div>@</div> </div> </div> <botão type = "submit"> pesquise </butut> </morm>
Os efeitos são os seguintes:
Se não for adicionado, o botão será apertado para a próxima linha. Não há mais fotos postadas aqui, você pode colar código e testá -lo sozinho.
<!-Formulário de formulário organizado horrivelmente: significa que o texto está alinhado à direita-> <form> <div> <gravador para = "inputEmail"> email: </crety> <div> <input type = "email" id = "inputemil" em "PlaceLder =" email "> </div> </div> <div> <duBoTeAil" Inputemil "InputEmail" em " id = "inputPassword" placeholder = "senha"> </div> </div> </div> </morm>
Os efeitos são os seguintes:
( Nota: a caixa de texto de entrada aqui deve ser responsável por 5/6, eu personalizei sua largura para 20%)
Aqui, em relação à formulário-horizontal, ele deve ser realizado em conjunto com o sistema de grade da Bootstrap.
Usando o nome da classe "Form-Horizontal" no elemento <form> tem as seguintes funções:
1: Defina os valores de preenchimento e margem do controle de formulários. O código acima pode ser visto no console de depuração, preenchimento-esquerda: 50px.
2: Altere a expressão de "Grupo de forma", semelhante à "linha" do sistema de grade.
2. A função do rótulo
<Label para = "hello1"> hello </elabel> <input type = "text" id = "hello"> <br> --- O halo azul é gerado <etiqueta para = "1111"> hello </elbel> <input type = "text" id = "jiang"> <br> --- O id não corresponde a ele, não há resposta. Somente quando o mouse for colocado no controle, haverá uma auréola azul
Com base no código acima, consulte: o atributo for atribui deve corresponder ao ID no controle. Função: verifique se, quando o mouse for colocado no rótulo, o controle correspondente produzirá um halo azul.
3. Papel do papel
Você acha estranho por que você precisa adicionar função ao escrever formulários ou alguns controles?
Função: verifique se o software de leitura de tela pode ser reconhecido. O software de leitura de tela é um software que ajuda as pessoas retardadas mentais a acessar a Internet. Ele transmite fotos, texto, etc. para pessoas retardadas mentais na forma de voz. Portanto, para garantir que o software de leitura de tela possa ser reconhecido, geralmente não há tags ou tags semânticas com funções especiais que devem ser escritas nele. por exemplo:
<a href = "#" role = "button"> link </a> <!-se o link a é usado como um botão e é usado para acionar certas funções na página atual, em vez de se conectar a outras páginas ou o restante da página atual, certifique-se de definir o botão ""-> Originalmente, a tag a representar um link, mas é usado aqui. O software de leitura de tela não pode reconhecê -lo; portanto, o ROPE = "Button" precisa ser adicionado para informar o software de leitura da tela que este é um botão.
4. Qual é a diferença entre o rótulo, Aria-Label, Aria marcada com Aria?
<div> <input type = "text" id = "idcard" aria-label = "id de id"> <p> Exemplo de nível de bloco </p> --help-block: texto usado para solicitar explicação </div> <div> <bel para = "idcard"> placa de id </label <input Type = "text" ida = "idcard"> ">
Os efeitos são os seguintes:
O primeiro não possui a palavra "cartão de identificação" visual, ambos para a conveniência do software de leitura de tela para identificar. É que Aria-label está escondido.
Vamos dar uma olhada em como usar a Aria marcada. Geralmente, quando o texto do rótulo já existe em um determinado elemento, use a Aria marcada com Aria e seu valor é o ID de todos os elementos de leitura. Vamos dar uma olhada nos seguintes subs:
<div> <button type = "button" id = "suspensomenu1" data-toggle = "suspenso"> selecione as seguintes opções </span> </button> <ul role = "menu" aria-labelledby = "suspense <bindenu1"> <li role = "apresentação"> <a role = "Menuitem" TabindEx = 1 "> <li" hel = "> <a role =" Menuitem "/tabex = 1"> Role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> 22222 </a> </li> <li role = "Apresentação"> <a Role = "Menuitem" Tabindex = "-1" HREF = "#"> 2222 a </a "</li> <li> href = "#"> 33333 </a> </li> </ul> </div>
Neste momento, o UL contém li e é controlado no botão, por isso é mais apropriado usar Aria-Labelledby no momento. Simplificando, o escopo de uso entre os três é diferente e as funções básicas são as mesmas, tudo para a conveniência do reconhecimento do software de leitura de tela. Quando se trata de aulas ocultas, precisamos mencionar a classe somente SR. Vamos dar uma olhada.
<Label para = "InputEmail"> email: </celt>
<Label para = "InputEmail"> email: </celt>
O efeito neste momento é: o texto acima está oculto e apenas essa diferença permanecerá inalterada.
5. Classe desativada
No formulário, você precisa prestar atenção a esta classe, vamos compará -la aqui.
<!-Introduzir um formulário com fieldset, função: inclua o formulário em um bloco-> <form role = "form"> <fieldset desativado> <div> <gravador para = "desabilableTextInput"> caixa de entrada desativada </etiquetel> <input type = "text" id = "desabilabedtinput" placeholder = "Disabed> </divi-> </divint =" text "" iD = "DisabedTInput" Plawolder = "Disabed"> </divi-> </divint = " <select id = "DisableDSelect"> <pution> Desative não selecionável
Se você adicionar uma classe desabilitada ao conjunto de arquivos, o formulário desativado será desativado apenas para selecionar botões, etc., e não funcionará para outros atributos da legenda de itens. Em comparação, adicione o atributo de legenda
<!-Adicionada propriedade comprida-> <form role = "form"> <fieldset desativado> <legend> <input type = "text" placeholder = "A cor fica acinzentada, mas não desativada"> </legend>-aqui o mouse pode ser colocado na caixa de entrada <div> <bel para = "DistextInTXt"> desativado na caixa </desativado </desativado </desativado </typen) PISCOLADOR = "Disabled"> </div> <div> <gravador para = "desabilableSelect"> caixa suspensa desativada </fieldset> </morm> <!-Os formulários desativados estão desativados apenas para selecionar botões, etc., e não funcionam para outros itens legenda->>
6. Data-Toggle Target Data-spy atributo
O HTML5 permite que os desenvolvedores adicionem atributos livremente às suas tags, e esse atributo personalizado geralmente começa com "dados-".
Dados-toggle: indica interação de dados. Clique no botão na coluna acima para alternar para o menu suspenso.
Data-spy indica: Monitoramento
Dados-Traget: Target.
Isso envolve eventos no JS, e eu não os explicarei em detalhes. Vou dar uma olhada nesses problemas quando entrar no JS aprendendo no bootstrap. Ainda há muitas coisas envolvidas no formulário, e há quase tantos resumos. Há também adições. Por favor, deixe -me uma mensagem abaixo.
2. Classe de botão
Isso não é difícil, lembre -se da classe de atributos, é fácil de entender.
<a href = "#" role = "button"> link </a> <botão type = "submit" desativado = "desativado"> padrão </button> <button type = "submit"> primário </button> button type = "submit"> sucem </button> <butty type = "submit"> info <//" type = "Button" value = "input"> <input type = "button" value = "submit">>
Os efeitos são os seguintes:
3. Categoria de imagem
<!-centralize o bloco central de imagens: centralize o conteúdo para exibir img-rouses: com cantos arredondados img-círculo: anel img-tumbnail: adicione uma borda externa à imagem->
<img src = "111.png">
<img src = "111.png">
<img src = "111.png">
Os efeitos são os seguintes:
Em resumo, eu pessoalmente sinto que o papel das formas ainda é muito importante. É mais fácil explicar algumas outras categorias básicas aqui. O próximo artigo será transferido para o aprendizado do componente CSS: Bootstrap Learning Notes CSS Component (3)
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 é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.