Tutoriales básicos de Bootstrap

Plugin de Bootstrap

Bootstrap 警告

Este capítulo explicará la advertencia (Alertas) y las clases proporcionadas por Bootstrap para las alertas. La advertencia (Alertas) ofrece a los usuarios una manera de definir el estilo de los mensajes. Proporcionan información de contexto de retroalimentación para operaciones de usuario típicas.

Puede agregar un botón de cerrado opcional a la alerta. Para crear una alerta inline cancelable, utilice Plugin jQuery de advertencia (Alertas)。

Puede crear un <div> y agregarle .alert class y cuatro clases de contexto (es decir .alert-success、.alert-info、.alert-warning、.alert-danger）uno, para agregar un cuadro de alerta básico. A continuación, se muestra un ejemplo de esto:

Ejemplo en línea

Ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
　　　　<title> Ejemplo de Bootstrap　-　advertencia (Alertas)</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="alert　alert-éxito">¡Éxito! Se completó la presentación de manera excelente.</div>
<div　class="alert　alert-info">¡Información! Tenga en cuenta esta información.</div>
<div　class="alert　alert-warning">¡Advertencia! No envíe.</div>
<div　class="alert　alert-danger">¡Error! Realice algunos cambios.</div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

¡Alertas cancelables!

Los pasos para crear una alerta cancelable son los siguientes:

Creando un <div> y agregándole una .alert class y cuatro clases de contexto (es decir .alert-success、.alert-info、.alert-warning、.alert-danger）uno, para agregar un cuadro de alerta básico.
Además, agregar la clase opcional al <div> class superior .alert-dismissable。
Agregar un botón de cierre.

El siguiente ejemplo demuestra esto:

Ejemplo en línea

Ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title> Ejemplo de Bootstrap　-　¡Alertas cancelables!/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="alert　alert-¡Éxito de alerta!-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	¡Éxito! ¡Se ha completado el envío con éxito.
</div>
<div　class="alert　alert-¡Alerta de información!-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	¡Información! Tenga en cuenta esta información.
</div>
<div　class="alert　alert-¡Advertencia de advertencia!-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	¡Advertencia! No envíe.
</div>
<div　class="alert　alert-alerta de peligro-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	¡Error! Realice algunos cambios.
</div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

¡Enlace en Alertas(Alertas)!

Los pasos para crear un enlace en Alertas son los siguientes:

Creando un <div> y agregándole una .alert class y cuatro clases de contexto (es decir .alert-success、.alert-info、.alert-warning、.alert-danger）uno, para agregar un cuadro de alerta básico.
Usar .alert-link Clases de entidad para proporcionar rápidamente enlaces con colores coincidentes.

Ejemplo en línea

Ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title> Ejemplo de Bootstrap　-　¡Enlace en Alertas(Alertas)!/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="alert　alert-success">
	<a　href="#"　class="alert-link">¡Éxito! ¡Se ha completado el envío con éxito.</a>
</div>
<div　class="alert　alert-info">
	<a　href="#"　class="alert-link">信息！请注意这个信息。</a>
</div>
<div　class="alert　alert-warning">
	<a　href="#"　class="alert-link">警告！请不要提交。</a>
</div>
<div　class="alert　alert-danger">
	<a　href="#"　class="alert-link">错误！请进行一些更改。</a>
</div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

Bootstrap 进度条 Bootstrap 缩略图