English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriales básicos de Bootstrap

Plugins de Bootstrap

Clases auxiliares de Bootstrap

Este capítulo discutirá algunas clases auxiliares útiles en Bootstrap.

Texto

Las siguientes clases diferentes muestran diferentes colores de texto. Si el texto es un enlace, al pasar el ratón sobre él se oscurecerá:

clasedescripciónEjemplo
.texto-muted"text-estilo de texto de la clase "muted"intente
.texto-primary"text-estilo de texto de la clase "primary"intente
.texto-success"text-estilo de texto de la clase "success"intente
.texto-info"text-estilo de texto de la clase "info"intente
.texto-warning"text-estilo de texto de la clase "warning"intente
.texto-peligro"text-estilo de texto de la clase "danger"intente

Fondo

Las siguientes clases diferentes muestran diferentes colores de fondo. Si el texto es un enlace, al pasar el ratón sobre él se oscurecerá:

clasedescripciónEjemplo
.bg-primarycélula de tabla utiliza "bg-clase "primary"intente
.bg-successcélula de tabla utiliza "bg-clase "success"intente
.bg-infocélula de tabla utiliza "bg-clase "info"intente
.bg-warningcélula de tabla utiliza "bg-clase "warning"intente
.bg-peligrocélula de tabla utiliza "bg-"clase" de peligrointente

otros

clasedescripciónEjemplo
.tirar-izquierdaelemento flotar a la izquierdaintente
.tirar-derechaelemento flotar a la derechaintente
.centrado-bloqueestablecer el elemento como display:block y mostrarlo centradointente
.clearfixeliminar flotaciónintente
.showmostrar elementos forzadamenteintente
.hiddenocultar elementos forzadamenteintente
.sr-soloocultar elementos en otros dispositivos además de los lectores de pantallaintente
.sr-solo-focablecon .sr-sólo clase, se muestra cuando el elemento obtiene el foco (como usuarios que operan con teclado)intente
.texto-ocultarreemplazar el contenido de texto de un elemento de página con una imagen de fondointente
.cerrarmostrar botón de cerrarintente
.caretmostrar función desplegableintente

más ejemplos

icono de cerrar

utilizar el icono de cerrar común para cerrar cuadros de diálogo y cuadros de alerta. Utilice la clase cerrar obtiene el icono de cerrar.

Ejemplo en línea

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Example de Bootstrap　-　icono de cerrar</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>ejemplo de icono de cerrar
	<botón type="botón" class="cerrar" aria-hidden="true">×</>botón>
</>p>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

aria-hidden="true" principalmente ayuda a las personas con discapacidad (como los ciegos) a usar dispositivos de lectura (lectura automática del contenido y reproducción automática), saltará automáticamente al contenido con este atributo para evitar que las personas con discapacidad se confundan!

inserto

utilizar el inserto para representar la función desplegable y la dirección. Utilice las clases caret el elemento <span> recibe esta función.

Ejemplo en línea

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Example de Bootstrap　-　inserto</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>ejemplo de inserto
	<span class="caret"></>span>
</>p>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

flotación rápida

Puede usar las clases tirar-izquierda o tirar-derecha para hacer flotar un elemento a la izquierda o a la derecha. Los siguientes ejemplos ilustran esto.

Ejemplo en línea

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Example de Bootstrap　-　flotación rápida</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="pull-">izquierda
	Flotar rápidamente hacia la izquierda
</div>
<div class="pull-">derecha
	Flotar rápidamente hacia la derecha
</div>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

Si desea alinear componentes dentro de la barra de navegación, utilice .navbar-izquierda o .navbar-derecha en lugar de. Consulte Barra de navegación de Bootstrap.

contenido centrado

utilizar clase centrado-bloque para centrar elementos.

Ejemplo en línea

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Example de Bootstrap　-　bloque de contenido centrado</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="fila">
	<div class="center-"block" style="ancho:200px;background-color:#ccc;">
		esto es center-ejemplo de bloque
　　　	</div>
</div>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

eliminar flotación

Si desea eliminar la flotación de un elemento, utilice .clearfix clase.

Ejemplo en línea

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Example de Bootstrap　-　eliminar flotación</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="clearfix" style="fondo: #D8D8D8;borde:　1px sólido #000; relleno:　10px;">
	<div class="pull-left" style="background:#58D3F7">
　　　　　　	Flotar rápidamente hacia la izquierda
　　　	</div>
　　　	<div class="pull-right" style="background: #DA81F5">
　　　　　　	Flotar rápidamente hacia la derecha
　　　	</div>
</div>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

Mostrar y ocultar contenido

Puede usar la clase .show y .hidden Para forzar la visualización u ocultación de elementos (incluso para el lector de pantalla).

Ejemplo en línea

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Example de Bootstrap　-　Mostrar y ocultar contenido</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" style="padding:　91px　100px　19px　50px;">
	<div class="show" style="margin-left:10px;width:300px;background-color:#ccc;">
　　　　　　	Este es un ejemplo de la clase show
　　　	</div>
　　　	<div class="hidden" style="width:200px;background-color:#ccc;">
　　　　　　	Este es un ejemplo de la clase hide
　　　	</div>
</div>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

Lector de pantalla

Puede usar la clase .sr-solo Para ocultar elementos a todos los dispositivos, excepto al lector de pantalla.

Ejemplo en línea

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Example de Bootstrap　-　Lector de pantalla</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" style="padding:　91px　100px　19px　50px;">
	<form class="form-inline" role="form">
		<div class="form-group">
			<label class="sr-only" for="email">Dirección de correo electrónico</label>
			<input type="email" class="form-control" placeholder="Ingrese correo">
		</div>
		<div class="form-group">
			<label class="sr-only" for="pass">Contraseña</label>
			<input type="password" class="form-control" placeholder="Contraseña">
		</div>
	</form>
</div>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

Aquí, vemos dos etiquetas de tipo input que tienen la clase sr-soloPor lo tanto, las etiquetas solo serán visibles para los lectores de pantalla.

Herramientas útiles responsivas de BootstrapImágenes de Bootstrap