En primer lugar, me gustaría agradecer a todos mis amigos por su apoyo. Continuaré actualizando mi resumen de estudio en Bootstrap. Si hay algo mal con la escritura, corríjeme. Con respecto al artículo anterior, el diseño fijo y el diseño de transmisión son muy importantes. Si no tiene claro, puede echar un vistazo a lo que escribí: Bootstrap Notas de estudio: Diseño de estilo CSS (1)
Esta vez, echemos un vistazo a algunas clases específicas y clave sobre estilos en Bootstrap y cómo usar estas clases, las diferencias entre las clases y algunas clases relacionadas involucradas, que se explican al enumerarlas.
1. Forma
1. Clase de control de formato: el ancho de las etiquetas <put> <elect> <xtexarea> que contienen esta clase se convertirán en ancho: 100%, y en la forma, el control generalmente se incluye en el grupo de formulario con la etiqueta de la 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 for = "EjemploInputEmail"> Nombre de correo electrónico </etiqueta> <xtexarea> 11111 </textarea> </div> <div> <etiqueta para = "seleccionar"> Seleccione Formulario </label> <ectele select> <opción> 111 </ppection> <option> 222 </opción> </select> </div> </form>
Según el código anterior, podemos verlo uno por uno. Agregar clase de formulario en línea (coloque el control en una línea) | clase de formulario-horizontal (la etiqueta está a la izquierda y el control está a la derecha), que utiliza la ayuda de la etiqueta.
< <div>@</div> </div> </div> <button type = "enviar"> Search </boton> </form>
Los efectos son los siguientes:
Si no se agrega, el botón se exprimirá a la siguiente línea. No se publican más fotos aquí, puede pegar el código y probarlo usted mismo.
< PlaceHolder = "Password"> </div> </div> </div> </form>
Los efectos son los siguientes:
( Nota: El cuadro de texto de entrada aquí debe tener en cuenta 5/6, personalicé su ancho al 20%)
Aquí, con respecto a la forma-horizontal, debe llevarse a cabo junto con el sistema de cuadrícula de Bootstrap.
Usar el nombre de clase "Form-Horizontal" en el elemento <Form> tiene las siguientes funciones:
1: Establezca los valores de acolchado y margen del control de formulario. El código anterior se puede ver en la consola de depuración, Padding-Left: 50px.
2: Cambie la expresión del "grupo de forma", similar a la "fila" del sistema de cuadrícula.
2. La función de la etiqueta
<etiqueta for = "hello1"> hello </label> <input type = "text" id = "hello"> <br> --- el halo azul se genera <etiqueta para = "1111"> hola </label> <input type = "text" id = "jiang"> <br> --- La identificación no corresponde, no hay respuesta. Solo cuando el mouse se coloque sobre el control habrá un halo azul
Según el código anterior, consulte: El atributo For en la etiqueta debe corresponder a la ID en el control. Función: asegúrese de que cuando el mouse se coloque en la etiqueta, el control correspondiente producirá un halo azul.
3. Papel de rol
¿Le resulta extraño por qué necesita agregar rol al escribir formularios o algunos controles?
Función: asegúrese de que el software de lectura de pantalla pueda ser reconocido. El software de lectura de pantalla es un software que ayuda a las personas retrasadas mentalmente a acceder a Internet. Transmite imágenes, texto, etc. a personas retrasadas mentalmente en forma de voz. Por lo tanto, para garantizar que el software de lectura de pantalla pueda ser reconocido, generalmente no hay etiquetas o etiquetas semánticas con funciones especiales que deben escribirse en él. Por ejemplo:
<a href = "#" role = "botón"> enlace </a> <!-Si el enlace A se usa como un botón y se usa para activar ciertas funciones en la página actual, en lugar de conectarse a otras páginas o al resto de la página actual, asegúrese de configurar role = "botón"-> Originalmente, la etiqueta representa un enlace, pero se utiliza aquí como un botón. El software de lectura de pantalla no puede reconocerlo, por lo que debe agregarse rol = "botón" para que el software de lectura de pantalla sepa que este es un botón.
4. ¿Cuál es la diferencia entre la etiqueta, Aria-etiquetado, Aria marcado?
<div> <input type = "text" id = "idcard" aria-label = "tarjeta de id"> <p> Ejemplo de bloque de bloque </p> --help-blok: texto utilizado para indicar explicación </div> <div> <label para = "idcard"> tarjeta de id </etiqueta> <input type = "text" id = "idcarard"> <p> Ejemplo de bloque-nivel </p> </divs> div>
Los efectos son los siguientes:
El primero no tiene la palabra "tarjeta de identificación" visual, los cuales son para la conveniencia del software de lectura de pantalla para identificar. Es solo que Aria-Label está oculto.
Echemos un vistazo a cómo usar Aria -Belled. Por lo general, cuando el texto de la etiqueta ya existe en un cierto elemento, use Aria marcado, y su valor es la identificación de todos los elementos de lectura. Echemos un vistazo a los siguientes subs:
<Div> <Botton type = "Button" id = "DropDownMenu1" Data-Toggle = "Dropdown"> Seleccione las siguientes opciones <Span> </span> </Button> <UL ROLA = "Menú" Aria-LabelledBy = "DropdownMenu1"> <li role = "Presentation"> <A ROTO = "Menuitem" Tabindex = "-1" href = "#"#" role = "Presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> 22222 </a> </li> <li role = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"> 22222 </a> </li> <<li "presenta"> <a rol = "Menuitem". href = "#"> 33333 </a> </li> </ul> </div>
En este momento, el UL contiene LI y se controla en el botón, por lo que es más apropiado usar Aria-Labeledby en este momento. En pocas palabras, el alcance de uso entre los tres es diferente, y las funciones básicas son las mismas, todo para la conveniencia del reconocimiento del software de lectura de pantalla. Cuando se trata de clases ocultas, debemos mencionar la clase solo SR. Echemos un vistazo.
<etiqueta for = "inputemail"> Correo electrónico: </etiqueta>
<etiqueta for = "inputemail"> Correo electrónico: </etiqueta>
El efecto en este momento es: el texto anterior está oculto, y solo esta diferencia permanecerá sin cambios.
5. Clase discapacitada
En la forma, debe prestar atención a esta clase, comparemos aquí.
< id = "DISABILEDSELECT"> <Pection> Disable Unsselectable </option> </select> </div> <div> <label> <input type = "checkBox"> Disable no se puede seleccionar </label> </div> <botón type = "enviar"> enviar </botón> </fieldset> </form>
Si agrega una clase deshabilitada al conjunto de archivos, el formulario deshabilitado solo se deshabilitará para la entrada de selección de botones, etc., y no funcionará para otros atributos de leyenda de elementos. En comparación, agregue el atributo de leyenda
< PlaceHolder = "Disabled"> </div> <div> <etiqueta for = "discapacedSelect"> Desactivado cuadro desplegable </etiqueta> <select id = "DisabledSelect"> <opción> no seleccionado </opción> </select> </div> <div> <label> <input type = "checkbox"> inátil <!-Los formularios deshabilitados solo están deshabilitados para la entrada de selección de botones, etc., y no funcionan para otros elementos Legend->
6. Atributo de datos de datos de datos-TOGGLE-TOGGLE
HTML5 permite a los desarrolladores agregar libremente atributos a sus etiquetas, y este atributo personalizado generalmente comienza con "datos".
Data-Toggle: indica la interacción de datos. Haga clic en el botón en la columna de arriba para cambiar al menú desplegable.
Data-spy indica: monitoreo
Data-Traget: Target.
Esto involucra eventos en JS, y no los explicaré en detalle. Echaré un vistazo a estos problemas cuando ingrese al aprendizaje JS en Bootstrap. Todavía hay muchas cosas involucradas en la forma, y hay casi muchos resúmenes. También hay adiciones. Por favor, déjame un mensaje a continuación.
2. Clase de botón
Esto no es difícil, solo recuerde la clase de atributos, es fácil de entender.
<a href = "#" role = "botón"> enlace </a> <button type = "enviar" desactivado = "desactivado"> predeterminado </boton> <botón type = "enviar"> primario </botón> <botón type = "enviar"> éxito </botón> <button type = "enviar"> info </botón>--Btn-Block: Estirar a 100% de elemento principal <Tipo de botón de entrada <1/" type = "botón" value = "input"> <input type = "button" value = "enviar">
Los efectos son los siguientes:
3. Categoría de imágenes
<
<img src = "111.png">
<img src = "111.png">
<img src = "111.png">
Los efectos son los siguientes:
En resumen, personalmente siento que el papel de las formas sigue siendo muy importante. Es más fácil explicar algunas otras categorías básicas aquí. El próximo artículo se transferirá al aprendizaje del componente CSS: Bootstrap Learning Notes Componente CSS (3)
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.