Bootstrap4 Tutoriales básicos

Bootstrap4 Barra de progreso Bootstrap4 Grupo de botones

Bootstrap4 insignia

Las insignias se utilizan generalmente en páginas web para indicar información valiosa, como títulos importantes, mensajes de advertencia, contadores de notificaciones, etc. Las insignias (Badges) se utilizan principalmente para resaltar elementos nuevos o no leídos. Para usar una insignia, simplemente agregue la clase .insignia junto con una clase de color que tenga un significado específico (como .insignia-secundario) agregar a <span> elemento. Las insignias pueden cambiar de tamaño según el tamaño del elemento padre:

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>insignia</h2>
<h1>Bootstrap encabezado <span　class="insignia　insignia-secundario">Nuevo</span></h1>
<h2>Bootstrap encabezado <span　class="insignia　insignia-secundario">Nuevo</span></h2>
<h3>Bootstrap encabezado <span　class="insignia　insignia-secundario">Nuevo</span></h3>
<h4>Bootstrap encabezado <span　class="insignia　insignia-secundario">Nuevo</span></h4>
<h5>Bootstrap encabezado <span　class="insignia　insignia-secundario">Nuevo</span></h5>
<h6>Bootstrap encabezado <span　class="insignia　insignia-secundario">Nuevo</span></h6>
</div>
</body>
</html>

Prueba aquí ‹/›

varios tipos de insignias

a continuación se listan todas las insignias de tipos de colores:

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>varios tipos de insignias</h2>
　　<span　class="insignia　insignia-principal">principal</span>
　　<span　class="insignia　insignia-secundario">secundario</span>
　　<span　class="insignia　insignia-éxito">éxito</span>
　　<span　class="insignia　insignia-peligro">peligro</span>
　　<span　class="insignia　insignia-advertencia">advertencia</span>
　　<span　class="insignia　insignia-información">información</span>
　　<span　class="insignia　insignia-claro">claro</span>
　　<span　class="insignia　insignia-oscura">oscura</span>
</div>
</body>
</html>

Prueba aquí ‹/›

insignia redonda

usar .insignia-clase "pill" para configurar la insignia de forma redonda:

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>insignia de forma redonda</h2>
　　<span　class="insignia　insignia-insignia redonda-por defecto">por defecto</span>
　　<span　class="insignia　insignia-insignia redonda-principal">principal</span>
　　<span　class="insignia　insignia-insignia redonda-éxito">éxito</span>
　　<span　class="insignia　insignia-insignia redonda-información">información</span>
　　<span　class="insignia　insignia-insignia redonda-advertencia">advertencia</span>
　　<span　class="insignia　insignia-insignia redonda-peligro">peligro</span>
</div>
</body>
</html>

Prueba aquí ‹/›

insignia insertada en un elemento

a continuación se muestra cómo insertar insignias dentro de botones:

ejemplo

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Insertar insignia en el botón</h2>
　　<button type="button" class="btn btn-primary">
　　　　Mensajes <span class="badge badge-light">4</span>
　　</button>
　　<button type="button" class="btn btn-danger">
　　　　Notificaciones <span class="badge badge-light">7</span>
　　</button>
</div>
</body>
</html>

Prueba aquí ‹/›

Bootstrap4 Barra de progreso Bootstrap4 Grupo de botones