Latest web development tutorials

Bootstrap clase auxiliar

En este capítulo se analizan algunas de las Bootstrap puedan entrar en las clases de ayuda a mano.

texto

Las siguientes clases diferentes muestran diferentes colores de texto. Si el texto es un enlace para mover el puntero del ratón sobre el texto será atenuado:

categoría descripción Ejemplos
.text-silenciado Estilo de texto categoría "text-silenciado" probar
.text-primaria Estilo de texto categoría "-texto primario" probar
.text-éxito Estilo de texto categoría "text-éxito" probar
.text-info Estilo de texto "text-info" categoría probar
.text de alerta Estilo de texto categoría "texto de alerta" probar
.text-peligro Estilo de texto categoría "text-peligro" probar

fondo

Las siguientes clases diferentes muestran diferentes colores de fondo. Si el texto es un enlace para mover el puntero del ratón sobre el texto será atenuado:

categoría descripción Ejemplos
.bg-primaria celda de la tabla utilizando la categoría "bg-primaria" probar
.bg-éxito celda de la tabla utilizando la categoría "bg-éxito" probar
.bg-info celda de la tabla utilizando la categoría "bg-info" probar
.bg de alerta celda de la tabla utilizando la categoría "bg-alerta" probar
.bg-peligro celda de la tabla utilizando la categoría "bg-peligro" probar

otro

categoría descripción Ejemplos
.Reciba-izquierda Elementos de flotación, a la izquierda probar
.Reciba derecha Elementos de flotación a la derecha probar
.center-bloque Elemento se establece display: block y centrado probar
.clearfix claro flotador probar
.show Se muestran los elementos obligatorios probar
.hidden escondite elemento obligatorio probar
.sr de sólo Además del lector de pantalla, el elemento oculto en otros dispositivos probar
.sr de sólo-enfocable En conjunción con la clase .sr-solamente, que se muestra cuando el elemento recibe el foco (tales como: el funcionamiento del teclado del usuario) probar
.text-ocultar Los elementos de la página de texto contenidos de fondo de reemplazo probar
.close Mostrar botón de apagado probar
.caret Pantalla de menú desplegable probar

más ejemplos

icono de cierre

Utilice común icono Cerrar para cerrar el cuadro de modal y el cuadro de alerta. Utilicela clase cerca de acercarse icono.

Ejemplos

<P> icono Cerrar ejemplo <botón type = "button" class = "cerrar" aria-hidden = "true"> y tiempos; </ Button> </ P>

Trate »

Los resultados son los siguientes:

icono de cierre

signo de intercalación

Use cursor para tirar hacia abajo la función y dirección. Utilice el elemento <span> con el símbolo de intercalaciónclase para obtener esta función.

Ejemplos

<P> ejemplo de intercalación <span class = "cursor"> </ span> </ P>

Trate »

Los resultados son los siguientes:

signo de intercalación

flotante rápida

Se puede utilizar cadaclase de pull-izquierda-derechaode traccióna los elementos de izquierda o flotantes a la derecha. El siguiente ejemplo ilustra este punto.

Ejemplos

<Div class = "pull-left"> Quick izquierda flotante </ div> <Div class = "pull-derecha"> correcta rápidamente flotante </ div>

Trate »

Los resultados son los siguientes:

flotante rápida

Para alinear los componentes de la barra de navegación, utilice.navbar-izquierda o derecha .navbarlugar. Vea la barra de navegación de rutina de carga .

Centrado en el contenido

Utilicela clase de centro-bloque para centrar los elementos.

Ejemplos

<Div class = "fila"> <Div class = "centro-bloque" style = "width: 200px; fondo -color: #ccc;"> Este es el ejemplo de centro-bloque </ div> </ Div>

Trate »

Los resultados son los siguientes:

bloque de contenidos centrada

claro flotador

Para borrar el elemento flotante, utilice.clearfix clase.

Ejemplos

<Div class = "clearfix" style = "background: # D8D8D8; frontera: 1px solid # 000; padding: 10px;"> <Div class = "pull-izquierda" style = "background: # 58D3F7; "> Quick izquierda flotante </ div> <Div class = "pull-derecha" style = "background: # DA81F5; "> correcta rápidamente flotante </ div> </ Div>

Trate »

Los resultados son los siguientes:

claro flotador

Mostrar y ocultar el contenido

Puede forzar el elemento para mostrar u ocultar (incluyendo lectores de pantalla) a través del uso de laclase .show y .hiddenllegado.

Ejemplos

<Div class = "fila" style = "padding: 91px 100px 19px 50px;"> <Div class = "espectáculo" style = "izquierda-margen: 10px ; ancho: 300px; background-color: #ccc;"> Este es un ejemplo de la clase de espectáculo </ div> <Div class = "oculto" style = "width: 200px; fondo -color: #ccc;"> Este es un ejemplo de la clase ocultar </ div> </ Div>

Trate »

Los resultados son los siguientes:

Mostrar y ocultar el contenido

lector de pantalla

Usted puede poner todos los elementos en el dispositivo mediante el uso de unaclase oculta .sr-solamente, además de un lector de pantalla.

Ejemplos

<Div class = "fila" style = "padding: 91px 100px 19px 50px;"> <Forma class = "forma-inline" role = "forma"> <Div class = "forma-grupo"> <Label class = "sr-only" para = "email"> dirección de correo electrónico </ label> <Input type = "e-mail" class = "forma de control" marcador de posición = "Enter correo electrónico"> </ Div> <Div class = "forma-grupo"> <Label class = "sr-only" para el "pase" => contraseña </ label> <Input type = "contraseña" class = "forma de control" marcador de posición = "contraseña"> </ Div> </ Form> </ Div>

Trate »

Los resultados son los siguientes:

lector de pantalla

Aquí vemos dos tipos de etiquetas de entrada de la etiqueta con laclase SR-solamente, por lo que la etiqueta sólo será visible para los lectores de pantalla.